Documenting my learning journey of Namaste React Live Course conducted by Akshay Saini
Following are the steps that we followed (in namaste react course) while developing a React App. You don't have to jump to multiple websites to copy setup command. Simply, you can refer to this cheatsheet for commands & configuration steps and easily create any new React Application.
You can follow these steps when you want to learn React in depth and want to know what happens behind the scene of create-react-app. But when you are in time constraint to develop a react app in situations like machine coding round of interview, it's advisable to use create-react-app package which does most of the below steps in less time. If you want to know how to setup the react application with create-react-app, check out Setting Up React Application using CRA
Let's set up the project in quick time by following the steps below & spend all the time that we have for developing the features.
- UI Framwork : React
- CSS Framework : Tailwind CSS
- Routing : React Router DOM
- State Management : React-Redux & Redux Toolkit
- Web Bundler : Parcel
- Testing Frameowrk : React Testing Library & Jest
- GitHub Repository
- Basic Files
- NPM - Initialize and Install Packages
- .gitignore
- .babelrc
- config.js
- Command Scripts
- Tailwind CSS
- Redux
- Jest and React Testing Library
- Create a new public Github Repository in
https://github.com/
- Click on
code
dropdown and copy the link to your repo. - Clone the repo into local machine.
git clone "https://github.com/Learn-React-With-Harshi/Namaste-React.git"
- Go to the project directory
cd Namaste-React
- Open Namaste-React folder in vs code and create basic files like
index.html
,app.js
andindex.css
- Write basic code, add link and script (important: type="module" for app.js) in html file.
npm init
npm install -D parcel
npm install react
npm install react-dom
npm install react-router-dom
Create .gitignore file in the project directory and add the following
#Node modules
node_modules
#Parcel
.parcel-cache
/dist
.DS_Store
Create .gitignore file in the project directory and add the following
{
"plugins": [ [
"transform-remove-console",
{ "exclude": [ "error", "warn" , "log"] }
]
]
}
Create .gitignore file in the project directory and add the required config
Modify the scripts in package.json
"scripts": {
"test": "jest",
"start": "parcel index.html",
"build": "parcel build index.html"
}
- Install tailwindcss via npm, and
tailwind.config.js
file will be created on executing init command.
npm install -D tailwindcss
npx tailwindcss init
- Configure template paths
Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- Add the Tailwind directives to your CSS
Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;
- Create
.postcssrc
file in project directory and add the following
{ "plugins": { "tailwindcss": {} } }
- Install Redux Toolkit & React-Redux
npm install @reduxjs/toolkit
npm install react-redux
- Install React & Jest DOM from React Testing library
npm install --save-dev @testing-library/react @testing-library/jest-dom
- Install Jest & JS-DOM Environment
npm install -D jest jest-environment-jsdom
- Configure Jest & this creates
jest.config.js
npx jest --init
- Typescript -> N
- environment -> jsdom (broswer-like)
- code coverage -> y
- provider for coverage -> babel
- automatically clear before test -> y
- Include following scripts to package.json
"test" : "jest",
"watch-test" : "test --watch"
- Create new folder
__tests__
undersrc/components
- Install Babel
npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react
- Add the following to Configure babel -> .babelrc file
"presets" : [["@babel/preset-env", {"targets": {"node": "current"}}],
["@babel/preset-react", {"runtime" : "automatic"}]]
}
- Add /coverage in .gitignore file