React Intro

What is React? What for? How to use it? This intro explains the basics of this JS library.

Transcript

1. React Alexis Ferrada Sebastián Vicencio
2. React what? • JavaScript library for creating user interfaces • Think of React as the V in MVC • Build large applications with data that changes over time
3. Why React? • To build composable user interfaces • Think UI as components • Components can be composed of more components as well
4. Why React? Source: https://facebook.github.io/react
5. Why React? Source: https://facebook.github.io/react
6. How to React? • Traditional JavaScript application: check what data changed and modify DOM • React approach is different: break UI into components
7. React Components Two main parts: 1. props 2. state Functions that take some input and render HTML
8. How to React? Each component has a render method, which generates a lightweight representation of your view, known as Virtual DOM
9. Virtual (React) DOM • Lightweight description of what the DOM should look like • Neither a string nor a DOM node
10. How to React? 1. render method called initially 2. Virtual DOM node generated 3. String of markup produced, and injected into the document (real DOM) 4. When your data changes, the render method is called again
11. React Reconciliation • React does not manipulate the DOM unless it needs to • Diff between the previous call to render and the new one • A minimal set of changes is generated to be applied to the (real) DOM
12. JSX • JSX is a JavaScript syntax extension that looks similar to XML • JSX not mandatory. Plain JS can be used • Recommendation: use JSX because it is a concise and familiar syntax for defining tree structures with attributes
13. JSX var HelloMessage = React.createClass({ render: function() { return ( <div className="commentBox"> <span>Hello, world!</span> I am a {this.props.name} </div> ); } }); ReactDOM.render( <HelloMessage name="comment"/>, document.getElementById(“content”) );
14. "use strict"; var HelloMessage = React.createClass({ displayName: "HelloMessage", render: function render() { return React.createElement( "div", { className: "commentBox" }, React.createElement( "span", null, "Hello, world!" ), "I am a ", this.props.name ); } }); ReactDOM.render(React.createElement(HelloMessage, { name: "comment" }), document.getElementById(“content”)); JSX
15. Configuration 1. React scripts: React core & React DOM 2. Babel script 3. Scripts written in JSX need to be marked as type=“text/babel”
16. Rails Integration • Gem react-rails • Components folder and JSX file extension required • react_component view helper to render components directly inside the views
17. Pros • Suitable for SPAs with high data change rate • Simplifies DOM handling
18. Cons • Not (too) easy learning curve (components approach, JSX syntax) • JavaScript components vs plain HTML (designers need to be comfortable with this)
19. Final thoughts • React components can be used in almost every web application • Integrate React in small parts to perceive its value
20. Thanks