Documenting my learning journey of Namaste React Live Course conducted by Akshay Saini
This is the index page for all the chapters that we will be learning in this course. Following table contains link to each chapter, its summary and the live demo of the respective chapter. Have a look at the live demo of each chapter to see how my learning in react has progressed.
Before checking the chapters that we covered, if you need the cheatsheet to create the React App from scratch (steps that we followed in Namaste React Course), check out React Project Setup Cheatsheet or if you want to setup the react app using create-react-app, check out Setup using CRA
| Chapter | Summary | Demo |
|---|---|---|
| Chapter-01 Inception | Chapter-01 was the first session of the Namaste React Live course. The whole class was excited about the beginning of a great course. We started learning react from scratch. Environment setup was clearly explained. Started with creating a simple Hello world program . First, using only html, then we tried to implement the same through javascript. Finally, we created a simple hello world program using React. Everything was done without installing any package. Unlike other courses which starts with create-react-app as first session, we tried writing the react code from zero. It was a true inception session for tranforming from ZERO to HERO in React. | Chapter-01 Live |
| Chapter-02 Igniting React App | Chapter-02 was about creating production-ready react app from scratch without using create-react-app. Production-ready app on the second day of a course ? sounds interesting right !!? The concept of bundlers (Parcel) was explained in detail. We all assume React is the one superpower that makes the application faster, though it is partially right, the major credit goes to the other packages/helper utilities (Bundler) for speeding up the application, optimizing the code, improving the performance and lots more. Find the other interesting powerful featured of bundler in class notes. | Chapter-02 Live |
| Chapter-03 Laying the foundation | Chapter-03 started with revising the previous sessions and doubts raised in the previous sessions were addressed. Babel/Polyfills and their usage were explained. Scripts were written for starting and building the app. Steps to install a npm package were walked through. JSX vs React.createElement() vs Components were discussed in depth. It was a truely knowledge heavy session with lot of new concepts and keywords. | Chapter-03 Live |
| Chapter-04 Coding in React | Chapter-04 was an interesting session where we started to develop a config-driven UI for food ordering platform. First, we created LLD of the web application, continued working on creating layouts, components and data manipulation from mock data. Concepts of props(properties), virtual DOM, importance of unique key were discussed. Find my version of detailed explanation of these concepts in theory-assignment.md | Chapter-04 Live |
| Chapter-05 Let's get hooked | Chapter-05 was the continuation of previous chapter where we started to develop a food delivery app. In this chapter, we re-organised the repo structure, understood the importance of clean coding principles, different ways of exporting and importing modules(components). Then, the hero of this chapter Hooks got everyone hooked to their screen. It was indeed a 3 hours knowledge heavy session where foundation of hooks was laid. We used hooks to filter the restaurants based on search input. Find my version of detailed explanation of these concepts in theory-assignment.md. | Chapter-05 Live |
| Chapter-06 Exploring the world | Until last chapter, we were using mock data to render the UI. In this chapter, we learnt about working with real time data from the Web (Our world basically). Then, we covered different types of System Architectures, different approaches to fetch API and render in UI. Today's important concept was one of the basic React Hooks useEffect. We tried using useEffect in all combinations and understanding it in depth. Importance of conditional rendering and Shimmer in UI were explained. | Chapter-06 Live |
| Chapter-07 Finding the path | Chapter 07 started with the recap of previous chapter's important concepts like useEffect(), do's and don't while creating components and state. As the name suggests, this chapter is about creating routes to different pages of the application and how to navigate through them. We used a library called react-router-dom for enabling the routes and providing them to RouterProvider to render them in the root. Error component for the invalid path were explaned. Importance of SPA (Single Page Application) and different types of routing were explained. Other routing concepts like nested routing (loading children into the parent outlet), dynamic routing (passing dynamic param in the path) were implemented. Find my version of detailed explanation of these concepts in theory-assignment.md. InstaFood(Version 3.0) app also had lot of enhancements in this chapter, like menu page was created for each restaurant, navigation to various pages of the application is done. Check coding-assignment.md for all the features that I implemented in this chapter. | Chapter-07 Live |
| Chapter-08 Let's get Classy | Chapter-08 was all about understanding the creating class-based component, it's different lifecycle methods, whats happening under the hood. It was an amazing session as we can easily grasp the concept since we already know how component are rendered in react using functional components. We even discussed about various possible interview questions. | Chapter-08 Live |
| Chapter-09 Optimizing our App | The first half of the chapter was about Why to use, How to create, Where to create and When to use Custom Hooks were explained. Difference between helper functions and custom hooks were discussed with examples. We created a helper function (filtering logic) and two custom hooks (check network connection and fetch API data). The second half of the chapter was about optimizing our app using lazy loading/on demand loading mechanism. | Chapter-09 Live |
| Chapter-10 What is seen is sold | Chapter-10 is all about UI Layer of our app. The look and feel of the app attracts the user. Various ways of writing css (styling) is discussed in this chapter. Recreated the whole app using Tailwind CSS. | Chapter-10 Live |
| Chapter-11 What is seen is sold | Chapter-11 is about Data layer of the app. Consider data as if it's oil, use it wisely because that is what powers the engine, and its expensive as well. There were discussion on what is data in React, how to pass data in the component hierarchy, from parent to child, child to siblings, child to parent, and finally throughout the app. | Chapter-11 Live |
| Chapter-12 Let's build our store | Chapter-12 is all about handling data using external state management library Redux. We discussed the problems with other ways of data management like Props drilling and Context API. Importance of Redux, Redux Toolkit vs React-Redux and step by step configuration and implementation of React Redux were done in this chapter. |
Chapter-12 Live |
| Chapter-13 Time for the test | Chapter-13 is all about testing the application. In this chapter, different types of testing and testing frameworks were discussed. Detailed explanation and hands-on on testing frameworks jest and react-testing-library were done. |
Chapter-13 Live |
| Chapter-14 Machine Coding Interview | This chapter helps us to prepare for machine coding round of interview. How to practice, plan and develop an app in the Live Coding interview. | Chapter-14 Live |
| Chapter-15 Building Advanced Features | This chapter is the continuation of the app that we discussed in last chapter. In the first half, we implemented advanced features like searching, how to improve app performance using debouncing, caching and Integration. Second half, we understood how to implement nested comments features. | Chapter-15 Live |