└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # `Learn React With Harshi 👩🏻‍💻 Series` 2 | Documenting my learning journey of [Namaste React Live Course](https://learn.namastedev.com/) conducted by Akshay Saini 3 | 4 | 5 | ## Namaste React Project Setup Cheatsheet 6 | 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. 7 | 8 | ### Important Note 9 | 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](https://github.com/Learn-React-With-Harshi/chapter-14-machine-coding-interview/blob/main/setup.md) 10 | 11 | 12 | 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. 13 | 14 | ### Tech Stack: 15 | - UI Framwork : React 16 | - CSS Framework : Tailwind CSS 17 | - Routing : React Router DOM 18 | - State Management : React-Redux & Redux Toolkit 19 | - Web Bundler : Parcel 20 | - Testing Frameowrk : React Testing Library & Jest 21 | 22 | ### Table of contents: 23 | - [GitHub Repository](#github-repository) 24 | - [Basic Files](#basic-files) 25 | - [NPM - Initialize and Install Packages](#npm-initialize-and-install-packages) 26 | - [Init](#init) 27 | - [Install Parcel](#install-parcel) 28 | - [Install React](#install-react) 29 | - [Install React DOM](#install-react-dom) 30 | - [Install React Router DOM](#install-react-router-dom) 31 | - [.gitignore](#gitignore) 32 | - [.babelrc](#babelrc) 33 | - [config.js](#config.js) 34 | - [Command Scripts](#command-scripts) 35 | - [Tailwind CSS](#tailwind-css) 36 | - [Redux](#redux) 37 | - [Jest and React Testing Library](#jest-and-react-testing-library) 38 | 39 | 40 | 41 | ### GitHub Repository: 42 | 1. Create a new public Github Repository in `https://github.com/` 43 | 2. Click on `code` dropdown and copy the link to your repo. 44 | 3. Clone the repo into local machine. 45 | ``` 46 | git clone "https://github.com/Learn-React-With-Harshi/Namaste-React.git" 47 | ``` 48 | 49 | 4. Go to the project directory 50 | ``` 51 | cd Namaste-React 52 | ``` 53 | ### Basic Files: 54 | 1. Open Namaste-React folder in vs code and create basic files like `index.html`, `app.js` and `index.css` 55 | 2. Write basic code, add link and script (important: type="module" for app.js) in html file. 56 | ### NPM - Initialize and Install Packages: 57 | 58 | #### Init: 59 | ``` 60 | npm init 61 | ``` 62 | #### Install Parcel: 63 | ``` 64 | npm install -D parcel 65 | ``` 66 | #### Install React: 67 | ``` 68 | npm install react 69 | ``` 70 | #### Install React DOM: 71 | ``` 72 | npm install react-dom 73 | ``` 74 | #### Install React Router DOM: 75 | ``` 76 | npm install react-router-dom 77 | ``` 78 | ### .gitignore: 79 | 80 | Create .gitignore file in the project directory and add the following 81 | 82 | ``` 83 | #Node modules 84 | node_modules 85 | 86 | #Parcel 87 | .parcel-cache 88 | /dist 89 | 90 | .DS_Store 91 | ``` 92 | ### .babelrc: 93 | Create .gitignore file in the project directory and add the following 94 | ``` 95 | { 96 | "plugins": [ [ 97 | "transform-remove-console", 98 | { "exclude": [ "error", "warn" , "log"] } 99 | ] 100 | ] 101 | } 102 | ``` 103 | ### config.js: 104 | 105 | Create .gitignore file in the project directory and add the required config 106 | 107 | ### Command Scripts: 108 | 109 | Modify the scripts in `package.json` 110 | ```json 111 | "scripts": { 112 | "test": "jest", 113 | "start": "parcel index.html", 114 | "build": "parcel build index.html" 115 | } 116 | ``` 117 | ### Tailwind CSS: 118 | 119 | 1. Install tailwindcss via npm, and `tailwind.config.js` file will be created on executing init command. 120 | 121 | ``` 122 | npm install -D tailwindcss 123 | npx tailwindcss init 124 | ``` 125 | 126 | 2. Configure template paths 127 | 128 | Add the paths to all of your template files in your tailwind.config.js file. 129 | ``` 130 | module.exports = { 131 | content: ["./src/**/*.{html,js}"], 132 | theme: { 133 | extend: {}, 134 | }, 135 | plugins: [], 136 | } 137 | ``` 138 | 139 | 3. Add the Tailwind directives to your CSS 140 | 141 | Add the @tailwind directives for each of Tailwind’s layers to your main CSS file. 142 | ``` 143 | @tailwind base; 144 | @tailwind components; 145 | @tailwind utilities; 146 | ``` 147 | 4. Create `.postcssrc` file in project directory and add the following 148 | 149 | { 150 | "plugins": { 151 | "tailwindcss": {} 152 | } 153 | } 154 | 155 | ### Redux: 156 | 157 | 1. Install Redux Toolkit & React-Redux 158 | ``` 159 | npm install @reduxjs/toolkit 160 | npm install react-redux 161 | ``` 162 | 163 | ### Jest and React Testing Library: 164 | 1. Install React & Jest DOM from React Testing library 165 | ``` 166 | npm install --save-dev @testing-library/react @testing-library/jest-dom 167 | ``` 168 | 169 | 2. Install Jest & JS-DOM Environment 170 | ``` 171 | npm install -D jest jest-environment-jsdom 172 | ``` 173 | 174 | 3. Configure Jest & this creates `jest.config.js` 175 | ``` 176 | npx jest --init 177 | ``` 178 | - Typescript -> N 179 | - environment -> jsdom (broswer-like) 180 | - code coverage -> y 181 | - provider for coverage -> babel 182 | - automatically clear before test -> y 183 | 184 | 4. Include following scripts to package.json 185 | ``` 186 | "test" : "jest", 187 | "watch-test" : "test --watch" 188 | ``` 189 | 190 | 5. Create new folder `__tests__` under `src/components` 191 | 6. Install Babel 192 | ``` 193 | npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react 194 | ``` 195 | 196 | 7. Add the following to Configure babel -> .babelrc file 197 | ``` 198 | 199 | "presets" : [["@babel/preset-env", {"targets": {"node": "current"}}], 200 | ["@babel/preset-react", {"runtime" : "automatic"}]] 201 | } 202 | ``` 203 | 204 | 9. Add /coverage in .gitignore file 205 | 206 | 207 | --------------------------------------------------------------------------------