Namaste React 🙏

• This repo is based on Namaste React Web Series Course by Akshay Saini founder of NamasteDev.
• In this repository, there are 13 lessons grouped into 13 branches. The lesson details and the corresponding code changes can be viewed by switching branches.
• This main branch contains the complete Swiggy Front-End clone code with testing.
• Follow this blog to build the app step by step (Bonus part is not covered).

🪧 Note

• In this project, I am not using Tailwind CSS. Currently, I am only using basic CSS.

Lesson Topics

📒 Lesson 1 - Inception

• How we worked before React.js came
• ReactJS using React CDN Links
• React and ReactDOM
• React.createElement()

📒 Lesson 2 - Ignite Our App

• Bundlers
• Parcel
• Tree Shaking
• HMR
• NPM
• NPX
• package.json and package-lock.json
• Dependencies vs DevDependencies

📒 Lesson 3 - Laying the foundation

• JSX
• Babel
• React.createElement vs JSX
• Functions Components
• Composing Components

📒 Lesson 4 - Talk is cheap, show me the code!

• VirtualDOM
• Reconciliation
• React Fiber
• Keys in React
• Props
• Config Driven UI
• React.Fragment and <></>
• Intro to Food App clone

📒 Lesson 5 - Let's get Hooked

• Hooks
• useState Hook
• Named Export, Default export and * as export
• File structure
• Filter Functionality

📒 Lesson 6 - Exploring the world

• Monolith and Microservice
• useEffect Hook
• Optional Chaining
• Shimmer UI
• Conditional Rendering
• CORS
• Fetching data from Swiggy's live API
• Search functionality

📒 Lesson 7 - Finding the path

• Routing
• Client Side Routing and Server Side Routing
• SPA
• Various ways to add images into our App

📒 Lesson 8 - Let's get Classy

• Class based components
• React lifecycle methods
• Nested Routes

📒 Lesson 9 - Optimizing our App

• Custom Hooks
• Code Splitting

📒 Lesson 10 - Adding Tailwind CSS to our App

• Tailwind CSS
• tailwind.config.js
• .postcssrc file

📒 Lesson 11 - Data is the new oil

• Prop drilling
• Lifting State Up
• React Context API

📒 Lesson 12 - Let's build our store

• Redux Toolkit
• Context API vs Redux
• Dispatcher
• Reducer
• Slice
• Selector
• Cart Functionality

📒 Lesson 13 - Time for the test

• Types of testing
• React Testing Library
• Jest

🚀 How to use

• Clone this repo

  git clone 'https://github.com/anas-ambalavan/namaste-react.git'
  

• Install dependencies

  cd namaste-react
  

  npm i
  

• Run app

  npm start
  

• To run test cases

  npm run test
  

• If you want to watch tests

  npm run watch-test
  

Happy Coding 💖