Sage 9 Wordpress theme

app.jsx

import React from "react";
import ReactDOM from "react-dom";
import "babel-polyfill";

const App = ()=> {
  return <h1>I'm an app</h1>
}

const init = () => {
  ReactDOM.render(<App />, document.getElementById("reactApp"));
};

export default init;

common.js

import App from "./../react/app.jsx";

export default {
  init() {
    if (document.getElementById("reactApp")) {
      App();
    }
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

gistfile1.txt

yarn add react react-dom
yarn add @babel/core @babel/preset-env babel-polyfill babel-loader --dev

# I would suggest you use dynamic imports for the app
yarn add @babel/plugin-syntax-dynamic-import --dev
# Since Imports is not valid ES2015 Eslint will not like it so we need to add
yarn babel-eslint --dev

And change the es-lint config

  'parser': 'babel-eslint',
  'parserOptions': {
    "allowImportExportEverywhere": true
  },

Add the plugin in the webpack, and now that we have babel we might want to parse js and jsx with babel so:

      {
        test: /\.(jsx?)$/,
        exclude: [
          /(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/,
        ],
        use: [
          {loader: 'cache'},
          {loader: 'babel', options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: ["@babel/plugin-syntax-dynamic-import"],
          }}
        ]
      },

And now we can so we dont load react in every page

export default {
  init() {
    if (document.getElementById("mapApp")) {
      import("./../react/map.jsx").then(module => module.default());
    }
  },
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },
};

webpack.config.js

let webpackConfig = {
  // other configs...
  module: {
    rules: [
      // other rules...
      // remove the js rule
      // Add the following to process JSX files
      {
        test: /\.(jsx?)$/,
        exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
        loader: 'babel',
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
    ],
  },
};