rails new Demo --database=postgresql --webpack

------ add to gemfile ---
#gem 'webpacker'
gem 'react-rails'


then 
bundle install

rails webpacker:install
rails webpacker:install:react  
rails generate react:install

#add line to header of application.html.erb

<%= javascript_pack_tag 'application' %>

rails g react:component HelloWorld

npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-decorators   

#babel.config.js
add : 
 [
        require("@babel/plugin-proposal-decorators").default,
        {
          legacy: true
        }
      ],
      [
        require("@babel/plugin-proposal-class-properties").default,
        {
          loose: true
        }
      ],

on config/webpacker.yml
add in the extensions list if not present:
- .jsx 

yarn add react-router-dom

import React from "react";
import Index from "./index"
import About from "./About"
import Users from "./Users";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
//import { HashRouter as Router, Route, Link } from "react-router-dom";

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
      </div>
    </Router>
  );
}

export default AppRouter;

//               destructuration des composants
const MyStaticComp = ({id,nom,prenom}) => {

   return (
        <div>
               <p>{id}</p>
               <p>{prenom}</p>
               <p>{nom}</p>
          </div>
     )
}

<a onClick={this.handleClick} data-firstname="john" data-lastname="doe">balbalbab</a>

handleClick(e){
    let firstname = e.target.dataset.firstname;
    let lastname = e.target.dataset.lastname;

}