/namaste-react

Namaste React

Primary LanguageJavaScript

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 💖