From 69c58b9011ceecb29ce96a215b970dc1903f8e4d Mon Sep 17 00:00:00 2001 From: Yogesh Date: Sun, 12 Mar 2023 19:42:07 +0530 Subject: [PATCH] update content --- 04-coding-in-react/README.md | 2 +- 05-lets-get-hooked/README.md | 38 ++++++++-- 05-lets-get-hooked/notes.md | 2 +- 06-exploring-the-world/README.md | 101 ++++++++++++++++++++++--- 06-exploring-the-world/notes.md | 2 +- 07-finding-the-path/README.md | 47 ++++++++++-- 07-finding-the-path/notes.md | 2 +- 08-Lets-get-classy/README.md | 65 ++++++++++++++-- 08-Lets-get-classy/notes.md | 2 +- 09-optimizing-our-app/README.md | 47 ++++++++++-- 09-optimizing-our-app/notes.md | 2 +- 10-what-is-seen-is-sold/README.md | 40 +++++++--- 10-what-is-seen-is-sold/notes.md | 2 +- 11-data-is-the-new-oil/README.md | 38 ++++++++-- 11-data-is-the-new-oil/notes.md | 2 +- 12-lets-build-our-store/README.md | 65 +++++++++++++--- 12-lets-build-our-store/notes.md | 2 +- 13-time-for-the-test/README.md | 39 ++++++++-- 13-time-for-the-test/notes.md | 2 +- 14-machine-coding-interview/notes.md | 2 +- 15-building-advanced-features/notes.md | 2 +- 21 files changed, 423 insertions(+), 81 deletions(-) diff --git a/04-coding-in-react/README.md b/04-coding-in-react/README.md index 4ab4d31..dbef8dc 100644 --- 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.
-Why do we need `keys` in React?
+Why do we need `keys` in React? When do we need keys in React?
- 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 index 969c14a..17900be 100644 --- 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`? + +
+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`?
+
+ +

