Setting up React with Babel is already available with create-react-app. If you need something configured and just start writing stuff, use that. In this article, we will create our own configuration boilerplate. In doing this we will better understand how these things actually work together.
Setting up working directory. In it, we will prepare the folder structure and some files.
Now we need to install all these packages.
Open config/webpack.config.js and put this content in it. This tells webpack how to work with out files in the src folder and how to bundle them together and deliver them.
Babel also needs some configuration in the .babelrc file.
Currently our index.html and index.js files are empty. Lets put some content in them.
Now we just need to update package.json so we can run it. To do so, open package.json and add this line under
"start": "webpack-dev-server --mode development --config webpack.config.js --open --hot"
If everything turned out fine, run
npm start and the browser should open with the content from the react app.