Introduction

Project

Atreemo React

React Version

18

Docs & References:

• Approach used: https://www.linkedin.com/pulse/adding-react-your-mvc-site-allan-walker/

• Projet Structure: https://www.xenonstack.com/insights/reactjs-project-structure

• Tag components: https://tag-v4.docs.access-workspace.com/

• React query: https://tanstack.com/query/latest/docs/framework/react/overview

• SignalR : https://www.npmjs.com/package/signalr

• moment : https://momentjs.com/docs/

• react-detect-click-outside : https://www.npmjs.com/package/react-detect-click-outside Used to detect clicks outside the component

• xlsx : used to create excel file and download it: https://www.npmjs.com/package/xlsx

• echarts-for-react : eecharts used in insights: https://www.npmjs.com/package/echarts-for-react

• react-sortable-hoc : https://www.npmjs.com/package/react-sortable-hoc

  -Dev Requirements:https://accessukltd-my.sharepoint.com/:w:/r/personal/slim_kallel_theaccessgroup_com/_layouts/15/Doc.aspx?sourcedoc=%7B910E867E-FC13-4F09-8E3B-37968EE33287%7D&file=Atreemo%20React%20Requirements.docx&fromShare=true&action=default&mobileredirect=true

Initial Steps :

• Open Terminal on the React Project and run these cmds: -npx vsts-npm-auth -config .npmrc (to config Tag components: https://tag-v4.docs.access-workspace.com/docs/getting-started/installation) -npm i (to install the packages listed in package.json) - npm run start (to generate bundels )

To Update Tag version :

npx vsts-npm-auth -config .npmrc -f
npm install @tag/tag-components-react-v4 @tag/tag-icons

To activate Kendo Lisence :

npm install --save @progress/kendo-licensing
npx kendo-ui-license activate

File Stucture:

├─ pages
│  └─── module-a
│       ├─── ModuleA.jsx
│       ├─── assets
│       │    ├─── css
│       │    │    └─── module-a.css
│       │    └─── js
│       │         └─── module-a.js
│       └─── components
│            └─── component-x
│                 ├─── ComponentX.jsx
│                 └─── assets
│                      ├─── css
│                      │    └─── component-x.css
│                      └─── js
│                           └───  component-x.js
└─ service
   ├─── api
   │    └─── module-a
   │         └─── module-a-api.js
   └─── react-query-state
        └─── module-a
             └─── module-a-state.js

• All folder use only lower case characters seperated by (-)
• Component files should begin with an uppercase letter for each word, following the convention like 'ModuleA'.
• Components files have to be jsx
• css and js files use only lower case characters seperated by (-)

you can use these easy to access paths for imports

@components (for example import CustomSpinner from @components/custom-spinner/CustomSpinner instead of ../../../../components/custom-spinner/CustomSpinner)
@services
@assets
@routes
@pages
@config

if you want to add more easy to access paths, you need to update the following files :

webpack.config.dev.js
webpack.config.prod.js
jsconfig.json