View Slide
@Jack_Franklin
The ideas in React aremore important than Reactitself
Components
HeaderNews FeedNavChatwithAlice
React Components
var HelloWorld = React.createClass({render: function() {return Hello World!;}})
return Hello World!;
JSXhttps://facebook.github.io/react/docs/jsx-in-depth.html
This is a good thing,trust me…
It’s not HTML in yourJavaScript
It’s JavaScript in yourJavaScript
// Input (JSX):var app = ;// Output (JS):var app = React.createElement(Nav,{ color: "blue" });
var HelloWorld = React.createClass({render: function() {return Hello World!;}})ReactDOM.render(,document.getElementById('app'))
https://jsbin.com/fujaru/edit?html,js,output
props
var Person = React.createClass({render: function() {return (Name: { this.props.name }h2>Favourite colour:{ this.props.colour });}});
ReactDOM.render(,document.body)
https://jsbin.com/wulolu/edit?js,output
props: data thecomponent doesn’tchange
state
var OnOff = React.createClass({getInitialState: function() {return { on: false }},render: function() {return (Toggle{ this.state.on ? 'ON' :'OFF'})}})
var OnOff = React.createClass({...render: function() {return (Toggle)}})
var OnOff = React.createClass({...toggle: function() {this.setState({on: !this.state.on})},…})
http://jsbin.com/senedajafa/edit?js,output
state: data the componentowns and will change
use props by default
virtual domhttps://facebook.github.io/react/docs/reconciliation.html
components incomponents
var Mailbox = React.createClass({getInitialState: function() {return {messages: [{id: 1,title: 'Hello',content: 'How is it going?',sender: 'Alice'}, {…}]}},
render: function() {}
var messages = this.state.messages;var mails =messages.map(function(message) {return ();})return {mails};
var Message = React.createClass({render() {return ({ this.props.message.title });}});
http://jsbin.com/jagizaheqo/edit?js,output
reusable components
var Person = React.createClass({render() {return {this.props.name} has afavourite colour of {this.props.colour}}})ReactDOM.render(,document.body)
propTypes
var types = React.PropTypes;var Person = React.createClass({propTypes: {name: types.string.isRequired,colour: types.string.isRequired},
http://jsbin.com/wawevinesi/edit?js,output
encourage reuseuse propTypes
lifecycle
https://docs.google.com/drawings/d/15yjhlRlNs2k8rDw1g_F9_nYWUL0FsUDCFzAxMOGv5nI/edit
https://facebook.github.io/react/docs/component-specs.html
componentWillMount
var GitHubPerson = React.createClass({getInitialState: function() {return { data: {} };},componentWillMount: function() {getData().then(function(data) {this.setState({ data: data })}.bind(this));},
render: function() {return ({this.state.data.name} from{ this.state.data.company });}
http://jsbin.com/nalozobapa/edit?js,output
https://facebook.github.io/react/docs/thinking-in-react.html
Large applications
http://redux.js.org/
http://redux.js.org/docs/introduction/Motivation.html
As the requirements for JavaScriptsingle-page applications have becomeincreasingly complicated, our code mustmanage more state than ever before
STATE
STATESTORE
STATESTOREUni-directional data flow
URLs
https://github.com/rackt/react-router
One of the best (and overlooked)things about React is how muchcode you write that's just plain oldJavaScript.
https://facebook.github.io/react/
Questions?
jackfranklin/react-introduction-exercises
10th of June, LondonReact Workshophttp://www.whiteoctoberevents.co.uk/event/reactjs-workshop-june-16/
@Jack_Franklin[email protected]javascriptplayground.com