What's so practical about this presentation?

No JSX

No ES6

No 3rd party libraries

No Flux

No State

Everything is runnable anywhere

A few React functions of note

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

React.DOM.*

React.createElement('h1', {className:'red'}, 'Hello OSN!');

React.DOM.h1({className:'red'}, 'Hello OSN!');

<h1 class='red'>Hello OSN!</h1>

React.createClass

ReactClass createClass(object specification)

var headerClass = React.createClass({
    render: function(){
        return React.createElement('h1', {className:'red'}, 'Hello OSN!');
    }
});

React.createElement(headerClass, null);

<h1 class='red'>Hello OSN!</h1>

React.render

ReactComponent render(
  ReactElement element,
  DOMElement container,
  [function callback]
)

React.render(
    React.createElement(headerClass, null), 
    document.getElementById('react-container')
);

<div id='react-container'>
    <h1 class='red'>Hello OSN!</h1>
</div>

Ruby's guide to getting started with React

Don't worry about React!

Take a look at the data and build the html and css

Start building your components

React.createClass

Layer in the props with static data

React.render((yourComponent, props), dom node)

Add interactivity

Plug in your real data feed

Putting the guide to work

swatch detail viewer

What's so practical about React?

Workflow

View Only

Contained

Simple API

One Way Data Flow

Excellent Debugging

No Dependencies

What can make React a little confusing?

props vs. state

smart vs. dumb components

Asynchronous data can be confusing 

Controlled forms can be tricky

Flux

Ancillary library choices can be overwhelming 

No set way