React.js a crash course Jake Zimmerman January 29th, 2016 Key - PowerPoint PPT Presentation

React.js a crash course Jake Zimmerman January 29th, 2016

Key Features of React.js Easily express user Abstracts the Data flows are interfaces browser's DOM predictable Richly express the visual Write your UI modularly up Control the flow to control elements of a design, as well front, then render it down to the logic as the interactions users can the platform you’re using Flow is always one- take on them Render to the browser DOM, directional to avoid difficult Makes for better an HTML string (server- to debug “magic” maintainability side!), or to native libraries (React Native)

JSX Syntax (two links)

JSX Syntax It’s (basically) just HTML Define and nest Embed JavaScript custom components expressions var MyComponent = React.createClass({ var App = React.createClass({ var MyComponent = React.createClass({ render: function() { render: function() { render: function() { return ( return ( return ( <div> <div> <div> <h3>Hello, world!</h3> <Heading /> <p>React is {this.props.adv} <p>React is quite cool.</p> <MyComponent /> cool.</p> </div> <Footer /> </div> ); </div> ); } ); } }); } }); }); ... <MyComponent adj="remarkably" /> ...

JSX Syntax -- Gotcha! Always one node Need to use self- className == class, returned from render closing tags htmlFor == for var MyComponent = React.createClass({ var MyComponent = React.createClass({ var MyComponent = React.createClass({ render: function() { render: function() { render: function() { return ( return ( return ( <h3>Hello, world!</h3> <div> <div> <p>React is quite cool.</p> <h3>Hello, world!</h3> <h3 class="title"> ); <hr> Hello, world! } <p>React is quite cool.</p> </h3> }); </div> </div> ); ); } } }); }); INCORRECT: INCORRECT: INCORRECT: two nodes returned from render hr takes no children (make self- class should be className closing) <hr /> <h3 className="title">

Component Specs and Lifecycle (link)

this.props & this.state this.props this.state var Contact = React.createClass({ var MyComponent = React.createClass({ render: function() { getInitialState: function() { return ( return {enabled: false}; <div> }, <Header active="contact" /> componentDidMount: function() { <MyComponent var data = asyncLoadData(); adj="amazingly" /> this.setState(enabled: data.enabled); <Footer }, date={today} author="@jez" /> render: function() { </div> if (this.state.enabled) { ); return <h3>Hello, world!</h3>; } } }); else { return <h3>Goodbye, world D:</h3>; } }, });

this.props & this.state this.props this.state Used for initializing a component Used for determining when to re-render a component. this.props is never mutated; don’t try to overwrite anything in this.props this.state is also never mutated, but only for technical reasons. Use this.setState() to mutate the state.

Some important lifecycle methods render getInitialState, componentDidMount propTypes Should be a “pure function of Useful to populate your data props and state” asynchronously after we’ve Useful for initialization and shown something to the user. handling edge cases. Basically, as long as you aren’ t trying to interact with Reminiscent of how most One note: don’t copy props to global variables or the DOM apps load some UI elements, state if you don’t need to. you’re fine. and the data shows up later. Lets React only re-render when needed.

Example: ⌘ + Queue (link)

From Design Mock to Implementation motivating idea: small, reusable components (actual) <QueueItem /> ... <Queue> <QueueItem ... action="check-off" /> </Queue>

Fetch the data // Uses jQuery.get to handle AJAX calls componentDidMount: function() { return $.get("/api/queues/" + this.props.params.key, (queue) => this.setState(queue)); } // this.setState() will notify React to re-render // Also, note how this encourages a clear separation // of concerns: your backend is just returning JSON, // your frontend takes the JSON and manipulates it.

Dive right in! The React In practice, sometimes Check these things out documentation (both by the hardest thing to get later: Facebook and by the working with React is the Flux ● community) is amazing: compilation. ReactDOMServer ● Facebook’s tutorial References: React Native ● ● Another great React ● Getting Started ● tutorial gulpfile.js ●