+
+ ## Coding: diff --git a/05-lets-get-hooked/notes.md b/05-lets-get-hooked/notes.md index 112cf19..253d7dc 100644 --- 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 index 7841aeb..d3a37ea 100644 --- 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()`? + +
+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()`?
+
+ +

+
+ ## Coding: diff --git a/06-exploring-the-world/notes.md b/06-exploring-the-world/notes.md index f21bfda..128bff4 100644 --- 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 index 467e4d8..6805d85 100644 --- 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`? + +
+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`?
+
+ +

+
+ ## Coding: diff --git a/07-finding-the-path/notes.md b/07-finding-the-path/notes.md index ff7f3d2..c34a1be 100644 --- 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 index cec310e..ec7a6cd 100644 --- 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`? + +
+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`?
+
+ +

+
+ ## Coding: diff --git a/08-Lets-get-classy/notes.md b/08-Lets-get-classy/notes.md index cb3e6d9..4e61d00 100644 --- 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 index 0f07a4d..2c31ff6 100644 --- 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`? + +
+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`?
+
+ +

+
+ ## Coding: diff --git a/09-optimizing-our-app/notes.md b/09-optimizing-our-app/notes.md index c9d2665..284dcae 100644 --- 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 diff --git a/10-what-is-seen-is-sold/README.md b/10-what-is-seen-is-sold/README.md index 59120e4..c6ec2fd 100644 --- a/10-what-is-seen-is-sold/README.md +++ b/10-what-is-seen-is-sold/README.md @@ -6,16 +6,40 @@ Today, it was all about UI Layer of our app. The look and feel of the app attrac - [Notes.md](https://github.com/deltanode/react-playground/blob/main/10-what-is-seen-is-sold/notes.md) - ## Theory: -
    -
  • Explore all the ways of writing css.
    • -
  • How do we configure tailwind?
    • -
  • In tailwind.config.js, what does all the keys mean (content, theme, extend, plugins)?
    • -
  • Why do we have .postcssrc file?
    • -
+ +
+Explore all the ways of writing css.
+
+ +

+
+ + +
+How do we configure tailwind?
+
+ +

+
+ +
+In tailwind.config.js, what does all the keys mean (content, theme, extend, plugins)?
+
+ +

+
+ + +
+Why do we have .postcssrc file?
+
+ +

+
+ ## Coding: @@ -23,7 +47,6 @@ Today, it was all about UI Layer of our app. The look and feel of the app attrac
  • Configure Tailwind and try to build your whole app using tailwind.
    • - ## References:
      @@ -32,4 +55,3 @@ Today, it was all about UI Layer of our app. The look and feel of the app attrac
    • https://getbootstrap.com/
    • Material UI - https://mui.com/
    - diff --git a/10-what-is-seen-is-sold/notes.md b/10-what-is-seen-is-sold/notes.md index 9228515..0fe555c 100644 --- a/10-what-is-seen-is-sold/notes.md +++ b/10-what-is-seen-is-sold/notes.md @@ -1,4 +1,4 @@ -### Class notes `Chapter-10 What is seen is sold` +### `Chapter-10 What is seen is sold` The look part of the app - CSS diff --git a/11-data-is-the-new-oil/README.md b/11-data-is-the-new-oil/README.md index 7dbfc4f..cba45fd 100644 --- a/11-data-is-the-new-oil/README.md +++ b/11-data-is-the-new-oil/README.md @@ -8,13 +8,38 @@ Today was about Data layer of the app. Consider data as if it's oil, use it wise ## Theory: -
      -
    • What is prop drilling?
      • -
    • What is lifting the state up?
      • -
    • What is Context Provider and Context Consumer?
      • -
    • If you don’t pass a value to the provider does it take the default value?
      • -
    + +
    +What is prop drilling?
    +
    + +

    +
    + + +
    +What is lifting the state up?
    +
    + +

    +
    + +
    +What is Context Provider and Context Consumer?
    +
    + +

    +
    + + +
    +If you don’t pass a value to the provider does it take the default value?
    +
    + +

    +
    + ## Coding: @@ -23,7 +48,6 @@ Today was about Data layer of the app. Consider data as if it's oil, use it wise
  • Try out Nested Contexts
    • - ## References:
      diff --git a/11-data-is-the-new-oil/notes.md b/11-data-is-the-new-oil/notes.md index 82ca517..3ec4ef1 100644 --- a/11-data-is-the-new-oil/notes.md +++ b/11-data-is-the-new-oil/notes.md @@ -1,4 +1,4 @@ -### Class notes `Chapter-11 Data is the new oil` +### `Chapter-11 Data is the new oil` Data is the new oil diff --git a/12-lets-build-our-store/README.md b/12-lets-build-our-store/README.md index 697f75b..c78d45d 100644 --- a/12-lets-build-our-store/README.md +++ b/12-lets-build-our-store/README.md @@ -8,15 +8,62 @@ Today, it was all about handling data using external state management library Re ## Theory: -
        -
      • useContext vs Redux.
        • -
      • Advantage of using Redux Toolkit over Redux.
        • -
      • Explain Dispatcher.
        • -
      • Explain Reducer.
        • -
      • Explain slice.
        • -
      • Explain selector.
        • -
      • Explain createSlice and the configuration it takes.
        • -
      + +
      +useContext vs Redux.
      +
      + +

      +
      + + +
      +Advantage of using Redux Toolkit over Redux.
      +
      + +

      +
      + + +
      +Explain Dispatcher.
      +
      + +

      +
      + + +
      +Explain Reducer.
      +
      + +

      +
      + + +
      +Explain slice.
      +
      + +

      +
      + + +
      +Explain selector.
      +
      + +

      +
      + + +
      +Explain createSlice and the configuration it takes.
      +
      + +

      +
      + ## Coding: diff --git a/12-lets-build-our-store/notes.md b/12-lets-build-our-store/notes.md index e361a84..a234f95 100644 --- a/12-lets-build-our-store/notes.md +++ b/12-lets-build-our-store/notes.md @@ -1,4 +1,4 @@ -### Class notes `Chapter-12 Let's build our store` +### `Chapter-12 Let's build our store` Today's session will be on more efficient & complex ways of handling data in our application. -> Redux diff --git a/13-time-for-the-test/README.md b/13-time-for-the-test/README.md index 4f46dac..b31153f 100644 --- a/13-time-for-the-test/README.md +++ b/13-time-for-the-test/README.md @@ -8,13 +8,38 @@ Today, it was all about testing the application. In this chapter, different type ## Theory: -
        -
      • What are different types for testing?
        • -
      • What is Enzyme?
        • -
      • Enzyme vs React Testing Library
        • -
      • What is Jest and why do we use it?
        • -
      - + +
      +What are different types for testing?
      +
      + +

      +
      + + +
      +What is Enzyme?
      +
      + +

      +
      + + +
      +Enzyme vs React Testing Library
      +
      + +

      +
      + + +
      +What is Jest and why do we use it?
      +
      + +

      +
      + ## Coding: diff --git a/13-time-for-the-test/notes.md b/13-time-for-the-test/notes.md index 9ea3c2f..893a08b 100644 --- a/13-time-for-the-test/notes.md +++ b/13-time-for-the-test/notes.md @@ -1,4 +1,4 @@ -### Class notes `Chapter-13 Time for the test` +### `Chapter-13 Time for the test` How to test react applications ? Jest & React Testing Library (alternative to enzyme) diff --git a/14-machine-coding-interview/notes.md b/14-machine-coding-interview/notes.md index 8332cdc..02c43c0 100644 --- a/14-machine-coding-interview/notes.md +++ b/14-machine-coding-interview/notes.md @@ -1,4 +1,4 @@ -# Machine Coding Round : +# Machine Coding Round : [Youtube] - Developing/Coding - an app during the interview diff --git a/15-building-advanced-features/notes.md b/15-building-advanced-features/notes.md index 65a9ffb..bf6fe47 100644 --- a/15-building-advanced-features/notes.md +++ b/15-building-advanced-features/notes.md @@ -1,4 +1,4 @@ -## Features : `Chapter-15 Building Advanced Features` +## Features : `Chapter-15 Building Advanced Features` [Youtube] ### Reference :