React + Redux + AW

Goals

Learn something new.
Feel empowered to dig into this code in our app.

Confession...

I like jQuery

Typical jQuery event handler

$( ".item" ).on( "click", doSomething );

But sometimes this gets messy...

DOM?

Document Object Model

Virtual DOM

React Components

Most basic React Component


class HelloWorld extends React.Component {
  render(){
    return (
      Hello World
    );
  }
}

// Example usage: <HelloWorld />

Why JSX?

because this is the alternative


return React.createElement(
  'p', {className: 'greeting'}, "Hello World"
);

Nasty nested 🎄 code


React.createClass({displayName: "ExampleComponent",
  render: function () {
    return (
      React.createElement("div", {className: "example"},
       React.createElement("h1", null, "Example Component"),
         React.createElement("ul", null, React.createElement("li", null, "One item"),
           React.createElement("li", null, "Another item"))
      )
    );
  }
});

JSX gotchas

You have to use className because
class is a reserved word in JS.


class HelloWorld extends React.Component {
  render() {
    return Hello World;
  }
}

You can't render adjacent elements
without wrapping them in a parent element.
This would error...


...
return (
  
    Hello
  
  
    World
  
);

You have to do something like this instead:


class Profile extends React.Component {
  render() {
    return (
      
        
        { this.props.displayName }
      
    );
  }
}

Props

Passing data from one component to another

Props are just like HTML attributes.

They pass additional information to an element.

Call child component with the prop tagline...


return (
  <Header tagline="Thank You, Come Again!" />
)

Access data in child component via this.props.tagline


class Header extends React.Component {
  ...
  render(){
    return <h2>{this.props.tagline}</h2>
  }
}

jsbin props

Events

Let's revisit that typical jQuery event handler


$( ".item" ).on( "click", doSomething );

Handling Events in React

use camelCase, rather than lowercase like you can do with HTML
With JSX you pass a function as the event handler, rather than a string.


<button onClick={activateLasers}>
  Activate Lasers
</button>

jsbin events example

State

Props are constant

Values that get passed from parent to child components.

State changes

State is an object. Any component can have state.

The way we add state to a component is
with the class constructor method.


class App extends React.Component {
  constructor() {
    super();
    // get initial state
    this.state = {
      foo: {}
    };
  }

  updateFoo(foo) {
    this.setState({
      foo: foo
    });
  }

  ...
}

Stateless Functional Components

A more simple component


const DumbComponent = (props) => {
  // no need for render() method

  return (
    {props.text}
  );
}

Just a function that takes in props and spits out HTML.
Removes the need to bind the this keyword. (Feature of ES6 arrow function)
Signals that this component is dumb/presentational.
UI not behavior
Protects from lazily dropping in state or lifecycle methods

jsbin stateless svg

Redux

What problem does Redux solve?

Provides a way to centralize the state of a front end application.
It's goal is to be a predictable state container.

Concepts in Redux

Components
Containers
Store
Actions
Reducers
Selectors

Components

As dumb as possible
Solely responsible for for the way things look

Containers

Can be thought of as "smart" parent components
Pass sections of the store to child components
Also delegate what actions components can dispatch

Store

Master version of the initial state
Will usually have several seperate branches of state

Actions

Responds to events. User triggered, AJAX, etc.
Sends a payload of the current state + the type of event that occured

Reducers

Take information about the state and what action occured
Spits out an updated version of the state

Selectors

Efficiently computes and stores derived data
Only recomputes if one if its arguement changes
Common use case is calculating numbers (ie. currency)

React Rails

Adds Babel to our Asset Pipeline so we can transpile JSX & ES6
Gives us a Ruby helper method to drop a mounting point into Rails Views


# View Helper's Signature
react_component(component_class_name, props={}, html_options={})

# Our Usage
react_component("SM.ACARootComponent", @operation.to_hash)