Aller au contenu

reactjs

http://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux/34599594

https://tech.zalando.com/blog/the-state-of-frontend-at-zalando-2016/

http://stateofjs.com/2016

Intro

  • ReactJS = View only.
  • React Components are declarative (JSX)
  • Virtual DOM:

  • Flux architecture: simple data flow (no 2-way data binding)

  • quick app scaffolding: create-react-app

NE PAS OUBLIER EXPORT (es6) LOL

Ecosysteme

  • View layer: ReactJS + ReactDOM
  • Controller layer: Flux or Redux

Toolkit:

  • package manager: yarn, npm
  • module loader: Webpack
  • dev server: webpack-dev-server
  • (optional) ES6 syntax transpiler: Babel

Components

React components:

  • plusieurs layers de components ex: page ou component type header
  • fonction render: notation jsx qui ressemble à du html. Prend des variables entre {}
  • this.state: proprietes locales a un component. utiliser this.setState pour déclencher un changement d'état
  • this.props: permet de passer des infos d'un component a l'autre, via des attributs de components.

React dom: html renderer. on pourrait render du json si on avait envie

Projets react d'interet: https://gist.github.com/sAbakumoff/7b8510adcb16bded189d747e34f5e114

Librairies de components utiles: react-bootstrap material-ui http://dev.office.com/fabric searchkit par ex, on pourrait creer une lib de components pour developper un RPG en react: gamescreen contient skillbar, map, xp bar, menu, et skillbar contient skill, et menu contient menu item

Flux vs Redux

http://blog.andrewray.me/flux-for-stupid-people/ Flux: architecture proposed by Facebook.

1
2
3
4
* components:
* stores: ~services. Subscribes to the dispatcher. Outputs an event (EventEmitter)
* actions:
* dispatcher: ~broker w/ broadcast ability

Redux: another implementation made to address Flux problems

1
2
3
* only one store: 
* no dispatcher
* reducers: can be composed like react components

Redux

  • Redux is not React-redux
  • new_state = reducer(old_state, action)
  • root reducer: combine reducers
  • reducers: pure functions (no side effects, idempotency)
  • components dispatch actions
  • middlewares: break synchronous data flow (ie api call). Can have multiple middlewares (logging etc). redux-thunk is just a type of middleware.
  • declare middlewares in the store (WHY LOL)

Testing

Tester des components React: utiliser le shallow-rendering ie instancier un component mais pas ses fils ni peres

  • Tester un component: Enzyme (TDD), Chai (assertion type BDD), Mocha (test runner)
  • Visualiser les components dans un environnement isolé (UI code review): React Storybook. Exemple pour Jenkins Blue Ocean.

Pour aller plus loin:

  • Universal rendering: https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app

Tips & Good practices

  • forgetting to export :3
  • components names:
  • ne jamais ecrire de logique dans la fonction render()!