Tutorial

What does it look like?

Create a new component at app/assets/javascripts/components/hello_clock.js.jsx

"use strict";

class HelloClock extends React.Component {
  constructor() {
    super();

    this.state = {
      time: new Date()
    };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        time: new Date()
      })
    }, 1000);
  }

  render() {
    return (
      <React.Fragment>
        <h1>{this.props.greeting}</h1>
        <p>The date is {this.state.time.toLocaleString()}</p>
      </React.Fragment>
    );
  }
}

window.HelloClock = HelloClock;

Open app/views/greetings/hello.html.erb and replace the contents with the following

<%= react_component("HelloClock", {:greeting => "Hello YEGRB Friends"}) %>

Overview

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/98425cab-5158-49c7-b520-0f3037cac682/Rails__React_Setup.m4v

Options