update content

deltanode · Mar 12, 2023 · 69c58b9 · 69c58b9
1 parent 41ee1ac
commit 69c58b9
Show file tree

Hide file tree

Showing 21 changed files with 423 additions and 81 deletions.
diff --git a/04-coding-in-react/README.md b/04-coding-in-react/README.md
@@ -124,7 +124,7 @@ In React 16, react launched new reconcilliation engine know as React Fiber.
 
 <!-- *******************************-->
 <details>
-<summary>Why do we need `keys` in React?</summary><br>
+<summary>Why do we need `keys` in React? When do we need keys in React?</summary><br>
 <blockquote>
 
 - When we have multiple childen with same Tag name, then its difficult for react to figure out the sequence in which the new child is added. So, it re-render the complete node.

diff --git a/05-lets-get-hooked/README.md b/05-lets-get-hooked/README.md
@@ -6,14 +6,42 @@ Today was the continuation of previous chapter where we started to develop a foo
 
 - [Handwritten [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2005%20-%20Let's%20get%20Hooked!%20-%20HandWritten%20Notes.pdf)
 - [Digital [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2005%20-%20Let's%20get%20Hooked!%20-%20Digital%20Notes.pdf)
-- [Github [Link]](https://github.com/deltanode/react-playground/blob/main/05-lets-get-hooked/notes.md)
+- [Notes.md](https://github.com/deltanode/react-playground/blob/main/05-lets-get-hooked/notes.md)
 
 ## Theory:
 
-- What is the `difference` between `Named export`, `Default export`, and `* as export`?
-- What is the `importance` of `config.js` file?
-- What are `React Hooks`?
-- Why do we need `useState Hook`?
+<!-- *******************************-->
+<details>
+<summary>What is the `difference` between `Named export`, `Default export`, and `* as export`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is the `importance` of `config.js` file?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What are `React Hooks`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>Why do we need `useState Hook`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+<!-- *******************************-->
 
 ## Coding:
 

diff --git a/05-lets-get-hooked/notes.md b/05-lets-get-hooked/notes.md
@@ -1,4 +1,4 @@
-### Class notes `Chapter-05 Let's get hooked`
+### `Chapter-05 Let's get hooked`
 
 1. File structure in React
 

diff --git a/06-exploring-the-world/README.md b/06-exploring-the-world/README.md
@@ -6,21 +6,98 @@ Until last chapter, we were using mock data to render the UI. In this chapter, w
 
 - [Handwritten [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2006%20-%20Exploring%20the%20world%20-%20Handwritten%20Notes.pdf)
 - [Digital [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2006%20-%20Exploring%20the%20world%20-%20Digital%20Notes.pdf)
-- [Github [Link]](https://github.com/deltanode/react-playground/blob/main/06-exploring-the-world/notes.md)
+- [Notes.md](https://github.com/deltanode/react-playground/blob/main/06-exploring-the-world/notes.md)
 
 ## Theory:
 
-- What is `Microservice`?
-- What is `Monolith architecture`?
-- What is the `difference` between `Monolith and Microservice?
-- Why do we need a `useEffect Hook`?
-- What is `Optional Chaining`?
-- What is `Shimmer UI`?
-- What is the `difference` between `JS expression and JS statement`?
-- What is `Conditional Rendering`? explain with a code example.
-- What is `CORS`?
-- What is `async and await`?
-- What is the use of `const json = await data.json()`; in `getRestaurants()`?
+<!-- *******************************-->
+<details>
+<summary>What is `Microservice`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `Monolith architecture`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is the `difference` between `Monolith and Microservice?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>Why do we need a `useEffect Hook`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `Optional Chaining`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `Shimmer UI`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is the `difference` between `JS expression and JS statement`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `Conditional Rendering`? explain with a code example.</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `CORS`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `async and await`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is the use of `const json = await data.json()`; in `getRestaurants()`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+<!-- *******************************-->
 
 ## Coding:
 

diff --git a/06-exploring-the-world/notes.md b/06-exploring-the-world/notes.md
@@ -1,4 +1,4 @@
-### Class notes `Chapter - 06 Exploring the world`
+### `Chapter - 06 Exploring the world`
 
 Revising last chapter - useState() and Hooks
 

diff --git a/07-finding-the-path/README.md b/07-finding-the-path/README.md
@@ -6,15 +6,50 @@ Today we started with the recap of previous chapter's important concepts like us
 
 - [Handwritten [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2007%20-%20Finding%20the%20Path%20%20-%20HandWritten%20Notes.pdf)
 - [Digital [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2007%20-%20Finding%20the%20Path%20-%20Digital%20Notes.pdf)
-- [Github [Link]](https://github.com/deltanode/react-playground/blob/main/07-finding-the-path/notes.md)
+- [Notes.md](https://github.com/deltanode/react-playground/blob/main/07-finding-the-path/notes.md)
 
 ## Theory:
 
-- What are various ways to `add images` into our App? Explain with `code examples`.
-- What would happen if we do `console.log(useState())`?
-- How will `useEffect` behave if we `don't add` a `dependency array`?
-- What is `SPA`?
-- What is the `difference` between `Client Side Routing` and `Server Side Routing`?
+<!-- *******************************-->
+<details>
+<summary>What are various ways to `add images` into our App? Explain with `code examples`.</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What would happen if we do `console.log(useState())`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>How will `useEffect` behave if we `don't add` a `dependency array`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `SPA`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is the `difference` between `Client Side Routing` and `Server Side Routing`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+<!-- *******************************-->
 
 ## Coding:
 

diff --git a/07-finding-the-path/notes.md b/07-finding-the-path/notes.md
@@ -1,4 +1,4 @@
-### Class notes `Chapter-07 Finding the path`
+### `Chapter-07 Finding the path`
 
 ## useEffect(callback, [dependencies])
 

diff --git a/08-Lets-get-classy/README.md b/08-Lets-get-classy/README.md
@@ -6,17 +6,66 @@ Today, it was all about understanding the creating class-based component, it's d
 
 - [Handwritten [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2008%20-%20Let's%20get%20Classy%20%20-%20HandWritten%20Notes.pdf)
 - [Digital [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2008%20-%20Let's%20get%20Classy%20-%20Digital%20Notes.pdf)
-- [Github [Link]](https://github.com/deltanode/react-playground/blob/main/08-Lets-get-classy/notes.md)
+- [Notes.md](https://github.com/deltanode/react-playground/blob/main/08-Lets-get-classy/notes.md)
 
 ## Theory:
 
-- How do you create `Nested Routes react-router-dom` configuration?
-- Read about `createHashRouter`, `createMemoryRouter` from React Router docs.
-- What is the `order of life cycle method calls` in `Class Based Components`?
-- Why do we use `componentDidMount`?
-- Why do we use `componentWillUnmount`? Show with `example`.
-- (Research) Why do we use `super(props)` in `constructor`?
-- (Research) Why `can't we have` the `callback function` of `useEffect async`?
+<!-- *******************************-->
+<details>
+<summary>How do you create `Nested Routes react-router-dom` configuration?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>Read about `createHashRouter`, `createMemoryRouter` from React Router docs.</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is the `order of life cycle method calls` in `Class Based Components`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>Why do we use `componentDidMount`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>Why do we use `componentWillUnmount`? Show with `example`.</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>(Research) Why do we use `super(props)` in `constructor`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>(Research) Why `can't we have` the `callback function` of `useEffect async`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+<!-- *******************************-->
 
 ## Coding:
 

diff --git a/08-Lets-get-classy/notes.md b/08-Lets-get-classy/notes.md
@@ -1,4 +1,4 @@
-### Class notes `Chapter-08 Let's get Classy`
+### `Chapter-08 Let's get Classy`
 
 Class-based Components
 

diff --git a/09-optimizing-our-app/README.md b/09-optimizing-our-app/README.md
@@ -6,15 +6,50 @@ The first half of the chapter was about Why to use, How to create, Where to crea
 
 - [Handwritten [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2009%20-%20Optimizing%20our%20App%20%20-%20HandWritten%20Notes.pdf)
 - [Digital [PDF]](https://github.com/deltanode/react-playground/blob/main/00-React-Notes/Chapter%2009%20-%20Optimizing%20our%20App%20-%20Digital%20Notes.pdf)
-- [Github [Link]](https://github.com/deltanode/react-playground/blob/main/09-optimizing-our-app/notes.md)
+- [Notes.md](https://github.com/deltanode/react-playground/blob/main/09-optimizing-our-app/notes.md)
 
 ## Theory:
 
-- When and why do we need `lazy()`?
-- What is `suspense`?
-- Why we got this `error`: A component was suspended while responding to `synchronous input`. This will cause the `UI` to be replaced with a `loading indicator`. To `fix this`, `updates that suspend` should be wrapped with `start transition`? How does `suspense fix` this error?
-- `Advantages and Disadvantages` of using this `code splitting pattern`?
-- When `do we and why do we need suspense`?
+<!-- *******************************-->
+<details>
+<summary>When and why do we need `lazy()`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>What is `suspense`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>Why we got this `error`: A component was suspended while responding to `synchronous input`. This will cause the `UI` to be replaced with a `loading indicator`. To `fix this`, `updates that suspend` should be wrapped with `start transition`? How does `suspense fix` this error?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>`Advantages and Disadvantages` of using this `code splitting pattern`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+
+<!-- *******************************-->
+<details>
+<summary>When `do we and why do we need suspense`?</summary><br>
+<blockquote>
+
+</blockquote><br>
+</details>
+<!-- *******************************-->
 
 ## Coding:
 

diff --git a/09-optimizing-our-app/notes.md b/09-optimizing-our-app/notes.md
@@ -1,4 +1,4 @@
-### Class notes `Chapter - 09 Optimizing our app`
+### `Chapter - 09 Optimizing our app`
 
 We use hooks everyday in our code in functional component