React-app1-kore NPM

Getting Started with project

This project was created with webpack bundler. :muscle:

Available Scripts

:point_right: In the project directory, you can run:

`npm test`

Runs the jest tests for your project and generates a coverage report.

While running, the testing library automatically picks up files with extensions .test.jsx or .test.js present in the project.

The coverage report will be available under /coverage directory which gets created/updated every time npm test command is executed.

`npm start`

Runs the app in the development mode. Open http://localhost:8080 :eyes: to view it in your browser.

The page will reload when you make changes.

`npm run lint`

Launches the eslint which highlights errors.

`npm run lint:fix`

Launches the eslint which highlights and fixes fixable errors.

`npm run build`

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

`npm run start-prod`

This project is powered with express server as backend, if you want to take a glimpse of what your project might look like in actual production build when served.

You can go for start-prod command that'll build your project first, and will utillise express server to serve the static assets generated by the build command.

Open http://localhost:3030 :eyes: to view it in your browser.

Project Structure

On high level, there are two directories : 1. /public 2. /src

public directory should contain any static files, like images, logos etc. src folder holds the main source code of the application. We'll continue to discuss more on src folder structure.

/public\ |\ | /images\ |\ | /templates\ |\ /src\ |\ | /components\ | |\ | | /common\ | |\ | | /router\ | |\ | | /views\ |\ | /redux\ | |\ | | /reducers\ | | |\ | | | /slices\ | |\ | | /store\ |\ |__ /utils

Components

The components directory holds various application components, mainly divided to commonly used components under /common sub-directory. The main router of the application is kept under /router sub directory, and lastly, various screens OR views are kept under views sub-directory.

Redux

The application uses redux for state management. All items related to redux like store, reducers and state slices are kept under redux directory.

Utilities

For commonly used items, such as application constants, common functions and re-usable hooks etc. , a space has been provided under utils.

Other Information

Code Splitting

You can improve performance of your react application by using lazy loading techniques, that'll help the bundler in doing code splitting javascript bundle into chunks.