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.

React: React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Wikipedia

Webpack: Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules. Wikipedia

Babel: Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines. Babel is a popular tool for using the newest features of the JavaScript programming language. Wikipedia

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

npm init

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:

npm start

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.