Blog

React Js Tutorial

  • (4.0)
  • | 159 Ratings |
  • Last Updated December 28, 2018

Introduction:

ReactJS is one of the trending and most happening UI frameworks. Developers love ReactJS, and It’s being appreciated and well received from the developer community. With no further delay, let’s jump into the details and understand about ReactJS in a detailed manner.

overview

In this article, we will go through the details about ReactJS. ReactJS is a JavaScript library to build customized user interfaces. It is maintained by the Facebook community and also interested individual developers. Let us go through the various sections of this article to understand this.

What is React

React is a flexible JavaScript library that is both declarative and efficient for building new user interfaces. React allows you to design and develop complex UIs from very small and isolated pieces of code referred to as "components". React has a lot of variants in its components offering. React helps with the reusable UI components’ creation. These components present data that alters over time.

Prerequisites to learn ReactJS:

There aren’t many prerequisites to learn ReactJS, but it would be of great help if you have prior experience with HTML and JavaScript. Even if there’s no experience available, then you should be able to get through this with the following:

  • First prerequisite for individuals opting to learn ReactJS is that they should have basic HTML & JavaScript understanding. It is still fine if you don't have any experience with HTML / JavaScript, but should definitely have some experience with any other programming language. If you need a refresher to JavaScript, then you can go through this article.
  • Should be familiar with programming concepts like Objects, Classes, Functions, Arrays, etc.
  • Need to gain understanding on what ES6 code compiles to, for this you can refer Babel REPL
  • React Features:

Let us now look at some of the features that React provides over and above what plain JavaScript doesn’t provide:

JSX:

JSX stands for Java Script eXtension, which is recommended in React development. There is no hard and fast rule that says JSX has to be used in implementation though.

Components:

React applications are all built up using components. There is a definite thought process that has to go in, into React development as the code should be very much maintainable when you get into larger scale projects.

Flux and Unidirectional data flow:

Flux is a design pattern that enforces keeping your data unidirectional. By this pattern, React suggests to keep unidirectional data flow which further makes it very easy to understand your application.

License:

React is licensed under the Facebook Inc. (CC BY 4.0)

React Advantages:

Let us now go through some of the advantages that React brings to the table when used for your application development:

1. Usage of virtual DOM as against regular DOM makes it quicker, since virtual DOM is a lot quicker over the regular DOM.

2. Ability to work on both Client and Server side with the help of other frameworks

3. With the use of component and data patterns, readability is improved way better than other UI frameworks

React Limitations:

Let us now go through some limitations that React poses on its developers for application development:

1. Some developers might feel awkward using inline templates and JSX

2. React only covers View and Model layers of an application, hence making it dependent on some framework or the other to complete the tooling set for development.

Environment Setup

This section of the article discusses about the steps that are required to set-up your environment for React development. You might feel that there are so many steps for this to get started but believe me, this will help you achieve faster development very soon.

You will require Node JS and NPM installed on your system to get the React JS development setup. Node JS is the platform that is required for the React development. After successful installation of both Node JS and NPM, then comes the part of installing React JS which can be done in two ways, and they are as follows:

Installing React JS using Webpack and Babel
Installing React JS using the Create-React-App command

Let us now look at each of these installation processes individually:

Installing React JS using Webpack and Babel:

Webpack is a module bundler which helps managing and loading dependent modules, and compiles them into a single file or bundle. This bundle can be used during your application development using either by the command line interface or by configuring in webpack.config file.

Babel, on the other hand, is a JavaScript compiler and transpiler which helps converting one source code to another format. We are going to use this as this converts all your ES6 features in your code to ES5 format - so that it can be run on all browsers.

With the dependencies for the installation process handled and understood, let us get down to business of (React JS) installation altogether.

  • Create the root (ReactJS Application):

Create a folder naming ReactJS Application on the desktop to install the required softwaresand dependencies. All of this will be done using the command line way.

C:UsersDesktop>mkdir ReactJSApplication
C:UsersDesktop>cd ReactJSApplication

Module creation is controlled by the package.json file, and now that we have created the required folder, let us run the npm init commands to create the package.json file. This will ask for more details further, which can skipped by padding a -y parameter to the previous command.

C:UsersDesktopReactJSApplication>npm init -y

  • Install react and react-dom modules:

Since we need to install ReactJS, we need to install its dom packages using the install react and react-dom npm commands. The packages that we are installing now can be saved to the package.json file by adding the --save option in the commands above.

C:UsersDesktopReactJSApplication>npm install react --save
C:UsersDesktopReactJSApplication>npm install react-dom --save

Instead of two different commands, if you want to combine these commands into a single command - It can be done this way:

C:UsersDesktopReactJSApplication>npm install react react-dom --save

  • Install webpack modules:

