Embed Size (px)
Citation preview
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
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
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/
