Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HOW TO USE REACT.JS
@Andrej_Gajdos
http://andrejgajdos.com/
WEBtlak*
http://bit.ly/trends-js
Reddit–pageviews
0
40 000
80 000
120 000
160 000
February March April May June July August Septemb...
‣ Virtual DOM
‣ JSX
WHAT. IS THAT?
/** @jsx React.DOM */
var HelloWorld = React.createClass({
render: function() {
return ...
React
var CatImg = React.createClass({
render: function() {
var imgsrc =
“catimg.com/” + this.props.name;
return <img src=...
http://bit.ly/props-vs-state
‣ http://bit.ly/interactive-ui
PROPS AND STATE
PRESENTATIONAL AND CONTAINER COMPONENTS
http://bit.ly/components-sep
Presentational components
‣ Are concerned with how th...
PROPS AND STATE
REACT.JS COMPONENT LIFECYCLE METHODS
http://react.tips/
FLUX
http://bit.ly/flux-doc
FLUX
http://bit.ly/flux-evolution
FLUX ALTERNATIVES
http://redux.js.org/
http://alt.js.org/
https://github.com/reflux/refluxjs
https://optimizely.github.io/nu...
(FLUX) ALTERNATIVES VOL. 2
http://bit.ly/react-frp
http://bit.ly/react-vis
IMMUTABLE DATA AND SHOULDCOMPONENTUPDATE()
http://bit.ly/react-per
NORMALIZING NESTED JSON
http://bit.ly/normalizr
INTEGRATION WITH OTHER LIBS
INTEGRATION WITH OTHER LIBS
http://bit.ly/imm-diff
ES6
ES6
‣ http://reactjsnews.com/composing-components/
‣ https://babeljs.io/blog/2015/06/07/react-on-es6-plus
TOOLS
‣ https://github.com/facebook/react/wiki/Complementary-Tools
‣ https://github.com/facebook/react-devtools
TESTING
‣ Mocha, Chai, Sinon
‣ ReactTestUtils & Enzyme
‣ JsDom vs Shallow rendering
THANK YOU
@Andrej_Gajdos
http://andrejgajdos.com/
Upcoming SlideShare
Loading in …5
×

How to use React.js

Presentation about React.js, Flux pattern, ES6 and related libraries.

  • Be the first to comment

  • Be the first to like this

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/

×