React JS prerequisites & getting started

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

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

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

• Global HTTP request and response

• Building Flexible Axios Clients

7 React UI Libraries

7.1 Ant Design

npm install antd

Documentation Links

• https://ant.design/

• https://ant.design/docs/react/introduce

7.2 Blueprint

yarn add @blueprintjs/core react react-dom

Documentation Links

https://blueprintjs.com/

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

https://material-ui.com/

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

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

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

9. Localization Libraries

Moment JS

npm add moment

https://momentjs.com/

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

10. Crypto Libraries

Crypto JS

npm install crypto-js

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

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

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