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/