Topics Covered

Components

• Everything is broken down into components
• Whenever data changes or the user interacts with the page, a render event is triggered
• Only the updated parts are rerendered

Virtual DOM

• React keeps track of a virtual DOM
• When a render event is triggered, it diffs the old DOM against the new one making only necessary updates

Reactive Web Pages

• Dynamic DOM manipulation allows a great UX and performance
• No page reloads necessary
• Everything is rendered on the client side
• Only need to serve the app initially, then fetch data as needed

Unidirectional Data Flow

• Components can only affect their children
• Easy to follow data and debug

Components

• Data goes in (through props)
• UI comes out (returned by render method)

propTypes

• Specify optional and required component props
• Use them!

State

• Can be useful for interactive components
• Mutable using setState(), unlike props
• Avoid whenever possible

Context

• Like global props
• Automatically passed to all children that define contextTypes
• Experimental API, likely to change

JSX

• Optional but recommended
• Requires build step
• Use Babel and Webpack

Create React App

• The official, no config necessary way to start developing
Link

tl;dr

• $ npm install -g create-react-app
• $ create-react-app my-app
• $ cd my-app/
• $ npm start

• Install Git (if necessary)
Link
• Clone this repository
$ git clone git@github.com:MichaelReiter/ReactTalk.git

• Install Node (if necessary)
Link
• Navigate inside directory
$ cd ReactTalk/sample\ app/
• Install dependencies
$ npm install
• Start the app
$ npm start

Counter Summary

• Simplified into small, reusable components
• Uses stateless functions whenever possible
• State used when for simple data