Published on

React js with webpack4

Authors

We can learn lots of thing in this tutorial but i assume that you have basic knowledge about below technologies

  • npm
  • reactjs
  • webpack

I'll explain you step by step to setup your react project with webpack

Create folder blog-tutorial

mkdir blog-tutorial

Step 1: Project Initialization

First start with initializing project directory by below command

npm init

After the init process you can see some stuff in json like app name, author, dependencies, main script, etc ... are included in the package.json file Step 2: Download react and babel

let’s download necessary packages for react with babel dependencies

npm i react react-dom

Now on, all dependencies we install as dev dependency. Which we can do by npm option -D or --save-dev

We have now react, the things we require now is babel which is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward compatible version of JavaScript in current and older browsers or environments. you can learn more about babel here

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader style-loader css-loader

step-3: Create necessary directory and files Create src directory in the root directory Inside the src folder

  • src /-
    • Index.js
    • Index.html
    • components /-
      • App.js

We created three file index.js, index.html, and App.js inside components folder

For linux users

touch index.js

touch index.html

mkdir components

cd components

touch App.js

For windows users

type nul > index.js

type nul > index.html

mkdir components

cd components

type nul > App.js
Index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App';

ReactDom.render(<App />, document.getElementById('app'));
index.html
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Blog Tutorial</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
   </head>
   <body>
        <div id="app"></div>
   </body>
</html>
App.js
import React, { Component } from 'react';

class App extends Component{
  render(){
     return( <div>
          <h1> Hello App</h1>
      </div>
     );
  }
}

export default App;

Step:4 configure .babelrc file

Create .babelrc file

Linux:

touch .babelrc

Windows:

type nul > .babelrc

.babelrc file is babel configuration file you can learn more about them here

Since babel 7 they change preset-react to @babel/preset-react likewise for env. Instead of es2015 babel use now env preset

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

Step 5: Install webpack

Now, we install webpack

Webpack is an open-source JavaScript module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. Webpack takes modules with dependencies and generates static assets representing those modules. You can learn more about webpack from here(https://webpack.js.org/concepts/)

npm i -D webpack webpack-dev-server webpack-cli html-webpack-plugin mini-css-extract-plugin

We installed 2 plugin html-webpack-plugin which generate index.html file in dist folder from our template which is in src/index.html And mini-css-extract-plugin will generate optimize CSS file in dist/css folder.

If you are using webpack 3 the install instead of text-css-extract-plugin of mini-css-extract-plugin Step 6: Configure webpack.config.js

Now the last thing remaining is to configure web pack

Create a file name: webpack.config.js

Linux:

touch webpack.config.js

Windows:

type nul >  webpack.config.js
Webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
      path: __dirname + "/dist",
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      sourceMapFilename :'[name].bundle.js.map'
  },
  module: {
      rules:[
          {
              test: /.js$/,
              exclude: /node_modules/,
              use: {
                  loader: 'babel-loader'
              }
          },
          {
              test: /.(sa|sc|c)ss$/,
              use: [
                  {
                      loader: MiniCssExtractPlugin.loader,
                      options: {
                          publicPath: '../css/'
                        }
                  },
                  'css-loader',
                  'sass-loader',
                ],
          }
      ]
  },
  plugins: [
      new MiniCssExtractPlugin({
          filename: 'css/[name].css',
          chunkFilename: 'css/[id].css',
        }),
      new HtmlWebpackPlugin({
          template: './src/index.html'
      })
  ]
}

Above configuration, you can learn more about here Step 7: Build and Run project

At last, our react with webpack app ready to run

Hit below command

npm start

To build

npm run build

After building you can see your static code in dist folder in the root directory. you can visit my GitHub repo react-starter-with-webpack

If you want to start with electron with react then go my postBuild windows Application using Electron

Discuss on Twitter