How to build a react application from scratch – Modern JS with React

In the beginning of React Learning I am very confused about React JS with various open questions in my mind like where to start, how to start and  what are the required software’s that needed to build a react application.Later i managed to learn React JS and converting my learning into this article which might help to others like me to get better understanding.

In this tutorial i will walk you through the process of building your own React webapp project from the scratch.

Prerequisites:

Basic knowledge of HTML, JavaScript and CSS.Basic knowledge of Terminal. We will tell you what to type but you should know how to open terminal and how to navigates to directories within it.Node and npm should be installed on your computer.
Lets start the webapp project…
Open your terminal, run the following commands and create the files.
1. Run these commands

 mkdir webapp
 cd webapp

To create package.js file run the below command in terminal

 npm init

Once you run the above command it will ask you for the below data once by one.
name: webapp

version: 1.0.0de

scription: My First React Application

entry point: main.js

test command: “”

git repository: GIT // If you have any git repository enter that name here.

keywords: webapp

author: Roshan

license: ISC

Once you enter the above information it will create package.json filw with content something like below


{
  "name": "webapp",
  "version": "1.0.0",
  "description": "My First React Application",
  "main": "index.js",
  "scripts": {
    "test": "\"\""
  },
  "repository": {
    "type": "git",
    "url": "GIT"
  },
  "keywords": [
    "webapp"
  ],
  "author": "Roshan",
  "license": "ISC"
}

So far we have created the package.js file to record our npm dependencies. Everything we add in subsequent steps will be npm packages like Babel, Webpack, React, etc.

1. Babel

Babel  transforms the ES6 JavaScript that we will be writing into ES5 JavaScript that current browsers can  understand.
Babel is particularly important for React developers because of JSX. JSX is a succinct way to write out the layout of a React component.
To use babel we need to install babel itself, as well as two additional packages for configuring Babel for use with ES6, ES7 and React.
To configure Babel to use the presets that we just installed.
Run these commands

npm install --save babel-corenpm install --save babel-preset-latestnpm install --save babel-preset-react

2. Webpack

Webpack bundles all your JavaScript together into a single file. This includes each JavaScript file that you write as well as your npm packages.
Why bundle?A single .js file is easier to deploy and will usually download faster that multiple smaill files. So it will avoid http requests for JavaScript files.
Webpack will work with Babel to convert your code from ES6/ES7 to ES5 while we work. Webpack can also minify your .js file for production.
Webpack ConfigNow create a webpack.config.js file and below code to it.

const path = require('path');

var config = {
   context: path.join(__dirname, 'src'),
  entry: [
    './main.js',
  ],
  output: {
    filename: './bundle.js',
  },
   devServer: {
      inline: true
   },
  
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

You will set a few configuration options in this file. Here is the breakdown for each one, along with a link to the relevant portion of the Webpack docs:
context: This is the path to your client-side JavaScript folder. This must be an absolute path.
entry: This is the entry point for your application.
loaders (module.rules): This section specifies how each file should be processed before it is combined into your bundle. We only have one loader: Babel. This converts your ES6 + JSX JavaScript into ES5 before merging it into your bundle.
resolve: Where Webpack should look for files referenced by an import or require() statement. This makes it so that you can import npm packages in your code.
Run the below command to install webpack

npm install --save webpack babel-loader

NOTE: babel-loader is a Webpack “loader”. It supports running Babel from Webpack. Usually any npm package ending in -loader is for Webpack.

3. Compile
In this step you added Webpack, but you didn’t actually get to use it yet.
In this step you’ll add an npm script called compile to your package.json. The script runs Webpack.
Express, A React development environment needs some way to show your app in a browser. That means you’ll need a server. In this step you’ll be setting up Express as your server.
Run the below command in terminal to install express component

npm install --save express webpack-dev-middleware

The main file added here is server.js. That file will run an Express server, which will run Webpack. Webpack will re-run any time you change one of your JavaScript files.
server.js is server-side JavaScript. You can run it with the node server.js command. In this step you will also add a start script to run the server. Save this code in your server.js file.

const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
const app = express();
 
const compiler = webpack(webpackConfig);
 
app.use(express.static(__dirname + '/'));
 
app.use(webpackDevMiddleware(compiler, {
  hot: true,
  filename: 'bundle.js',
  publicPath: '/',
  stats: {
    colors: true,
  },
  historyApiFallback: true,
}));
 
/*const server = app.listen(3000, function() {
  const host = server.address().address;
  const port = server.address().port;
  console.log(server);
  console.log('Example app listening at http://%s:%s', host, port);
});
*/

var port = 8080;
app.listen(port);

console.log("Example app listening at http://localhost:"+port);

You will create index.html as your first web page. Express is configured to serve all the files in that folder.
Below is the index.html code for our simple react application

<html>
<head>
  <script src="./bundle.js" ></script> 
</head>
<body>
  Hello World
</body>
</html>

Try the Server
Run the npm start command in the terminal which will show you the localhost url with port number like http://localhost:8080
You should see Hello World on the screen and Hello World in the developer console.
React
In this step you’ll add the React npm package and one simple component.

npm install --save react react-dom

Add the below script to counter.js

import React from 'react';
 
/**
 * A counter button: tap the button to increase the count.
 */
class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
  
 
  render() {
    var self = this;
    return (
      <button onClick={() => {
          this.setState({ count: this.state.count + 1 });
        }}
      >
        Count: {this.state.count}
      </button>
    );
  }
}
export default Counter;

and also update the main.js file with the below code.

console.log('Hello World!');
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './counter';


 
document.addEventListener('DOMContentLoaded', function() {
  ReactDOM.render(
    React.createElement(Counter),
    document.getElementById('mount')
  );
});

then finally update the index.html with the below code

Hello World!

That’s it. if this is not working you might miss something from this tutorial. No worries you can still download this React sample from the below link. After downloading all you need to do is, go to the folder where extract in terminal and run the following commands one by one.

 npm install
 npm start

if everything works fine to access the url in the browser, you will see the build success message in the terminal as well.

Create react application sample

Download

You may also like...