This document provides an overview of how to use React.js, including descriptions of key React concepts like the virtual DOM, JSX syntax, props and state, presentational and container components, React component lifecycle methods, and Flux architecture. It also discusses related topics like ES6, integration with other libraries, tools for React development, and testing React components.

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/