Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tech Nottingham: Introduction to React

Tech Nottingham: Introduction to React

Jack Franklin

April 04, 2016
Tweet

More Decks by Jack Franklin

Other Decks in Technology

Transcript

  1. // Input (JSX): var app = <Nav color="blue" />; //

    Output (JS): var app = React.createElement( Nav, { color: "blue" } );
  2. var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;

    } }) ReactDOM.render( <HelloWorld />, document.getElementById('app') )
  3. var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;

    } }) ReactDOM.render( <HelloWorld />, document.getElementById('app') )
  4. var HelloWorld = React.createClass({ render: function() { return <h1>Hello World!</h1>;

    } }) ReactDOM.render( <HelloWorld />, document.getElementById('app') )
  5. var Person = React.createClass({ render: function() { return ( <div>

    <h2>Name: { this.props.name }</ h2> <p>Favourite colour: { this.props.colour }</p> </div> ); } });
  6. var OnOff = React.createClass({ getInitialState: function() { return { on:

    false } }, render: function() { return ( <div> <button>Toggle</button> <p>{ this.state.on ? 'ON' : 'OFF'}</p> </div> ) } })
  7. var OnOff = React.createClass({ getInitialState: function() { return { on:

    false } }, render: function() { return ( <div> <button>Toggle</button> <p>{ this.state.on ? 'ON' : 'OFF'}</p> </div> ) } })
  8. var OnOff = React.createClass({ ... render: function() { return (

    <div> <button onClick={this.toggle}> Toggle </button> </div> ) } })
  9. var Mailbox = React.createClass({ getInitialState: function() { return { messages:

    [{ id: 1, title: 'Hello', content: 'How is it going?', sender: 'Alice' }, {…}] } },
  10. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  11. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  12. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  13. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  14. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  15. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  16. var messages = this.state.messages; var mails = messages.map(function(message) { return

    ( <li key={message.id}> <Message message={message} /> </li> ); }) return <ul>{mails}</ul>;
  17. var Message = React.createClass({ render() { return ( <h4> {

    this.props.message.title } </h4> ); } });
  18. var Person = React.createClass({ render() { return <p>{this.props.name} has a

    favourite colour of {this.props.colour} </p> } }) ReactDOM.render( <Person name="jack" colour="blue" />, document.body )
  19. var types = React.PropTypes; var Person = React.createClass({ propTypes: {

    name: types.string.isRequired, colour: types.string.isRequired },
  20. var types = React.PropTypes; var Person = React.createClass({ propTypes: {

    name: types.string.isRequired, colour: types.string.isRequired },
  21. var types = React.PropTypes; var Person = React.createClass({ propTypes: {

    name: types.string.isRequired, colour: types.string.isRequired },
  22. var GitHubPerson = React.createClass({ getInitialState: function() { return { data:

    {} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
  23. var GitHubPerson = React.createClass({ getInitialState: function() { return { data:

    {} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
  24. var GitHubPerson = React.createClass({ getInitialState: function() { return { data:

    {} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
  25. var GitHubPerson = React.createClass({ getInitialState: function() { return { data:

    {} }; }, componentWillMount: function() { getData().then(function(data) { this.setState({ data: data }) }.bind(this)); },
  26. As the requirements for JavaScript single-page applications have become increasingly

    complicated, our code must manage more state than ever before
  27. One of the best (and overlooked) things about React is

    how much code you write that's just plain old JavaScript.