Create a React app using Webpack 5 + Babel + Karma + Redux (Part 1)
For some projects, some technical specifications may oblige you to use a self-made React project without using the create-react-app which I personally don’t like while it doesn’t give you enough freedom to personalize your project.
That’s why I would like to share with you this tutorial and show you how to customize yo React app as you wish.
So, in the following steps, we will start the first part of our tutorial by setting up our project with React, Webpack, and Babel.
After giving an overview about this tutorial and defining the tools that we will use let’s start doing!
The first step will be creating our package.json file where we will set up our dependencies, so we run the following command in our project folder
Then we have to install the dependencies that we need, which are basically react, react-dom, webpack and webpack-dev-server, babel-loader... The following file is the final package.json file that includes also some plugins (like webpack-bundle-analyzer, mini-css-extract-plugin …) which will be very useful for our project.
To run our React app we will need also the following scripts:
“start”: “webpack serve --env production --open --hot --progress”,
“build”: “webpack build”
Now we’ll create our src folder where will be our main component. Here we need 3 index files;
-index.js: contains the main App component, and render our app in an HTML element in index.html with react-dom
-index.html: an HTML file that contains the app template and contains in its body an element where the app will be rendered (the one with id=”root”)
-index.scss: contains the styling of our app and especially some configs or primitives of the used UI libraries.
And next, we are going to create our webpack.config.js file, this config file will contain the configuration of our loaders, module, and other informations related to the final bundle.
*In this file we are going to use some plugins and modules in order to get a better app performance and also to make the debugging easier (e.g: BundleTracker…).
And finally, at this step our React app is ready, it’s possible to run it using:
or building it will be by running:
npm run build
As you see, in this first part we created our React app from Webpack using Babel. You can find the whole project in this Github repo.
Write a comment if something wasn’t clear and do not hesitate to ask ;)
In the second part, we will try to add Redux to manage the state inside our React project.