A ReactJS biolerplate
-
Technologies:
- ReactJS - Main UI Library
- Javascript - Scripting language
- HTML - Structuring the webpages
- CSS - Styling the webpages
- SAAS (SCSS) - Preprocessor for CSS
- Redux Toolkit - State management
- React Query - Server query/state
- React Testing Library - Test cases
- ESLint - Linter
- Husky - Pre commit hooks
-
Tools:
- VS Code - IDE
- GitBash - Version Control (emulation layer for Git command line interface on windows)
- Chrome - Web Browser (others can also be used like Chrome, Safari, Firefox)
Install NodeJS from the official website and verify if its installed by:
node --version
In the project directory, you can run:
npm install
This will install all the dev dependencies defined in the package.json
file. Then run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
To launch the test runner in the interactive watch mode, use:
npm test
See the section about running tests for more information.
To build the app for production, use:
npm run build
It builds the app for production to the build
folder and 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!
See the section about deployment for more information.
In order to use the SAAS/SCSS, we need to install node sass by:
npm install node-sass
To setup linter i.e. ESlint, we need to first install it if its not already installed by
npm install -g eslint
Now initialize ESlint in the app by running:
eslint --init
Now install husky to run pre commit, pre push etc. hooks by:
npm install husky --save-dev
Then in package.json
-> scripts
, add
...
"prepare": "husky install",
Then run it by:
npm run prepare
Now for adding a pre commit hook, run:
npx husky add .husky/pre-commit "npm test"
This will create a .husky
directory with a pre-commit file where we can add the scripts which we want to run before a commit, we can add lint scripts as well
npm run lint
In package.json
, update the scripts with:
...
"test": "CI=true react-scripts test",
"lint": "eslint ./src --ext .js,.jsx",
...
Now add all the files and commit, the pre commits will run and will only allow to commit if they are passed
To install redux toolkit, run:
npm install @reduxjs/toolkit react-redux
Add and configure the store
, rootReducer
and also wrap the App
component in Provider
to access the store
Add the type checking library
npm install --save prop-types
Add redux logger
npm i --save redux-logger
now use this in store's configureStore
Add React Query for Async state management
npm i react-query
Now wrap app into QueryClientProvider
and provide client
Add react router dom for routing
npm install react-router-dom