Intro to React

Some Housekeeping...

  • install webpack and webpack dev server
npm install babel-loader babel-core babel-preset-es2015 --save-dev
npm i babel-preset-es2015 babel-preset-react --save-dev

Just a bit more...

npm i --save react react-dom

About React

  • just the view
  • component driven
  • one-way data flow 
  • focus on JS

Some Unfamiliars

ES6

  • modules
    • import
    • export
  • let, const
  • {a, b} = object  
  • [...myArray] spread
  • classes
    • constructors

HelloWorld

  • ReactDOM
  • JSX
  • render()
  • state
  • props

let's build a todo

  • Thinking In React (plan components)
  • lifecycle hooks
  • setState()
  • smart and dumb components
  • events (onChange, onClick)
  • handling inputs
  • className and styles

stateless functional components

Things I won't talk about until later

React Router

Flux, Redux, Relay, GraphQL

React Native

Made with Slides.com