How to build a React.js Simple App?

and Installing ReactJS using webpack and babel

React js App

In this chapter, we will show how to set up an environment for successful React development.

[N.B: At first you need to install nodejs and npm in globally in your system.]

webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

More Details Webpack is a module bundler (manages and loads independent modules). It takes dependent modules and compiles them to a single (file) bundle. You can use this bundle while developing apps using command line or, by configuring it using webpack.config file.

[N.B: if you want to know more details about webpack please check https://webpack.js.org/]

Babel is a JavaScript compiler and transpiler. It is used to convert one source code to other. Using this you will be able to use the new ES6 features in your code where, babel converts it into plain old ES5 which can be run on all browsers.

[N.B: if you want to know more details about babel please check https://babeljs.io/docs/en/]

Step-1: Create the project directory:

You need to create project directory where you want to set the project. I am Create the project in desktop using this command `sudo mkdir`.We use sudo for administration permission to set read and write permission.

C:\Users\username\Desktop>mkdir react-hello
C:\Users\username\Desktop>cd react-hello

After Creating the Directory, we need to create a package.json file. To do you need to run the npm init command from the command prompt. This command ask some information like package name, description, author etc.

If you skip the information write the command –y.
Open the package json file and paste the code

{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    
},
"keywords": [],
"author": "",
"license": "ISC"
}

Step-2: install React and react dom

Since our main task is Show hello world using Reat js, So using React js we need to install react and react-dom by commands of npm respectively also add package.json using the — save option.The Command are bellow

C:\Users\Username\Desktop\react-hello>npm install react --save
C:\Users\ Username\Desktop\react-hello>npm install react-dom --save

Step 3 — Install webpack

we are using webpack to generate bundler. Install webpack, webpack-dev-server and webpack-cli command are bellow

C:\Users\username\Desktop\react-hello>npm install webpack –save
C:\Users\username\Desktop\react-hello>npm install webpack-dev-server --save
C:\Users\username\Desktop\react-hello>npm install webpack-cli --save

Step-4: Install babel

Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react and, html-webpack-plugin.The command are bellow

C:\Users\username\Desktop\react-hello>npm install babel-core --save-dev
C:\Users\username\Desktop\react-hello>npm install babel-loader --save-dev
C:\Users\username\Desktop\react-hello>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\react-hello>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\react-hello>npm install html-webpack-plugin --save-dev

Step-5: Create some file:

In this step, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files manually or, using command prompt.

Step 6 — Set Compiler, Server and Loaders

In this step, Open webpack-config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8080 port. You can choose any port you want.

webpack-config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/public'),
      filename: 'index.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         },
         {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

And also open package.json file and paste the code or you can see the package file look like.

{
  "name": "recat-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  "babel-preset-es2015": "^6.24.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "webpack-dev-server": "^3.1.10"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "description": ""
}

Step 7 — index.html

This is just regular HTML. We are setting div id = “app” as a root element for our app and adding index.js script, which is our bundled app file which file found in public/index.js.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index.js'></script>
   </body>
</html>

Step 8: — Edit App.js and main.js

This is the first React component. We will explain React components in depth in a subsequent chapter. This component will render Hello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));

Open the .babelrc file and paste the code

{
    "presets":["env", "react"]
 }

Step-9: Install all package and running the server using this command

npm i or npm install then npm start

You see the screen like

Output

Step 10 — Generating the bundle

In this step, Generate the bundle you need to run the build command in the command prompt as npm run build

You can see the project Directory the bundle was generating

bundle directory file

You successfully run your 1st React js simple application.

Thank you.