React JS prerequisites & getting started

1. React Js Prerequisites

These skills are mandatory for learn React JS

  1. HTML

  2. CSS

  3. Javascript

  4. JSX

  5. Class & Functions

  6. Node & NPM

  7. CLI & Git

2. Required Softwares

2.1. NodeJS


sudo apt install nodejs

sudo apt install npm

Download Link

2.2. Visual Studio Code

Download Link

3. Version Check Node and NPM


node -v


npm -v

4. Create React App

Create App

npx create-react-app appname

Run App

npm start

Add Library

npm add <library-name>

Build App

npm run build

Find Resources in 'build directory'.

5. React App Directory Architecture

  • App Name Root Directory

    • api

      • Generic API, Create API for Each Modules

    • app

      • App Layout, Header, Router, Footer and Auth

    • components

      • Common Components like Alert, Popup and Extra.

    • Config

      • app-config - Const Params like URL

    • Modules

      • Contains Sub Directory for Each Modules

    • pages

      • Common Pages, Like Login and Help

    • session

      • Session Storage & Cache Services

    • utils

      • Common Functions


6. Create Router & Http Request Client


npm add react-router-dom

Http Request Client

npm add axios

6.1 Code Design Http Request Examples

7 React UI Libraries

7.1 Ant Design

npm install antd

Documentation Links

7.2 Blueprint

yarn add @blueprintjs/core react react-dom

Documentation Links

7.3 React Bootstrap

npm install react-bootstrap bootstrap

Documentation Links

7.4 Material UI

// with npm

npm install @material-ui/core

// with yarn

yarn add @material-ui/core

Documentation Links

8. React Form Libraries

8.1 React Bootstrap Form

npm install react-bootstrap bootstrap

8.2 React Bootstrap Formik

npm add formik

9. Localization Libraries

Moment JS

npm add moment

10. Crypto Libraries

Crypto JS

npm install crypto-js

11. Other useful Libraries

11.1 Chart JS

npm install --save react-chartjs-2 chart.js

11.2 React Widgets

npm install react-widgets --save