The Minimal React Project Setup using Webpack and Babel

October 1, 2018 / 2 responses

There are a good number of starter kits available for creating React projects. Starter kits are useful, but most of them are black boxes, they improve productivity once the developers have an understanding of how they work. For large scale applications, we want to create the application from scratch and want full control over it.

The goal of this blog post is to explain how to create minimal React project using Webpack and Babel from scratch step by step.

Step 1: Create project folder, and package.json file in the folder


mkdir react-minimal-project
cd react-minimal-project
npm init -y

Step 2: Install React and React DOM packages


npm install --save react react-dom

Step 3: Install Webpack, Webpack CLI and Webpack Dev Server


npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server

Step 4: Install Babel


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

The @babel/core is the babel compiler. The babel-loader is the webpack plugin for babel. The @babel/preset-env is the Babel preset for converting ES6, ES7 and ES8 code to ES5. The @babel/preset-react is the Babel preset for all React plugins.

We have all the required npm packages, let’s write some code. First, we need to create Babel configuration in .babelrc file to tell Babel how to transpile our ES6, ES7, ES8 and JSX code.

Step 5: Create Babel configuration file .babelrc

.babelrc


touch .babelrc

Add the following configuration to .babelrc file.


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

Step 5: Create Webpack configuration file webpack.config.js


touch webpack.config.js

Step 6: Add the below configuration to webpack.config.js file

webpack.config.js


module.exports = {
  entry: './src/app',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Step 7: Let’s write a hello world React component

src/helloworld.js


import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return (<h1>Hello World, React!</h1>); 
  } 
} 

export default HelloWorld;

Step 8: Let’s display the <HelloWorld /> React component on the page using react-dom render() method

src/app.js


import React from 'react';
import { render } from 'react-dom';

import HelloWorld from './helloworld';

render(<HelloWorld />, document.getElementById('app-root'));

Step 9: Let’s create index.html page to render our react application

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Hello World</title>
</head>
<body>
  <div id="app-root"></div>
  <script src="bundle.js"></script>
</body>
</html>

Step 10: Let’s update scripts section in package.json file to run our application using webpack dev server


"scripts": {
  "start": "webpack-dev-server --mode development --open --hot"
}

Go to project folder in terminal run npm start command, this will start webpack dev server, opens the browser and display the result of <HelloWorld /> component.

You can find the sample code here.

Write a response

Discussion

David J says:

March 22, 2019 at 11:19 am

Thank you writing for this post Shravan. It has been the easiest example to follow since I'm trying to learn how to create a React application from the start.
ogun says:

June 4, 2019 at 7:56 pm

Thank you so much for this clean guide.

Shravan Kumar Kasagoni

Write a response

Discussion