React Hands One

React Hands On organised by Seedstars SA @Porto IO

Transcript

1. * * * * * * * * * Launching ideas, growing startups & building companies
2. - Facebook and Instagram are behind its development - Focused on building interfaces - Everything is a component - Virtual DOM - lightweight rendering based on differences of state of the component - JSX harmony syntax React var HelloMessage = React.createClass({ render: function () { return <div> Hello {this.props.name} </div>; }; }); React.render(<HelloMessage name=”John” />, mountNode);
3. - Complements React by providing logic to React components - unidirectional data flow - Several implementations - Reflux - Fluxxor - Alt Flux Action Action Dispatcher Store View
4. - Simplifies Flux architecture - Dispatcher removed - Stores listen to actions Reflux Action Store View - Well documented and with good support - Most starred Flux re-implementation in GitHub
5. - js/ - actions/ - stores/ - components/ - app.jsx - css/ - index.html React/Reflux Project Structure
6. React is just a small part of the stack. To build a full front end application we use: React and supporting stack Node.js is a cross-platform runtime environment for applications written in JavaScript. Gulp is a fast and intuitive streaming build tool built on Node.js. Browserify lets you require('modules') in the browser by bundling up all of your dependencies. npm is the package manager for nodejs Bower is a package management system for client-side programming. Sass (Syntactically Awesome Stylesheets) is a stylesheet language.
7. “Thinking in React” encourages us to start with a mockup of the UI, and break it down into a component hierarchy. Based on this diagram, the component hierarchy for the Employee Directory app looks like this: - App - HomePage - Header - SearchBar - EmployeeList - EmployeeListItem - EmployeePage - Header - EmployeeDetails Thinking in React
8. In this first version, we create and render the HomePage component with some hardcoded (static) sample data. Iteration 1: Static Version Highlights Result How to run $ cd /home/seedstars/react/1.Initial $ npm install $ ./node_modules/gulp/bin/gulp.js
9. In this second version, we define an array of employees in the HomePage component, and we make the data flow down the component hierarchy to EmployeeList and EmployeeListItem. Iteration 2: Data Flow Highlights var employees = [ {firstName: 'Christophe', lastName: 'Coenraets'}, {firstName: 'Lisa', lastName: 'Jones'}, {firstName: 'John', lastName: 'Smith'} ]; return ( <div> <Header text="Employee Directory"/> <SearchBar /> <EmployeeList employees={employees}/> </div> ); Update render homepage render: function () { var items = this.props.employees.map(function (employee) { return ( <EmployeeListItem key={employee.id} employee={employee} /> ); }); return ( <ul> {items} </ul> ); } Update EmployeeList var EmployeeListItem = React.createClass({ render: function () { return ( <li> <a href={"#employees/" + this.props.employee.id}> {this.props.employee.firstName} {this.props. employee.lastName} </a> </li> ); } }); Create EmployeeListItem
10. In the previous version, the data flew down the component hierarchy from HomePage to EmployeeListItem. In this version, we make data (the search key to be specific) flow upstream, from the SearchBar to the HomePage where it is used to find the corresponding employees. Iteration 3: Inverse Data Flow Highlights Update homepage var HomePage = React.createClass({ searchHandler:function(key) { alert('Search key: ' + key); }, <SearchBar searchHandler={this.searchHandler}/> var SearchBar = React.createClass({ getInitialState: function() { return {searchKey: ""}; }, searchHandler: function(event) { var searchKey = event.target.value; this.setState({searchKey: searchKey}); this.props.searchHandler(searchKey); }, render: function () { return ( <input type="search" value={this.state.symbol} onChange={this.searchHandler}/> ); } }); Update SearchBar
11. In this version, we implement employee search using an async service. In this sample app, we use a mock in-memory service (defined in data.js) that uses promises so you can easily replace the implementation with Ajax calls. We keep track of the search key and the list of employees in the HomePage state. Iteration 4: Async Data and State Highlights Update homepage var HomePage = React.createClass({ getInitialState: function() { return {employees: []} }, searchHandler:function(key) { this.props.service.findByName(key).done(function(result) { this.setState({searchKey: key, employees: result}); }.bind(this)); }, render: function () { return ( <div> <Header text="Employee Directory"/> <SearchBar searchHandler={this.searchHandler}/> <EmployeeList employees={this.state.employees}/> </div> ); } }); React.render( <HomePage service={employeeService}/>, Add helper var employeeService = require('./data.jsx');
12. In this version, we add an employee details page. Because the application now has more than one view, we add support for react-router. Iteration 5: Routing A Highlights Create new page var EmployeePage = React.createClass({ getInitialState: function() { return {employee: {}}; }, componentDidMount: function() { console.log(this.props.params.employeeId); this.props.service.findById(this.props.params.employeeId).done(function(result) { this.setState({employee: result}); }.bind(this)); }, render: function () { return ( <div> <Header text="Employee Details"/> <h3>{this.state.employee.firstName} {this.state.employee.lastName}</h3> {this.state.employee.title} </div> ); } });
13. Iteration 5: Routing B Configure React Router var App = React.createClass({ render: function () { return ( <RouteHandler { ...this.props } service={employeeService} /> ) } }); var routes = ( <Route handler={ App }> <DefaultRoute handler={ HomePage }/> <Route name="home" path="/home" handler={ HomePage }/> <Route name="employee" path="/employees/:employeeId" handler={ EmployeePage }/> </Route> ); Router.run(routes, function (Handler, state) { React.render(<Handler params={ state.params }/>, document.getElementById('root')); }); var Router = require('react-router'); var RouteHandler = Router.RouteHandler; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; Imports
14. Iteration 6: Styling Time to make the app look good. In this version, we use the Ratchet CSS library to provide the app with a mobile skin. Highlights $ cd /home/seedstars/react/2.Design $ npm install $ ./node_modules/gulp/bin/gulp.js bower $ ./node_modules/gulp/bin/gulp.js How to run
15. You’ll notice that when you navigate back to HomePage from EmployeePage, HomePage has lost its state (search key and employee list). In this version, we fix this problem and make sure the state is preserved. Iteration 7: Maintaining State A Highlights Update homepage var HomePage = React.createClass({ render: function () { return ( <div> <Header text="Employee Directory" back="false"/> <SearchBar searchKey={this.props.searchKey} searchHandler={this.props.searchHandler}/> <div className="content"> <EmployeeList employees={this.props.employees}/> </div> </div> ); } });
16. Iteration 7: Maintaining State B Update searchBar var SearchBar = React.createClass({ getInitialState: function() { return {searchKey: this.props.searchKey}; }, searchHandler: function(event) { var searchKey = event.target.value; this.setState({searchKey: searchKey}); this.props.searchHandler(searchKey); }, render: function () { return ( <div className="bar bar-standard bar-header-secondary"> <input type="search" value={this.state.searchKey} onChange={this.searchHandler}/> </div> ); } });
17. Iteration 7: Maintaining State C Update App var App = React.createClass({ getInitialState: function() { return { searchKey: '', employees: [] } }, searchHandler: function(searchKey) { employeeService.findByName(searchKey).done(function(employees) { this.setState({searchKey:searchKey, employees: employees}); }.bind(this)); }, render: function () { return ( <RouteHandler { ...this.props } service={employeeService} searchKey={this.state.searchKey} searchHandler= {this.searchHandler} employees={this.state.employees} /> ) } });
18. - Huge thanks to Christophe Coenraets Sample Mobile Application with React and Cordova http://coenraets.org/blog/2014/12/sample-mobile-application-with-react-and-cordova/ - Facebook React Page http://facebook.github.io/react/ - React Router - route handling https://github.com/rackt/react-router - Reflux - Flux architecture implementation https://github.com/spoike/refluxjs - gulp.js streaming build system http://gulpjs.com/ - Bower - a package manager for the web http://bower.io/ - Browserify transform for JSX (superset of JavaScript used in React library by Facebook) https://github.com/andreypopp/reactify References