![Page 1: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/1.jpg)
An Introduction to React.js
BEN BYRNE @DRYWALL
![Page 2: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/2.jpg)
An Introduction to React.jsBEN BYRNE CORNERSHOP CREATIVE
2
![Page 3: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/3.jpg)
What is React.js?AND WHAT ISN’T IT?
3
![Page 4: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/4.jpg)
React.js is…• “A JavaScript Library for Building User Interfaces”
• Built and maintained by Facebook/Instagram
• Akin to frameworks like Ember and Angular… somewhat
• Relatively small and performant
• Open source
4
![Page 5: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/5.jpg)
React.js isn’t…• A full framework like Angular
• All-inclusive: it’s just the V in MVC. So it doesn’t include:
• AJAX capabilities
• Promises, etc.
• Compatible with < IE 9
5
![Page 6: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/6.jpg)
So what’s it for?• Simplifying the process of building fast UIs
(without making assumptions about the data)
• Building applications with data that changes over time.
• Component-izing a UI
6
![Page 7: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/7.jpg)
WordPress + React• Speed/immediacy: Real-time experiences.
The admin interface is still pretty synchronous, which feels slow.
• Calypso: single-page app written driven by the WordPress.com REST API.
• Themes: Why reload entire pages when only portions are changing?
7
![Page 8: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/8.jpg)
Key Features & Concepts
• Really small API (relative to other frameworks)
• Templating language: JSX
• Performance maintained by Virtual DOM: just Render()
• Everything is organized into components
8
![Page 9: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/9.jpg)
Virtual DOM
• DOM manipulation is heavy, so React avoids it
• Virtual DOM kept in memory, differences computed
• Not something you need to think about!
9
![Page 10: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/10.jpg)
JSX• An XML-like syntax extension
to ECMAScript
• NOT intended to be implemented by engines or browsers
• Needs to be transpiled before sent to the browser with a build tool.
10
![Page 11: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/11.jpg)
JSX => JavaScript11
var HelloWorld = React.createClass({ render: function(){ return ( <div>Hello World!</div> ) } }); React.render(<HelloWorld />, document.getElementById('app'));
var HelloWorld = React.createClass({ displayName: 'HelloWorld', render: function render() { return React.createElement( ‘div', null, 'Hello World!' ); } }); React.render(React.createElement(HelloWorld, null), document.getElementById('app'));
![Page 12: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/12.jpg)
Components• The heart of React
• Building blocks of our applications
• JavaScript objects with render() methods that return the HTML of the component
• React takes care of actual rendering
12
![Page 13: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/13.jpg)
Components 13
IN DIAGRAM FORM!
HTML document
CSS file(s)
JS JSJS
![Page 14: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/14.jpg)
Components 14
IN DIAGRAM FORM!
HTML
CSS
JS JSJS
HTML
CSS
HTML
CSS
Component Component Component
![Page 15: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/15.jpg)
15
![Page 16: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/16.jpg)
Hello WorldWHERE ELSE WOULD WE START?
16
![Page 17: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/17.jpg)
17
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>React Hello World</title> <script src="https://fb.me/react-0.14.7.min.js"></script> <!-- In production, you'll want to use something like Gulp, Grunt or WebPack to compile JSX into JavaScript. --> <script src="http://www.jimsproch.com/react/babel-browser.js"></script> </head> <body> <div id="mount-point"></div> <!-- This is where you link to your React code. Note the type. --> <script src="script.jsx" type="text/babel"></script> </body> </html>
![Page 18: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/18.jpg)
18
/* Creating a component The most simple component has a `render` method that returns JSX. `props` are attributes that are passed into the component when you instantiate it. Note that `render` must return a single parent element; you can't return multiple adjacent JSX tags but must wrap them in one parent element. */
var HelloMessage = React.createClass({ render: function () { return <h1>Hello {this.props.message}!</h1>; } });
React.render( <HelloMessage message="World" />, document.getElementById(‘mount-point’) );
![Page 19: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/19.jpg)
19 var ToggleText = React.createClass({ getInitialState: function () { return { showDefault: true } },
toggle: function (e) { e.preventDefault(); // Toggle and trigger an intelligent re-render of the component. this.setState({ showDefault: !this.state.showDefault }) },
render: function () { var message = this.props.default; if (!this.state.showDefault) { message = this.props.alt; }
return ( <div> <h1>Hello {message}!</h1> <a href="" onClick={this.toggle}>Toggle</a> </div> ); } });
React.render(<ToggleText default="World" alt="Mars" />, document.body);
![Page 20: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/20.jpg)
20
const PostExcerpt = React.createClass( {
propTypes: { content: React.PropTypes.string.isRequired },
render() { if ( ! this.props.content ) { return null; }
const classes = classnames( { 'post-excerpt': true, 'is-long': ( this.props.content.length > 80 ) } );
return ( <div className={ classes } dangerouslySetInnerHTML={{ __html: this.props.content }}></div> ); } } );
export default PostExcerpt;
![Page 21: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/21.jpg)
Where to go nextWhat is React?
• http://blog.andrewray.me/reactjs-for-stupid-people
Tutorials & Docs
• http://buildwithreact.com
• https://scotch.io/tutorials/learning-react-getting-started-and-concepts
• https://facebook.github.io/react/docs
React + WordPress
• https://github.com/gcorne/wp-react-boilerplate
• https://github.com/Automattic/wp-calypso
21
![Page 22: An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy: Real-time experiences. The admin interface is still pretty synchronous, which feels](https://reader034.vdocuments.us/reader034/viewer/2022051904/5ff5cd9c4f00c95e577b6c06/html5/thumbnails/22.jpg)
Thank You
22