How to use React.js

HOW TO USE REACT.JS

@Andrej_Gajdos

http://andrejgajdos.com/

WEBtlak*

http://bit.ly/trends-js

Redd

it –

page

view

s

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

‣ 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

Reactvar 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

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 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

PROPS AND STATE

REACT.JS COMPONENT LIFECYCLE METHODS

http://react.tips/

FLUX

http://bit.ly/flux-doc

FLUX

http://bit.ly/flux-evolution

FLUX ALTERNATIVEShttp://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

(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 JSONhttp://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/