React JS – khan4019.github.io/react – React for Beginners
React JS
khan4019.github.io/react
www.thatjsdude.com
React for Beginners
JS is always hot
- 2007: JQuery is so hot
- 2012: Backbone is so hot
- 2014: Angular is so hot
- 2015: React is so hot
Why React?
- Fast
- Pluggable
- Component oriented
- Virtual DOM
- JSX
- Isomorphic Rendering
- Unidirectional Flow
- Developer tool
React proponents would tell you that forcing yourself to separate HTML and JS (presentation and logic) is more of a separation of technologies rather than concerns. If you think in a React way, the concerns of the application will be small composeable components. Each of these components does a specific thing, and from this is where the real separation of concerns comes.
Virutal DOM
Imagine you had an object that you modeled around a person. It had every relevant property a person could possibly have, and mirrored the persons current state. This is basically what React does with the DOM. Now think about if you took that object and made some changes. Added a mustache, some sweet biceps and Steve Buscemi eyes. In React-land, when we apply these changes, two things take place. First, React runs a “diffing” algorithm, which identifies what has changed. The second step is reconciliation, where it updates the DOM with the results of diff. The way React works, rather than taking the real person and rebuilding them from the ground up, it would only change the face and the arms. This means that if you had text in an input and a render took place, as long as the input’s parent node wasn’t scheduled for reconciliation, the text would stay undisturbed.
Virtual DOM
- Compare DOM's current state to desired new state
- Update the DOM in the most efficient way
- Synthetic Events
- Isomorphic Support
- React Native
JSX
- "HTML" in JavaScript
- Differences: className, htmlFor
- Compiles to JavaScript
- Inline style can be good
- Optional
Why JSX
- Angular, Ember, knockout uses "JS" in HTML
- <div ng-repeat ="user in users">
- {{#each user in users}}
- HTML doesn't tell typo in HTML
- JS will throws error in the line it happens
What is React
- Only view
- Evolving ecosystem
- Component tells how it will look like
- Render on server
You absolutely cannot build a fully functional dynamic application with React alone
React gives you a template language and some function hooks to essentially render HTML. That's all React outputs, HTML. Your bundles of HTML / Javascript, called "components", are allowed things like storing their own internal state in memory (such as which tab is selected in a tab view), but in the end you just barf out HTML.
Let's Check it out
One step at a time
- First step - absolute beginners
- Second step - small app
- Third step - grid and charts
- Fourth step - large app
Try it out
Recap
React cheat sheetReact Top Level API
React.Component //es6 classes only React.createClass React.createElement React.cloneElement React.isValidElement React.DOM //JSX alternative React.propTypes React.ChildrenReact Top level API
ReactDOM top level API
ReactDOM.render(<Component />, domnode, [callback]) // 0.14+ ReactDOM.unmountComponentAtNode(domnode) // 0.14+ ReactDOM.findDOMNode(c) // 0.14+ ReactDOMServer.renderToString(<Component />) // 0.14+ ReactDOMServer.renderToStaticMarkup(<Component />) // 0.14+another react cheat sheet
Life cycle methods
AJAX
React.createClass({
componentWillMount: function () {
$.get(this.props.url, function (data) {
this.setState(data);
}.bind(this));
},
render: function () {...}
});
4 ways for React AJAX call
Life of a Developer
Large Application
React Grid Libraries
Charts
react-d3 react-d3 example react-nvd3 Rumble Chart Live EditReact Router
- Complete routing library
- Simple api
- Lazy loading
- Dynamic route matching
- Location transition handling
React CSS Framework
Manage State
Redux
Components are given callback functions as props, which they call when a UI event happens
Those callbacks create and dispatch actions based on the event
Reducers process the actions, computing the new state
The new state of the whole application goes into a single store.
Components receive the new state as props and re-render themselves where needed.
Redux
- Single source of truth
- State is read-only
- Change are made pure functional
- Explain redux2.html
Starter kit
Google React Starter Kit cortex deeply nested data storeDebug
React Dev tool
- Color coded Tree view
- Search
- Change state props
Unit Test
Need more?
Free tip
Hotel Room
- body lotion as shoe shiner
- hair conditioner as shaving cream
- hair dryer to dry wet shocks