Learn React 18 – React Setup With Webpack and Vite

React 18 introduces several new features and improvements, and one of the most exciting changes is the new concurrent mode and automatic batching. But before we can start coding with React 18, we need to set up our development environment. In this article, we will explore how to set up React with Webpack and Vite, two popular tools for building modern web applications.

Setting Up React with Webpack

Webpack is a popular module bundler for JavaScript applications. It allows us to build and bundle all of our JavaScript files and other assets, such as CSS and images, into a single, optimized package. Setting up React with Webpack involves installing the required packages and configuring the webpack.config.js file.

To start, we need to install the necessary packages:

    npm install react react-dom
    npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
  

Once the packages are installed, we need to create a webpack.config.js file to configure Webpack:

    const path = require('path');

    module.exports = {
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react']
              }
            }
          }
        ]
      },
      devServer: {
        contentBase: './dist',
        hot: true
      }
    };
  

With this setup, we can now start building our React application using Webpack.

Setting Up React with Vite

Vite is a build tool that focuses on instant server start and fast builds. It is designed specifically for modern JavaScript frameworks like React, Vue, and Svelte. Setting up React with Vite is incredibly simple – all we need to do is run a single command to create a new React project:

    npm init @vitejs/app my-react-app --template react
    cd my-react-app
    npm install
    npm run dev
  

With these commands, Vite will create a new React project using the default template and start a development server. We can then start writing our React code right away without having to worry about configuring the build tool.

Conclusion

Setting up React with Webpack and Vite is essential for building modern web applications. While Webpack offers more flexibility and customization options, Vite provides a simpler and faster development experience. Both tools are excellent choices for creating React applications, and the choice ultimately depends on your specific project requirements and preferences.

With React 18’s new features and improvements, such as concurrent mode and automatic batching, setting up our development environment with Webpack or Vite will allow us to take full advantage of these new capabilities and build powerful, responsive web applications.