Setting Up React with Webpack and babel from Scratch

npm init -y

npm install react react-dom webpack webpack-cli webpack-dev-server

touch index.js index.html

import React from "react";
import ReactDOM from "react-dom";

const App = () => <h1>Hello, Webpack with React!h1>;

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

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    React Webpack Setup


     id="root">





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Step 3: Webpack Configuration
Create a webpack.config.js file. Webpack needs an entry file, an output path, and a filename for the bundled JavaScript:

const path = require("path");

module.exports = {
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
};



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Step 4: Adding Babel Support
Webpack works with loaders and plugins. Loaders tell Webpack how to process different file types. To compile JSX, we need Babel.Install Babel dependencies:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Then, update webpack.config.js to include Babel in module rules:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
        ],
    },
};



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Next, create a .babelrc file to configure Babel:

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



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Step 5: Setting Up Webpack Dev Server
To serve our React application, we need webpack-dev-server.Modify webpack.config.js to add a development server:

module.exports = {
    devServer: {
        static: path.join(__dirname, "dist"),
        compress: true,
        port: 3000,
    },
};



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Update package.json with scripts to start and build the project:

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack"
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Now, run:

npm start



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Your React app should open in the browser.
  
  
  Step 6: HTML Template with Webpack Plugin
By default, Webpack does not generate an index.html file. We use html-webpack-plugin to create one with our bundle script linked. We will use the template option from the plugin to link to our index.html file we have created in the beginning.Install the plugin:

npm install --save-dev html-webpack-plugin



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Modify webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "index.html"),
        }),
    ],
};



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Now, index.html will automatically include our bundled script.
  
  
  Step 7: Adding CSS Support
Webpack does not process CSS files by default. To allow this, install the necessary loaders:

npm install style-loader css-loader



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Now, update webpack.config.js to include rules for handling CSS: we need both these loader since style-loader is to use the css in the bundle and css-loader is for webpack to understand how to process the css.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
};



    Enter fullscreen mode
    


    Exit fullscreen mode
    




To apply CSS, create a styles.css file and import it inside index.js:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Then, import it in index.js:

import "./styles.css";



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Step 8: Handling Assets (Images, SVGs)
To use images in our project, we need Webpack to process them. Update webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|svg)$/i,
                type: "asset/resource",
            },
        ],
    },
};



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Now, you can import and use images in your components:

import logo from "./logo.png";



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Step 9: Resolving File Extensions
By default, Webpack requires file extensions when importing modules. To simplify imports, add the following to webpack.config.js:

resolve: {
    extensions: [".js", ".jsx"],
},



    Enter fullscreen mode
    


    Exit fullscreen mode
    




This allows us to import files without specifying .js or .jsx:

import Component from "./Component";



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Conclusion
Now, you have a fully functional React setup with Webpack, Babel, CSS, and asset handling. This step-by-step approach ensures you understand each configuration. 🎉 Happy coding!Checkout my github repo for the code discussed
[https://github.com/Naveenprasad59/How-to-create-ReactApp-from-Scratch/tree/master]