Create a React App from scratch using Webpack and Babel

Typically you might create a new project with a create-react-app command, but if you are working on an industry/corporate project, most of the time you will need to use a custom webpack configuration instead of create-react-app.

So, in this article, we will set up a React application from scratch using Webpack, Babel, and React libraries.

First, you need to create a folder called “React-App” (you can rename it whatever you want)

Then open it from vs code IDE, then open vs code terminal and run the following commands one by one.

1. npm init -y
2. npm install --save-dev webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react babel-eslint @babel/runtime @babel/plugin-transform-runtime html-webpack-plugin css-loader file-loader style-loader postcss-loader
3. npm install react react-dom

Then change the script in the package.json file as follows

Now you can see your package.json file as follows

Then create webpack.config.js and .babelrc files in the root directory and paste the following code into the relevant file.

• webpack.config.js

• .babelrc

After that, create folders and files according to the following folder structure

Then add the following code to the relevant files

• index.js

• App.js

• index.html

To run the application, execute the npm start command from the terminal.

Now navigate to http://localhost:3000/ and you will see your content from index.js as shown below:

Congratulations!! You have successfully built your React application using Webpack and Babel.