Setting up Minimal React project from scratch using Babel and Webpack

Let’s setup a react app from scratch.

Steps

index.html
Support for ES6+
Webpack for bundling and serving app
Root Component

Setup

Create a folder for your project
Run npm init -y (from the command prompt/terminal)
Create two directories inside root directory of the project folder
1. public (publicly accessible resources)
2. src (react app code)
Create a file called index.html in the public folder.
Add reference to ../dist/bundle.js (This name can be changed anytime alter). This will contain our bundled react app code.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Template</title>
</head>
<body>
  <div id="root"></div>
  <noscript>
    Please enable JavaScript to view this site.
  </noscript>
  <script src="./dist/bundle.js"></script>
</body>
</html>

ES6 and JSX Support

Install and configure as listed in the below steps for ES6 and JSX support.

run npm i –save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
run npm i react react-dom
Create a .babelrc file in the root of the application with the following contents

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

Create React Basic Code

Create the following three files in the “src” folder

index.js
App.js
App.css

App.js

Add the following code to App.js file.

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="app">
     <h1>Hello, React!</h1>
    </div>
  )
}

export default App;

App.css

Add the following styles to App.css file.

.app {
   margin: 1rem;
   font-family: Arial, Helvetica, sans-serif;
   color: black;
}

index.js

Add the following code to index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App/>, document.getElementById('root'));

Setup Webpack and Babel

Run the below command from the command prompt/terminal

npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader

Create a webpack config file in the root directory of the project called “webpack.config.js”

webpack.config.js

Add the following code to webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  module: {
    rules: [
      {
         test: /\.(js|jsx)$/,
         exclude: /(node_modules)/,
         loader: 'babel-loader',
         options: { presets: ["@babel/env"]}
      },
      {
         test: /\.css$/,
         use:["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ['*','.js','.jsx']},
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, 'public/'),
    publicPath: 'http://localhost:3000/dist/',
    port: 3000,
    open: true,
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
}

Add Script to run and build the app in package.json

  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },

Build and Serve the app

Run the below command to execute the script you just created in the package.json file.

npm start

Open your browser (if it is not already open) and test the app

Production Build

To create a production build run the below command from the command prompt/terminal.

After running the below command a bundle.js file will be created in the ‘dist’ folder (which you configured in the webpack.config.js file)

npm run build

Blog