ReactJS

Jason Brown

Front End Dev

@

Mirador Financial


Twitter: @browniefed

Github: @browniefed

Email: browniefed@gmail.com

What is React

  • The V in MVC
  • And also the C if you want
  • M? We have Objects and Arrays in JavaScript.
  • A highly efficient diffing algorithm of a virtual tree that just happens to create HTML DOM in the browser
var HelloMessage = React.createClass({
  render: function() {
    return (
            <div>
                Hello {this.props.name}
            </div>
           );
  }
});

React.render(<HelloMessage name="John" />, mountNode);
var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

<div>
    Hello John
</div>
var HelloMessage = React.createClass({
  render: function() {
    return (
            <div>
                Hello {this.props.name}
            </div>
           );
  }
});

React.render(<HelloMessage name="John" />, document.body);
React.render(<HelloMessage name="Jason" />, document.body);
<div>
    Hello John
</div>
<div>
    Hello Jason
</div>
div.textContent = "Hello Jason"

Diffing?

Angular/Ember

  • A/E – Very opinionated
  • A/E – Good luck with third party plugins
  • A – Directives… yikes
  • E – ember-cli seems pretty cool
  • A/E – Server side rendering? Nope

React Let Downs

  • Complex Animations
  • 3rd Party Plugins + Events
  • Documentation? State vs Props? How to build large applications

React Shining Moments

  • Performance
  • Testing
  • Re-using DOM for easier intelligent animations
  • Composability
  • Declarative 
  • Integration with other libraries/frameworks
  • Debugging
  • Performance tooling
  • ... I could keep going

Composability

<App>
    <Header>
        <Nav />
    </Header>
    <Content>
        <Post>
            <PostContent id="1"/>
            <PostComments id="1"/>
        </Post>
    </Content>
</App>

Declarative

{
    handleClick: function() {

    },
    render: function() {
        return (
            <button onClick={this.handleClick}>Save...</button>
        )
    }
}

Reusing DOM + Intelligent Error Messages

var people = [
    { id: 1, name: 'Pete Hunt' },
    { id: 2, name: 'Ryan Florence'},
    { id: 3, name: 'Christopher Chedeau'}
];


{

    getPeople: function() {
        return people.map(function(person) {
            return (
                <li>{person.name}</li>
            )
        });
    },

    render: function() {
        
        return (
            <ul>
                {this.getPeople()}
            </ul>
        )
    }

}
Each child in an array should have a unique "key" prop. Check the render method of HelloMessage. 
See http://fb.me/react-warning-keys for more information.

Reusing DOM + Intelligent Error Messages

var people = [
    { id: 1, name: 'Pete Hunt' },
    { id: 2, name: 'Ryan Florence'},
    { id: 3, name: 'Christopher Chedeau'}
];


{

    getPeople: function() {
        return people.map(function(person) {
            return (
                <li key={person.id}>{person.name}</li>
            )
        });
    },

    render: function() {
        
        return (
            <ul>
                {this.getPeople()}
            </ul>
        )
    }

}

So it's not a framework?

  • Routing: react-router
  • Native Apps: React Native
  • Architectures:
  • Flux -> Redux (https://github.com/voronianski/flux-comparison)
  • Relay + GraphQL -> From Facebook
  • Build System: Webpack
  • Data/Models: Immutable.JS

Don't use it all the time

  • Angular/Ember/React
  • Basic websites? Maybe
  • Wordpress? Maybe
  • Small/Large apps? Of course
  • Need flexibility? Yep
  • Transitioning legacy apps to something modern? Definitely
  • For Fun? Hell yeah

Questions?/Contact

browniefed@gmail.com

@browniefed – Twitter

http://github.com/browniefed

Coffee? Beer?

http://www.meetup.com/Portland-ReactJS/

ReactJS

By Jason Brown

Made with Slides.com

ReactJS

  • 493

More from Jason Brown