React Getting Started & Useful Links

1. Required Softwares

1. NodeJS


sudo apt install nodejs

sudo apt install npm

Download Link

2. Visual Studio Code

Download Link

2. Version Check Node and NPM


node -v


npm -v

3. 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'.

4. 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


5. Create Router & Http Request Client


npm add react-router-dom

Http Request Client

npm add axios

5.1 Code Design Http Request Examples

6. React UI Libraries

6.1 Ant Design

npm install antd

Documentation Links

6.2 Blueprint

yarn add @blueprintjs/core react react-dom

Documentation Links

6.3 React Bootstrap

npm install react-bootstrap bootstrap

Documentation Links

6.4 Material UI

// with npm

npm install @material-ui/core

// with yarn

yarn add @material-ui/core

Documentation Links

7. React Form Libraries

7.1 React Bootstrap Form

npm install react-bootstrap bootstrap

7.2 React Bootstrap Formik

npm add formik

8. Localization Libraries

Moment JS

npm add moment

9. Crypto Libraries

Crypto JS

npm install crypto-js

10. Other useful Libraries

10.1 Chart JS

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

10.2 React Widgets

npm install react-widgets --save