What we'll cover...

• Why am I up here?
• What is React JS?
• What have I learned about React JS?
• What's good about React JS?
• What's not so good about React JS?
• Where to find more.

What we wont cover...

• Actual code... (sad face)
• Flux

What is ReactJS?

• Created by Jordan Walke at Facebook
• Open source
• Used by the following:
  • Facebook
  • Instagram
  • Imgur
  • and more! (most I haven't heard of...)
• Goals: Be simple, declarative and composable
• Only a front end solution
• Uses concept of Components.
• Virtual DOM, ES6 <3, and more!

Why am I up here?

• KCDC 2015 - Cory House
  • React with Flux: Dissecting Innovation
  • http://www.bitnative.com/
• Curious to grow and find myself a niche
• Strive to find something outside the backbone / angular world.
• Charlie kept bugging me to give one...

¯\_(ツ)_/¯

What did I learn?

• There aint much out there in terms of tutorials...
  • Most of it out of date.
  • A lot of things were just wrong...
  • Most things learned from experimentation
• Very easy to pick up.
• VERY fun to write!
• Code is written just like you visualize in your head!

The Bad...

• Component communication can be complicated.
• Tutorials / examples can be difficult to find.
• Can fall out compartmentalized mentality very easily.
• Lots and lots of classes.....
• Can be complex on very large projects.
• Reliance on 3rd party libraries for effective component communication.
• HTML IN MY JS? MADNESS

Code (I lied)

var React = require('react');
var cx = require('classnames');
var radio = require('radio');
var uuid = require('node-uuid');

var Tab = React.createClass({
    getInitialState: function() {
        var activeField = false;
        if (this.props.default) {
            activeField = true;
        }
        return {active: activeField, id: uuid.v1()};
    },
    componentDidMount: function() {
        radio('tabSelected').subscribe(this.handleShowEvent);
    },
    componentWillUnmount: function() {
        radio('tabSelected').unsubscribe(this.handleShowEvent);
    },
    handleShowEvent: function(data) {
        if (data.id != this.state.id) {
            this.setState({active: false});
        }
    },
    handleOnClick: function() {
        if (!this.state.active) {
            this.setState({active: !this.state.active});
            radio('tabSelected').broadcast({id: this.state.id, name: this.props.name});
        }
        radio('changeContents').broadcast({name: this.props.name});
    },
    render: function() {
        var classes = cx({
            'active': this.state.active
        });
        return <li className={classes}><a href="#" onClick={this.handleOnClick}>{this.props.name}</a></li>;
    }
});

module.exports = Tab;

The Good...

• Creating components is very logical!
• Very easy to set up unit tests
• Easy to debug problems
• Reuse
• State changes are simple and FAST.
• Compatible with the following:
  • Angular
  • Backbone
  • Ember
• HTML IN MY JS?! GENIUS

More Information

• Cory House - http://www.bitnative.com/
• http://www.funnyant.com/reactjs-what-is-it/
• http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

Is ReactJS For You?

• Maybe?
• For large complex solutions, you should look carefully to make sure ReactJS will fit.
• Lots of DOM changes? Consider ReactJS!
• Consider mixing ReactJS into what you have!

Next Topic:

Baby's First Component!

Questions?