[woudsma]

I usually create a folder containing src/index.js and public/index.html, then install react-scripts and add 'start' and 'build' scripts in my package.json.

  mkdir -p myproject/{public,src} && cd myproject  
  touch src/index.js public/index.html  
  npm init -y && npm i -D react-scripts  
  # add to package.json scripts:  
  # "start": "react-scripts start",  
  # "build": "react-scripts build",  
  npm start  

Now you've got a hot-reloading development server that can handle (and transpile) ES6 / TypeScript, import JS/CSS with 'import', etc. If you want more control over webpack you can 'eject' to be able to edit the webpack configs. Note that you don't need to use React to use react-scripts. I just want to get up to speed fast, without doing a 4hr webpack deep dive.

Hot reloading definitely saves me some extra RSI.

[techpression]

react-scripts is one of the most bloated pieces of front end horror I’ve ever worked with (and the amount of abstraction on top of it that aims to hide that fact only makes it worse), their webpack config reads as a silly joke. All you have to do is to eject and you see how bad it is.

Esbuild + a script in package.json and you’re done for modern front end. Maybe run a tailwind watcher.