React with Sage 9

[knowler]

It’s been a while since I used Sage 9, but in the past I’ve been able to get React up and running like this:

Unable to resolve path to module 'webpack-hot-middleware'

The issue must be in the ESLint config additions. I have no issues using yarn start or yarn build with an minimal Sage + React setup: $ yarn add react react-dom $ yarn add --dev eslint-plugin-react

resources/assets/scripts/routes/common.js

import React from 'react'; import ReactDOM from 'react-dom'; export default { init() { ReactDOM.render( <h1>Testing</h1>, document.getElementById('root') ); }, };

.eslintrc.js

diff --git a…

Something to note about Sage 9 is that it uses Bublé instead of Babel for compiling your ES2015+ JS, so if you run into anything React related guides that tell you to add Babel-related config, you will need to find Bublé alternatives.

For the page-specific stuff, just take advantage of Sage 9’s JS DOM-based routing.