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 Top Level API

React.Component //es6 classes only


React.createClass


React.createElement
React.cloneElement

React.isValidElement

React.DOM //JSX alternative
React.propTypes
React.Children
							

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+
							

Life cycle methods

componentWillMount
componentDidMount


componentWillUpdate
componentDidUpdate


componentWillRecieveProps
shouldComponentUpdate


• compnentWillUnmount

AJAX

React.createClass({
    componentWillMount: function () {

    	$.get(this.props.url, function (data) {
      		this.setState(data);
    	}.bind(this));
   },

  render: function () {...}
});
						

Life of a Developer

Large Application

React Grid Libraries

• griddle
• react-datagrid

Charts

React Router

• Complete routing library
• Simple api
• Lazy loading
• Dynamic route matching
• Location transition handling

React CSS Framework

• React Bootstrap
• React Material Design
• React Material Component
• Element UI
• 15 React CSS Framework

Manage State

Redux

Redux

• Single source of truth


• State is read-only


• Change are made pure functional


• Explain redux2.html

Starter kit

Debug

React Dev tool

• Color coded Tree view
• Search
• Change state props

Unit Test

• Jest
• React TDD

Need more?

• 9 things React beginners should know
• react best practice
• React Hot Reloader
• react performance

Free tip

Hotel Room

• body lotion as shoe shiner
• hair conditioner as shaving cream
• hair dryer to dry wet shocks