Schedule > 9. Introduction to React

Readings

Before beginning the React assignment – and definitely before Friday’s tutorial – please complete the following readings. It will take you a few hours, but you won’t be able to make progress with React without understanding some of the core React conventions and workflow, including:

• Quick Start
• Thinking in React. Make note of the steps:
  • Break the UI into a component hierarchy
  • Build a static version in React
  • Find the minimal but complete representation of UI state (noting the difference between “props” and “state”
  • Identify where your state should live
  • Adding “inverse data flow”
• Sharing state between components
• Tic Tac Toe
  • You are strongly encouraged to do this on your own (see Tic Tac Toe)

Other References (As Needed)

• Synchronizing with effects
• You might not need an effect

Slides

• Lecture 16 & 17: Intro to React

Videos & Lecture Files

Videos and worked examples will be published after class:

• Videos on Google Drive
• Worked examples on GitHub

Activities

1. Lecture 16 Activity (Monday): Create a carousel
2. Lecture 17 Activity (Wednesday): Create a data-driven carousel
3. Recommended Activity (to prep for Friday): Do the Tic Tac Toe React Tutorial