🕹️ Setting up React Environment

🚩 React Router

yarn add [email protected]

mkdir -p ./app/javascript/src/
touch ./app/javascript/src/App.jsx

Paste this into App.jsx:

import React from "react";
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" render={() => <div>Home</div>} />
        <Route exact component={Dashboard} path="/dashboard" />   {/* Prefer this one */}
      </Switch>
    </Router>
  );
};

export default App;

🌐 Axios Setup

yarn add [email protected]

mkdir -p ./app/javascript/src/apis
touch ./app/javascript/src/apis/axios.js

Paste this into axios.js:

import axios from "axios";

axios.defaults.baseURL = "/";

export const setAuthHeaders = () => {
  axios.defaults.headers = {
    Accept: "application/json",
    "Content-Type": "application/json",
    "X-CSRF-TOKEN": document
      .querySelector('[name="csrf-token"]')
      .getAttribute("content"),
  };

  ...
};

🔀 Initialize Axios in Entry Point

Fully replace app/javascript/packs/application.js with:

import "../stylesheets/application.scss";

import { setAuthHeaders } from "apis/axios";

setAuthHeaders();

📊 JavaScript Logger (js-logger)

mkdir -p ./app/javascript/src/common
touch ./app/javascript/src/common/logger.js

Paste this:

import Logger from "js-logger";

export const initializeLogger = () => {
  /* eslint react-hooks/rules-of-hooks: "off" */
  Logger.useDefaults();
  if (process.env.RAILS_ENV === "production") {
    Logger.setLevel(Logger.OFF);
  }
};

Alternative: