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.
| 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 | C | Chapter-09 Live |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent