O slideshow foi denunciado.

How to use React.js

0

Compartilhar

Carregando em…3
×
1 de 20
1 de 20

Mais Conteúdo rRelacionado

Audiolivros relacionados

Gratuito durante 14 dias do Scribd

Ver tudo

How to use React.js

  1. 1. HOW TO USE REACT.JS @Andrej_Gajdos http://andrejgajdos.com/ WEBtlak*
  2. 2. http://bit.ly/trends-js Reddit–pageviews 0 40 000 80 000 120 000 160 000 February March April May June July August September October November December January /r/angularjs /r/reactjs http://bit.ly/hacker-news-hiring-trends REACT POPULARITY
  3. 3. ‣ Virtual DOM ‣ JSX WHAT. IS THAT? /** @jsx React.DOM */ var HelloWorld = React.createClass({ render: function() { return <div> Hello World </div>; } }); jsx http://bit.ly/jsx-syntax REACT FEATURES
  4. 4. React var CatImg = React.createClass({ render: function() { var imgsrc = “catimg.com/” + this.props.name; return <img src={imgsrc} />; } }); React.renderComponent( <CatImg name="pewpewpew" />, mountNode); http://bit.ly/react-component
  5. 5. http://bit.ly/props-vs-state ‣ http://bit.ly/interactive-ui PROPS AND STATE
  6. 6. PRESENTATIONAL AND CONTAINER COMPONENTS http://bit.ly/components-sep Presentational components ‣ Are concerned with how things look ‣ No dependencies on the rest of the app ‣ Don’t specify how the data is loaded or mutated ‣ Receive data and callbacks exclusively via props ‣ Rarely have their own state Container components ‣ Are concerned with how things work ‣ Provide the data and behavior to presentational or other container components ‣ Are often stateful, as they tend to serve as data sources
  7. 7. PROPS AND STATE
  8. 8. REACT.JS COMPONENT LIFECYCLE METHODS http://react.tips/
  9. 9. FLUX http://bit.ly/flux-doc
  10. 10. FLUX http://bit.ly/flux-evolution
  11. 11. FLUX ALTERNATIVES http://redux.js.org/ http://alt.js.org/ https://github.com/reflux/refluxjs https://optimizely.github.io/nuclear-js/ http://acdlite.github.io/flummox http://fluxxor.com/ https://fluxthis.io/#/ http://martyjs.org/ http://fluxible.io/ http://omniscientjs.github.io/ https://github.com/kenwheeler/mcfly http://deloreanjs.com/ https://github.com/LeanKit-Labs/lux.js https://github.com/glenjamin/fluctuations https://github.com/rpominov/fluce https://github.com/jmreidy/fluxy
  12. 12. (FLUX) ALTERNATIVES VOL. 2 http://bit.ly/react-frp http://bit.ly/react-vis
  13. 13. IMMUTABLE DATA AND SHOULDCOMPONENTUPDATE() http://bit.ly/react-per NORMALIZING NESTED JSON http://bit.ly/normalizr
  14. 14. INTEGRATION WITH OTHER LIBS
  15. 15. INTEGRATION WITH OTHER LIBS http://bit.ly/imm-diff
  16. 16. ES6
  17. 17. ES6 ‣ http://reactjsnews.com/composing-components/ ‣ https://babeljs.io/blog/2015/06/07/react-on-es6-plus
  18. 18. TOOLS ‣ https://github.com/facebook/react/wiki/Complementary-Tools ‣ https://github.com/facebook/react-devtools
  19. 19. TESTING ‣ Mocha, Chai, Sinon ‣ ReactTestUtils & Enzyme ‣ JsDom vs Shallow rendering
  20. 20. THANK YOU @Andrej_Gajdos http://andrejgajdos.com/

×