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

1. HOW TO USE REACT.JS
@Andrej_Gajdos
http://andrejgajdos.com/
WEBtlak*

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. ‣ 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. 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. http://bit.ly/props-vs-state
‣ http://bit.ly/interactive-ui
PROPS AND STATE

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. PROPS AND STATE

8. REACT.JS COMPONENT LIFECYCLE METHODS
http://react.tips/

9. FLUX
http://bit.ly/flux-doc

10. FLUX
http://bit.ly/flux-evolution

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. (FLUX) ALTERNATIVES VOL. 2
http://bit.ly/react-frp
http://bit.ly/react-vis

13. IMMUTABLE DATA AND SHOULDCOMPONENTUPDATE()
http://bit.ly/react-per
NORMALIZING NESTED JSON
http://bit.ly/normalizr

14. INTEGRATION WITH OTHER LIBS

15. INTEGRATION WITH OTHER LIBS
http://bit.ly/imm-diff

16. ES6

17. ES6
‣ http://reactjsnews.com/composing-components/
‣ https://babeljs.io/blog/2015/06/07/react-on-es6-plus

18. TOOLS
‣ https://github.com/facebook/react/wiki/Complementary-Tools
‣ https://github.com/facebook/react-devtools

19. TESTING
‣ Mocha, Chai, Sinon
‣ ReactTestUtils & Enzyme
‣ JsDom vs Shallow rendering

20. THANK YOU
@Andrej_Gajdos
http://andrejgajdos.com/