React Getting Started & Useful Links

1. Required Softwares


1. NodeJS

Command

sudo apt install nodejs
sudo apt install npm

Download Link

https://nodejs.org/en/

2. Visual Studio Code

Download Link

https://code.visualstudio.com/

2. Version Check Node and NPM

TO CHECK NODE VERSION

node -v

TO CHECK NPM VERSION

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
    • 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

https://reactjs.org/docs/faq-structure.html

5. Create Router & Http Request Client

Router

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

https://blueprintjs.com/

https://blueprintjs.com/docs/#blueprint/getting-started


6.3 React Bootstrap

npm install react-bootstrap bootstrap

Documentation Links

https://react-bootstrap.github.io/

https://react-bootstrap.github.io/components/forms/


6.4 Material UI

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Documentation Links

https://material-ui.com/

https://material-ui.com/getting-started/installation/

7. React Form Libraries


7.1 React Bootstrap Form

npm install react-bootstrap bootstrap

https://react-bootstrap.github.io/components/forms/


7.2 React Bootstrap Formik

npm add formik

https://jaredpalmer.com/formik/docs/overview

8. Localization Libraries

Moment JS

npm add moment

https://momentjs.com/

https://www.npmjs.com/package/react-moment

9. Crypto Libraries

Crypto JS

npm install crypto-js

https://www.npmjs.com/package/crypto-js

10. Other useful Libraries


10.1 Chart JS

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

https://github.com/jerairrest/react-chartjs-2


10.2 React Widgets

npm install react-widgets --save

https://jquense.github.io/react-widgets/