Configuring the React.js 16.8.7 application with WebPack 4.29.6 and Babel 7.4.3

-

Configuring the React.js 16.8.7 application with WebPack 4.29.6 and Babel 7.4.3



Note: The article focuses on the React.js 16.8.7, WebPack 4.29.6 and Babel 7.4.3 versions.
The challenge that most of the front-end developers faces is to understand the front-end project configuration to kick-start the project. Most of the modern front-end JavaScript libraries and Frameworks comes with their own internal dependencies. It is important for the front-end developers to understand these dependencies and its auto-management before kick-start the development so that the application configuration can be smooth and maintainable. Sometimes, JavaScript applications needs some dependencies like bootstrap or any other CSS, SCSS frameworks to be included while developing the project. In this case, the developer must configure these dependencies accurately so that the development process should be smooth and application to run accurately and it should be maintainable. 


React.js is a great JavaScript library for building user interfaces. This provides a painless experience of building interactive UI for the modern front-end applications. React.js uses ES 6 standard for writing the code. ES 6 is modern and high-level JavaScript for the front-end application development. To provide Rich UX to the end-users from the React.js applications, we may need to use Bootstrap CSS framework. So here the question is how to configure the React.js application with dependency for ES 6 transpilation and with an integration with Bootstrap framework?  You may use the create-react-app tool for creating react applications but in this article we will see how to configure React.js application with scratch.    
In this article we will go through the steps for configure the React.js using Webpack and Babel for module bundling for React.js applications and managing dependency graph for application dependencies. To understand this we will go through the overview information about Babel and Webpack.


What is Babel?
Babel is a JavaScript compiler, that is used to convert source code written in ECMAScript 2015+ (ES6+) to the JavaScript that is compatible to the current and the older browser. Babel transforms the ES6 syntax into the standard browser compatible JavaScript.

We need following Babel packages for React.js application
1.    @babel/cli: This provides built-in CLI. This is used to compile ES6 file from the command-line.
2.    @babel/core: This is babel compiler core. This will use the .babelrc file based configuration while transforming the code.
3.    @babel/preset-env: This is used to allow the latest JavaScript without needing to manage each syntax transformation. This makes the JavaScript bundling easier. This compile ES6 into ES 5.
4.    @babel-preset-react: This is the preset for all React.js plugins. This compiles JSX into JavaScript.
5.    babel-loader: This is used when we are using Webpack and Babel for JavaScript transpilation 
  
What is Webpack?
Webpack is a static module bundler for the modern JavaScript applications. This manage internal dependency graph for all the dependencies used in the application. This helps to generate more optimize module bundle for the application. You can read more about Webpack from this link.

We will be using Visual Studio Code for the implementation. This is a cross-platform open source IDE by Microsoft. It can be downloaded from this link. We also need Node.js. You can download Node.js from this link.

Step 1: Create a folder on the drive of name react_app. Open this folder in VSCode.

Step 2: Open Node.js command prompt and navigate to the react_folder created in previous step.

 Step 3: We need to create a package.json file for the application. To create this file run the following command
npm  init -y
This will generate package.json in the folder.

Step 4: Open package.json and add the following packages in the devDependencies section




"devDependencies": {
        "@babel/cli": "^7.4.3",
        "@babel/core": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.5",
        "html-webpack-plugin": "^3.2.0",
        "html-webpack-template": "^6.2.0",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1",
        "bootstrap": "4.3.1",
        "css-loader": "3.0.0",
        "file-loader": "4.0.0",
        "style-loader": "0.23.1",
        "sass-loader": "7.1.0"
    }

We are using Webpack, Babel packages for module bundling and transpilation.  We also have packages for bootstrap, css-loader, scss-loader, style-loader, etc. These packages are the application dependencies to load bootstrap styles in while running React.js UI in the browser.
Add the following packages in the dependencies section of the package.js




"dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    }


We need above packages for React.js programming. These packages provide object model for React.js.
Add the following commands for application management in the build section




"scripts": {
        "start": "webpack-dev-server",
        "build": "webpack",
   }


The start value of the script will be used to run the application using following command
npm run start
Finally, the package.json file will look as shown in the following listing




