React

React.js - Flux - React Native

Just the UI

Use React as the V in MVC.

Virtual DOM

React abstracts away the DOM.

Simpler programming model

Better Performance

Render on the Server or with React Native

Data Flow

React implements one-way reactive data flow.

Where it's used

Obviously - Facebook & Instagram
HipChat (web client)
Yahoo Mail
Codecademy
many more...

What it looks like


  React.render(
    React.DOM.h1({}, "Hello"), 
    document.getElementById('app'));

The basics

Nesting Elements


  var App = (
    React.DOM.div({}, 
      React.DOM.h1({}, 'hello world'),
      React.DOM.ul({}, 
        React.DOM.li({}, 'List item one'),
        React.DOM.li({}, 'List item two')))
  );

  React.render(
    App, 
    document.getElementById('app'));

Writing with JSX


  React.render(
    <h1>Hello</h1>, 
    document.getElementById('app'));


  React.render(
    React.DOM.h1({}, "Hello"), 
    document.getElementById('app'));

JSX


  var App = (
    <div>
      <h1>Hello World!</h1>
      <ul>
        <li>Item one</li>
        <li>Item two</li>
      </ul>
    </div>
 );


  React.render(App, appEl);

Making Components

    
    var App = React.createClass({
        render: function() {
            return (
              <div>
                <h1>Hello World!</h1>
              </div>
            )
        }
    });



    React.render(<App />, appEl);

Let's Code

Components with Properties

Components with State

React with Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework.

Dispatcher

Dispatcher is used to broadcast payloads to registered callbacks.

Actions

Instructions passed through the Dispatcher to update the store.

Store

Data Store that emits a change event to the View

One way data flow

project...

React Native

Learn once - write everywhere

build a component


    var App = React.createClass({
      render: function() {
        return (
          <View>
            <Text>
              Welcome to React Native!
            </Text>
            <Text>
              To get started, edit index.ios.js
            </Text>
          </View>
        );
      }
    });

walkthrough...

https://facebook.github.io/react-native/docs/getting-started.html#content

Resources:

https://facebook.github.io/react/

https://facebook.github.io/react/blog/

- generator-react-gulp-browserify

- tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/

Flux

https://facebook.github.io/flux/docs/overview.html

native

http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html

http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript