An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy:...
22
An Introduction to React.js BEN BYRNE @DRYWALL
Transcript of An Introduction to React - 2016 WordCamp Dayton€¦ · WordPress + React • Speed/immediacy:...
An Introduction to React.js
BEN BYRNE @DRYWALL
An Introduction to React.jsBEN BYRNE CORNERSHOP CREATIVE
2
What is React.js?AND WHAT ISN’T IT?
3
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
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
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
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
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
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
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
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'));
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
Components 13
IN DIAGRAM FORM!
HTML document
CSS file(s)
JS JSJS
Components 14
IN DIAGRAM FORM!
HTML
CSS
JS JSJS
HTML
CSS
HTML
CSS
Component Component Component
15
Hello WorldWHERE ELSE WOULD WE START?
16
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>
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’) );
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);
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;
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
Thank You
22