{
    "name": "react-app",
    "version": "1.0.0",
    "main": "index.js",
    "license": "ISC",
    "scripts": {
        "start": "webpack-dev-server",
        "build": "webpack"
    },
    "devDependencies": {
        "@babel/cli": "^7.4.3",
        "@babel/core": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.5",
        "html-webpack-plugin": "^3.2.0",
        "html-webpack-template": "^6.2.0",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1",
        "bootstrap": "4.3.1",
        "css-loader": "3.0.0",
        "file-loader": "4.0.0",
        "style-loader": "0.23.1",
        "sass-loader": "7.1.0"
    },
    "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    }
}

Listing 1: The package.json

Step 5: Open the react_app folder in VSCode, add a new file of name webpack.config.js. This file will contain configuration for module bundling for the current application. Add the code in the file as shown in the following listing




// 1.
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');
// 2.
const config = {
    // 2.a
    entry: './main.js',
    // 2.b
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index.js',
    },
    // 2.c
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            }
        ],
    },
    // 2.d
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    // 2.e
    plugins: [
        new HtmlWebpackPlugin({
            inject: false,
            template: HtmlWebpackTemplate,
            appMountId: 'app',
        }),
    ],
};
// 3.
module.exports = config;


Listing 2: The Webpack.config.js
The above code has following specifications (Note: The following line numbers maps with the comments applied on the code)

1.    Here we import all the required packages for Webpack module bundling. The html-webpack-plugin is used to simplify the creation of HTML files to serve webpack bundles. The html-webpack-template will be used by html-webpack-plugin while handling index.html file of the projects.

2.    The configuration object with following specification
a.     The entry object represents the javascript file from which the webpack should start building out the internal dependency graph of the application’s dependencies. Here we have specified main.js. In our application we will be rendering react components from this file.
b.    The output property tells webpack the location where bundles will be stored and what will be the name of the output bundle file.
c.     In the module object defines rules that will be used by the webpack module bundler for transpilation of .js and .jsx files in the current application using babel-loader. Here we are excluding all .js and .jsx files from node_modules folder. Since we are also going to use css and styles files from bootstrap as dependencies in the current application we are using style, css and sass loaders to manage these files.
d.    The resolve object will be used to resolve .js and .jsx extensions for the files in the current project.
e.    The plugins object is used to specify all plugins that will be used by loaders while doing transformations. Here we are using HtmlWebPackTemplate, this will be used for injecting the compiled React UI in the app element in the index.html.

3.    The config object exporting all the configurations from the webpack.config.js
The webpack.config.js file will be used by webpack and webpack-dev-server to perform React.js transpilation and generating dependency graph for all dependencies and generating a module bundle output file of name index.js

Step 6: In the project add a new file and name it as .babelrc. This file will contain the preset configuration for the babel that will be used for .jsx and ES 6 transpilation. Add the following code in the file