After the react and react-dom modules are installed, it is time to install the webpack modules, which can be done in either ways. The installation here requires to install all the three Webpack modules namely webpack, webpack-dev-server and webpack-cli.

C:UsersDesktopReactJSApplication>npm install webpack --save
C:UsersDesktopReactJSApplication>npm install webpack-dev-server --save
C:UsersDesktopReactJSApplication>npm install webpack-cli --save

Or we can install all of these modules at once using just this single command as shown below:

C:UsersDesktopReactJSApplication>npm install webpack webpack-dev-server webpack-cli --save

  • Install Babel modules:

After the installation of webpack modules, we need to install all the 5 babel dependencies namely babel-loader, babel-core, babel-preset-dev, html-webpack-plugin and  babel-preset-react. Identify the difference below, as we are going to save these dependencies as only development required dependencies.

C:UsersDesktopReactJSApplication>npm install babel-core --save-dev
C:UsersDesktopReactJSApplication>npm install babel-loader --save-dev
C:UsersDesktopReactJSApplication>npm install babel-preset-dev --save-dev
C:UsersDesktopReactJSApplication>npm install babel-preset-react --save-dev
C:UsersDesktopReactJSApplication>npm install html-webpack-plugin --save-dev

All of these modules can be installed at once using just this in a single command, like the following:

C:UsersDesktopReactJSApplication>npm install babel-core babel-loader babel-preset-dev babel-preset-react html-webpack-plugin --save-dev

  • Create the necessary files:

There is a requirement to create a certain set of files either manually or using the command prompt, which will finally mark the installation process complete. The files that need to be created are shown below:

C:UsersDesktopReactJSApplication>type nul > index.html
C:UsersDesktopReactJSApplication>type nul > App.js
C:UsersDesktopReactJSApplication>type nul > main.js
C:UsersDesktopReactJSApplication>type nul > webpack.config.js
C:UsersDesktopReactJSApplication>type nul > .babelrc

  • Set the Compiler, Server Loaders respectively:

Open the webpack.config.js using Notepad++ or Visual Code, add the following code snippet given below. By this change, we would be setting the webpack entry point as main.js, and output path will be the path where the bundle application will be served, and development port is set to 8001 which can be changed to any port of your choice (but it should be open for use).

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

Once the above change is done, open package.json in Notepad++ or Visual Code and delete the test, echo, and exit 1 entries under the scripts object. This is not required as we wouldn’t be doing any testing in this section after this installation, but add start and build commands instead.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = &#39;index_bundle.js&#39;></script>
   </body>
</html>

App.js is our first React component which will render a simple Hello, World message on successfully starting the React server.

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

We would then require to import this React component and then render this in our root App element, just so that we can watch it on our browser. This change is required in main.js file.

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

A simple thing that one should remember is that whichever component that you as a user want to work with, import it and when you want to use one of the created components - you would want to export and import in the file where you want and then  use. For such a thing to happen, the following entry should go and sit in the .babelrc file that we created sometime back.

 

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

Running the React Server:

The steps until now should ideally complete the installation of React on your system and for us to test it, we need to start the React server using this command:

C:UsersDesktopReactJSApplication>npm start

This shows the port that we used to open in your favorite browser, and once when we open, it shows something similar to the following (which confirms your React setup is all done without any issues):

React JS

If you want to generate the bundle file, then you will have to execute the build command as like this (this will generate the bundle under the bundle folder of the installation directory):

C:UsersDesktopReactJSApplication>npm run build

React JS

  • Install via the create-react-app command:

React can also be installed using the create-react-app command which is far more easy than what we have seen earlier (with Webpack and Babel dependencies). Let us dig into the installation process now:

  • Install the create-react-app package:

The installation process doesn’t change much when it comes with npm, take a look at the command below:

C:UsersDesktop>npx create-react-app myApplication

  • Delete the source files created in the step above:

Once the command above is executed, it would create a bunch of source files with some default implementation. These auto generated files can be deleted in this step and the next step we will add our own custom implementation to test this setup process.

C:UsersDesktop>cd myApplication/src
C:UsersDesktopmyApplicationsrc>del *
C:UsersDesktopmyApplicationsrc*, Are you sure (Y/N)? Y

  • Add custom source files:

Once you have deleted the files as mentioned in the step above, you’ll have to recreate these two files namely index.css and index.js in the source folder following the commands below:

C:UsersDesktopmyApplicationsrc>type nul > index.css
C:UsersDesktopmyApplicationsrc>type nul > index.js

After the files are created, replace the content in the file index.js to the following:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Execute this project:

You can now execute this project using just the run command (npm start)

Subscribe For Free Demo

Free Demo for Corporate & Online Trainings.


DMCA.com Protection Status