React JS prerequisites & getting started
1. React Js Prerequisites
These skills are mandatory for learn React JS
HTML
CSS
Javascript
JSX
Class & Functions
Node & NPM
CLI & Git
2. Required Softwares
2.1. NodeJS
Command
sudo apt install nodejs
sudo apt install npm
Download Link
2.2. Visual Studio Code
Download Link
3. Version Check Node and NPM
TO CHECK NODE VERSION
node -v
TO CHECK NPM VERSION
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
Reference
6. Create Router & Http Request Client
Router
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
https://blueprintjs.com/docs/#blueprint/getting-started
7.3 React Bootstrap
npm install react-bootstrap bootstrap
Documentation Links
https://react-bootstrap.github.io/
https://react-bootstrap.github.io/components/forms/
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
https://react-bootstrap.github.io/components/forms/
8.2 React Bootstrap Formik
npm add formik
9. Localization Libraries
Moment JS
npm add moment
11. Other useful Libraries
11.1 Chart JS
npm install --save react-chartjs-2 chart.js
https://github.com/jerairrest/react-chartjs-2
11.2 React Widgets
npm install react-widgets --save