{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Listing 3: The .babelrc file
Step 7: To remove the ES 6 coding warnings in the editor, add a new file of name .jshintrc in the folder and add the following configuration in it




{
    "esversion": 6
}

 Listing 4: The esversion rule to version 6 to remove ES6 warnings in the code

 Step 8: To install all packages mentioned in the package.json run the following command from the command prompt
npm install
This will generate node_module folder in the application. This will contain all folders for packages of every dependency mention in the package.json file.

 Step 8: In the project add a new folder of name components. Add a new file in the components folder. Name this file as simplecomponent.jsx. In this file we will write a code to create React component as shown in the following listing.





import React, { Component } from "react";

class SimpleComponent extends Component {
  constructor(props) {
    super(props);
  }
 
  render() {
    return (
<div classname="container"> <h2> The Simple Component!!!!</h2> </div>
);
  }
}
export default SimpleComponent;
Listing 5: The Simple React Component

 Step 9: At the root of the application (at the react_app folder level) add new file and name it as main.js. In this file add the following code

// 1. Import React Object model
import React from "react";
// 2. Import ReactDOM for rendering React Component in DOM
import ReactDom from "react-dom";
// 3. Import bootstrap
import "!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css";

import SimpleComponent from "./components/simpleComponent.jsx";
ReactDom.render(, document.getElementById("app"));

Listing 6: The mian.js using React object model and using bootstrap

 The main.js is the entry point module for the application. All .js and .jsx files in the current application will be loaded from this file. The webpack will use this file for transpilation of all .js and .jsx files in the application for building dependency graph e.g. bootstrap which is imported here.

 Step 10: At the root of the application add a new file and name it as index.html. In this file add the following html code

Listing 7: The index.html refers the index.html

 The above html file uses index.js. This is the output bundle file generated by the webpack based on the loaders defined in the webpack.config.js file.
Step 11: Run the application by executing following command from the command prompt
npm run start

The command will generate the following output



Figure 1: The build output

 This image clearly shows that, the webpack-dev-server starts building from main.js and then uses .jsx file and then all dependencies e.g. bootstrap. This will generate index.js file.
Open the browser and enter the following address in the address-bar
http://localhost:8080

This will generate the following result

  Figure 2: The Rendered Result in browser

Press F12 to open browser’s developer tools, it will show the index.js file downloaded in the browser as shown in the following figure


 Figure 3: The index.js file downloaded

  
Conclusion: The react.js configuration for project kick-start is most important. Using babel, webpack and with additional dependencies with their supported version must be carefully defined in the webpack configurations with the respective loaders.  

Popular posts from this blog

Uploading Excel File to ASP.NET Core 6 application to save data from Excel to SQL Server Database

-
Image
Recently, while conducting a session on ASP.NET Core 6, my client raised a query regarding uploading excel files to the ASP.NET Core MVC application and then further saving data from excel to the SQL Server Database table. I gave him the solution and then thought to write a post on it. As we all know, the Excel Workbook is one of the most heavily used files to save data. But to persist data it is recommended that it should be stored in an SQL Server database.  If the data is stored in an SQL Server database it can be queried easily.  Figure 1, explains an implementation of the application which we are going to discuss in the article. Figure 1: The ASP.NET Core That accepts Excel files and then further store data from Excel Files in SQL Server Database The   ExcelDataReader.DataSet Library To read excel files in ASP.NET Core applications, we need to use the ExcelDataReader.DataSet package. This is a lightweight and fast library for reading Excel files in .NET applications....
Read more

ASP.NET Core 6: Downloading Files from the Server

-
Image
In this article, we will implement the file downloading feature using ASP.NET Core 6 application. In real-world applications, we can have various files like reports, spreadsheets, images, PDF documents stored on the server. (Note that all cloud-hosted applications prefer to store these files on the storage services, e.g. Blob, S3, etc.). But what if the client prefers to store files on the separate file server mapped to the web application host server? Then, in that case, we may need to download these files from the file server. In this article, we will implement exactly the same thing.   Step 1: Open Visual Studio 2022 and create a new ASP.NET Core MVC Application targetted to .NET 6. Name this application as Core6_FileDownload. In this project add a new folder and name it as ServerFiles. In this file add some images. (You can add Excel, PDF, Word, Files). Step 2: Since we need to read the ServerFiles folder using the ASP.NET Core application, we need to add the IFi...
Read more

ASP.NET Core 6: Using Entity Framework Core with Oracle Database with Code-First Approach

-
Image
In this article, we will see how to use Oracle Database with Entity Framework Core with Code-First Approach. The reason behind writing a post on this is, recently while conducting training, one of my students raised the query regarding the EF Core with Oracle. Since Oracle is one of the most powerful databases, various enterprise applications are using it for the past several years and since the .NET Core is the most popular technology for building modern apps, the scenarios for accessing the Oracle database in .NET Core apps the use Entity Framework Core is common. Oracle Data Provider for .NET Entity Framework Core The Oracle Data Provider for .NET i.e. ODP.NET is used to access data from the Oracle database in the .NET Core apps using Entity Framework Core. This uses the Oracle.EntityFrameworkCore.dll, a managed library. This data provider allows using Code-First and Database-First approaches to perform Read/Write Operations with Oracle database.    Implementation To implem...
Read more