ReactJS

and Redux

- an introduction

Best place to start

https://facebook.github.io/react/

ReactJs + Redux

ReactJs

Who uses it in India?

Flipkart@JSConf

Virtual Dom and Browser Dom

Simple App

1. $ npm install -g create-react-app

   $ create-react-app my-app

   $ yarn start
2. Application code (gist)

Data and control flow

Component

- Lifecycle

Component Best Practices

• Container (Smart) and Component (Dumb)
• Redux binding with state
• Component state (v/s Store)
• Routers and top level components

Actions

• Sync Actions - ex. opening sub-views
  • Redux
• Async Actions - ex. API calls
  • Redux-thunks or Sagas
• Complicated Actions (two way) - ex. sockets
  • Epics

Store and Reducers

• Store is one large app state
• Reducers make this state manageable and bind to the views (mapStateToProps)
• Cannot do
  • Firing actions from reducers
  • However, we do have middlewares...

Other things I learnt building halfchess.com

• External libraries with a state
  • Does the "chess AI engine library" goes into store, action, view or middleware.
• Webpack build system
  • Bundle your app
  • Passing env variables
  • Hot reload, etc

Example repos for chess lovers

• Just the board
  • https://github.com/moroshko/react-chessboard
• A two player game
  • https://github.com/kiqs/chess-redux

Important topics not covered

• Testing techniques
• Debugging techniques