learnings.txt

Steps to start:

1. npm init 
2. npm install -D parcel (install development packages for parcel)
3. npm install react (install react packages)
4. npm install react-dom (install react dom packages)
5. import react and react dom in app.js
6. npx parcel index.html - (write script for hosting project on localhost in package.json) - npm run start
7. npm parcel build index.html - (write script for pushing app to production in package.json) - npm run build


------------------------------------------------------------------------------------
                                 /* Episode 01 */
------------------------------------------------------------------------------------

# 🚀 NamasteReact Series - Episode 01 Learnings 🚀

Welcome to the documentation of my learnings from Episode 01 of the NamasteReact series. In this episode, we covered a variety of topics related to JavaScript and React. Here's a summary of what I've learned (ignore typos):


document.createElement("h1") this is a method used to create element in this case h1 is the element

how browser understand this document? innerHTML? createElement? 
Ans: When you call document.createElement("h1"), you're invoking a method provided by the browser's DOM implementation. Browsers have built-in JavaScript engines (like V8 in Chrome, SpiderMonkey in Firefox, and others) that understand and execute JavaScript code. When this method is called, the browser's JavaScript engine processes it and creates a new <h1> DOM element in memory.

what is cdn? why do we use cdn? alternative for cdn? why there are two files in react?

- one is the core of react
- other is the library for dom operations


secret internals do not use? what's that?

what is cross origin? why Im writing crossorigin? alternative for cross origin? 

does the order of script matters? What will happen if I alter the position of script?

why script is written under body tag? Can we add it under head?

why there are two links in react cdn? why did react made two files?

what is react element?

what is production.js file and development.js file in react?

if something let's say h1 tag is already present in the id=root, and you try to render other elements using reactElement what will happen?
Ans: root render will replate the tag.

what if we have a h1 tag top of root?
 
read more about props.

change the order of script and see if the code is working properly. 

part of react can be used in any application using cdn - read more on it 

react can work on your existing apps as well. React can be used in a part of the application.

react have helper functions that help to build faster application. 

npm doesn't stand for - node package manager

package.json is a configuration for npm

bundler - parcle, web-pack, wheat

there are two types of dependencies - 1. Dev dependencies & 2. Normal dependencies

different between caret and tilde

what is transitive dependency.

# 🚀 NamasteReact Series - Episode 01 Learnings - Revised 🚀

1. **Creating Elements with `document.createElement`**
   - `document.createElement("h1")` is a method used to create an HTML element, in this case, an h1 element.

2. **Understanding Browser's DOM Implementation**
   - Browsers have built-in JavaScript engines (e.g., V8 in Chrome, SpiderMonkey in Firefox) that process JavaScript code.
   - `document.createElement` invokes the browser's DOM implementation, creating a new DOM element in memory.

3. **Content Delivery Network (CDN) and React Links**
   - CDN is used to deliver static assets like JavaScript libraries.
   - React CDN has two links - one for the core of React and the other for DOM operations.

4. **Cross-Origin and `crossorigin` Attribute**
   - Explored the concept of cross-origin and the use of `crossorigin` attribute.
   - Alternative solutions for handling cross-origin scenarios.

5. **Script Order and Placement**
   - Explored the importance of the order and placement of script tags in HTML.
   - Experimented with altering the script position to observe the impact on code execution.

6. **React Element and Rendering**
   - Learned about React elements and how React renders content to the DOM.
   - Handling scenarios where an element is already present in the DOM.

7. **Understanding React CDN Files**
   - Explored the purpose of `production.js` and `development.js` files in React.

8. **Usage of Props in React**
   - Encouraged to read more about props and their role in React components.

9. **NPM and Package Management**
   - Clarified that NPM doesn't stand for "Node Package Manager."
   - `package.json` serves as a configuration file for NPM.

10. **Bundlers and Dependency Types**
    - Introduced to bundlers like Parcel, Webpack, and Wheat.
    - Discussed the difference between dev dependencies and normal dependencies.

11. **Dependency Versioning with Caret and Tilde**
    - Explored the difference between caret (`^`) and tilde (`~`) in specifying dependency versions.

12. **Transitive Dependency**
    - Defined and understood the concept of transitive dependencies in a project.

13. **Injecting Script Files and Log Behavior**
    - Explored how script files are injected, specifically mentioning adding `app.js` in `index.html`.
    - Discussed the behavior of logging in JavaScript.


------------------------------------------------------------------------------------
                                 /* Episode 02 */
------------------------------------------------------------------------------------


# 🚀 NamasteReact Series - Episode 02 Learnings 🚀

Welcome to the documentation of my learnings from Episode 02 of the NamasteReact series. In this episode, we covered a variety of topics related to JavaScript and React. Here's a summary of what I've learned (ignore typos):

1. Package.json is a configuration for npm
2. What is the most important package in the React app? It is a bundler (research more about it)
3. What is a bundler? webpack? parcel? vite?
4. What is the job of a bundler? A bundler bundles our app, packages our app so it can be shipped properly.
5. Difference between Git and GitHub
6. What is production-ready code?
7. Bundle files, compress, minify the code, minify the images, remove comments - make your code production-ready - what is needed to make your code ready for production?
8. If you want to build a fast production-ready app can React itself do it?
9. Answer: To an extent, yes, React is making our app fast, but there are a lot of other things and packages we need to make our app fast.
10. NPM does not stand for - node package manager; behind the scenes, npm is responsible for managing packages. npm is a standard repository for all the packages, sometimes called dependencies.
11. When we create a Create React App, it uses webpack behind the scenes.
12. Fun fact - If the app is a skeleton and bones, then the parser will give muscle/strength to the app :)
13. There are two types of packages/dependencies that an app can have - 1. Dev Dependencies (generally required in the development phase of the app) 2. Normal Dependencies (used in the production phase of the app)
14. `npm install -D parcel`: It tells npm that the app wants to install parcel packages/dependencies required for the development phase (not normal dependencies)
15. What is the caret/tilde ^/~ sign before the version of the package?
16. Answer: In package.json, the tilde (~) allows updates to the patch version of a package, while the caret (^) allows updates to the minor and patch versions of a package. The caret keeps the major version fixed. Learn here - [caret vs tilde](https://www.linkedin.com/pulse/difference-bw-tilde-notation-caret-alok-tiwari/)
17. Learn here - [caret vs tilde](https://www.quora.com/Which-is-better-or-caret-in-package-JSON#:~:text=npm%20allows%20installing%20newer%20version,as%20the%20default%20for%20save%20.)
18. If we have ^ and tomorrow a new minor upgrade is available and we have added caret before the version, it will automatically update to the new released minor upgraded version.
19. If we have ~ and tomorrow a new major upgrade is available and we have added tilde before the version, it will automatically update to the new released major upgraded version.
20. What is package-lock.json? Is it even needed? What is the difference between package.json and package-lock.json?
21. package.json - It is a configuration for npm, keeps track of what version of a package is installed in the app, helps to keep an approximate version of the dependencies.
22. package-lock.json - It keeps track of the exact version that is being installed, locks the version, and keeps a record of it.
23. What is integrity in the package-lock.json? It is a hash file, but why is a hash present?
24. Have you heard? It was working on my local but not on production? To avoid this, package-lock.json keeps a hash to verify that whatever is there in my dev local machine is the same version being deployed on the production. It keeps track of all the versions of all the dependencies.
25. Why do we have a node_modules folder? It is a kind of database where all our packages exist.
26. Our project needs Parcel; Parcel as a project has its own dependencies, and those dependencies can have their own dependencies. This is known as transitive dependencies.
27. Question - How would npm know that Parcel has its own dependencies and those dependencies have their own dependencies?
28. Question - In our project, how many package.json and package-lock.json files do we have?
29. Every dependency has its own package.json and package-lock.json.
30. Why is the node_modules folder bulky? Explain with transitive dependencies.
31. Should we put the node_modules folder in the git repository? - No
32. Should we put package.json and package-lock.json in the git repository? - Yes
33. Try deleting the node_modules folder, push the code to your repository, and then get the code from the repository and then do npm install? You have your answer.
34. Just a hack - Whatever we can regenerate, don't put it on git. It should only have essential files.
35. Difference between npm and npx? npm, in a broad way, is used to install packages, and npx is used to execute a package, for example, npx parcel index.html
36. Why using a CDN link is not advisable? Example - https://unpkg.com/react@18/umd/react.development.js
37. Every time the app hits the page where the CDN link is added, let's say index.html, it does a network call, and this can be expensive and repetitive.
38. Just a note - `npm i` is a shorthand for `npm install`
39. Install React and React DOM
40. Resolve - @parcel/transformer-js: Browser scripts cannot have imports or exports. - Delete .parcel-cache folder.
41. Parcel is responsible for (parcel is such a beast) -
    - Dev build,
    - Local server,
    - HMR - hot module replacement,
    - File watching algorithm written in C++,
    - Caching - faster build,
    - Image Optimization,
    - Minification of our files,
    - Bundling,
    - Compress,
    - Consistent Hashing,
    - Code splitting,
    - Differential Bundling (supports older browsers)
    - Diagnostics
    - Error Handling
    - HTTPs (parcel gives a way to host the app on https)
    - Tree shaking (remove unused code)
    - Different development and production bundles
    (Read more about all these topics above - [Parcel Documentation](https://parceljs.org/))
    Also, just to note, Parcel is not doing things on its own. Let's say for image optimization, it might be using some other library, and for caching, it might be using some other library and so on.
    Consider the PM as React and the home minister as Parcel, and other folder structure as different ministries. (giving you a fun example here)
42. Note - The most expensive thing is your web browser is to load images on your page.
43. Change the entry point in package.json before making the app production-ready.
44. Make the app production-ready - `npx parcel build index.html`
45. When it builds the production-ready app, where does that build go? Answer - `dist` folder
46. Before making your app production-ready - make sure it is browser-compatible
47. For making browser-compatible - check [npm](https://www.npmjs.com/package/browserslist)
48. For making browser-compatible - check [browser list](https://browserslist.dev/)
49. For making browser-compatible - check [browser list github](https://github.com/browserslist/browserslist#query-composition)
50. Now we will be able to answer - why our React app is fast.


------------------------------------------------------------------------------------
                                 /* Episode 03 */
------------------------------------------------------------------------------------


# 🚀 NamasteReact Series - Episode 03 Learnings 🚀

Welcome to the documentation of my learnings from Episode 03 of the NamasteReact series. In this episode, we covered a variety of topics related to JavaScript and React. Here's a summary of what I've learned (ignore typos):

1. Create a script so you don't have to run npm commands again and again.
2. Add script for starting the dev environment and parcel build for pushing the app to production-ready code.
3. `npm start === npm parcel index.html`
4. `npm run start === npm parcel index.html`
5. `npm run build === npx parcel build index.html`
6. `React.createElement()` - what it does? creates an object, and when we render this element onto the DOM, then it becomes an HTML element.
7. Fun part - we can build a React application without JSX; JSX makes a developer's life easy.
8. JSX is a convention where we kind of merge HTML and JS.
9. JSX is not HTML written inside JavaScript.
10. Instead, JSX is an HTML lookalike or XML lookalike syntax.
11. We can create a ReactElement using core React. We can also create a ReactElement using JSX.
12. As a programmer and developer, do we write code for the machine or humans? The answer is vague; we write it for both. Human first and then machine second.
13. Can the JS engine read JSX? No, the JS engine can only understand the code written in JavaScript.
14. Then how does JSX work? Parcel is responsible. The code we write, even before it reaches the JS engine, is transpiled (converted to code that the browser can understand, that React can understand) before it goes to the JS engine. and then the JS engine receives the code the browsers can understand.
15. Who is transpiling the code? Parcel is responsible, not working alone; it gives the responsibility to the package called Babel.
16. Using React
17. `React.createElement => ReactElement - JS Object => HTMLElement(render)`
18. Using JSX
19. `JSX => Babel transpiles it to React.createElement => ReactElement - JS Object => HTMLElement(render)`
20. Read more on Babel and Parcel
21. How Babel works? Babel reads the code token by token, and .. (continue your research)
22. Add a class to the React element created using JSX
23. Attributes are added as camelcase in JSX example background-color should be written as backgroundColor (please verify)
24. Explore various attributes of various tags.
25. Single line and multiple lines in JSX - to write JSX in multiple lines wrap the code in (). example.
    ```jsx
    const heading = (<h1>Hello Developer<h1>)
    ```
26. What are React components? - 2 ways of creating React components: class-based components, functional components.
27. Functional components are nothing but just a JavaScript function that returns some piece of JSX code.
28. As JSX code is nothing but a React element so
29. Functional components are nothing but just a JavaScript function that returns a React element or elements.
30. ```jsx
   // Example 1
   const Function = () => {
       return <h1 class="heading">Hello Developer</h1>
   }
    // Example 2
    const Function = () => {
    return <div><h1 class="heading">Hello Developer</h1></div>
    }
    // Example 3
    const Function = function () {
    return <div><h1 class="heading">Hello Developer</h1></div>
    }

31. Naming convention for functional components starts with a capital letter followed by lowercase. Example - Function1(), Addition(), Header(), and likewise.

32. What is the difference between a React element and a functional component?
33. What is component composition? Basic idea - adding components inside a component. Composing components into one another is nothing but component composition.
34. We can write JavaScript inside JSX. If you add {} inside a functional component, the function component will have the superpower and we can write any piece of JavaScript there.
35. How can we put a React element inside the component? Using {}, {element}
36. How can we put a React element inside an element? Using {}, {element}
37. How can we put React components inside the element? Using <></> or using <></> or <></>
39. Naming convention for functional components starts with Capital letter followed by small case. Example - Function1(), Addition(), Header() and likewise.
40. What is the difference between a React element and a functional component?
41. What is component composition? Basic idea - adding components inside component. Composing components into one another is nothing but component composition.
42. We can write JavaScript inside JSX. If you add {} inside functional component, the function component will have the superpower and we can write any piece of javascript there.
43. How can we put react element inside the component. using {}, {element}
44. How can we put react element inside the element. using {}, {element}
45. How can we put react components inside the element. using angular </><component/> or using <component></component>
here are the ways - {HeadingFunction5()}, <HeadingFunction5></HeadingFunction5>, <HeadingFunction5 />
46. How JSX sanitizes the data? Assume that you had a cross-scripting attack, how JSX handles it? How it prevents cross-scripting attack?
47. What makes the web app React code readable and faster? Code is readable because we are writing JSX. How to prove this? .Write code where createElement using core React.
48. At the end of the day, it is all about JavaScript.


------------------------------------------------------------------------------------
                                 /* Episode 04 */
------------------------------------------------------------------------------------
1. Before we start coding, make a conceptual design of your application. or a wire frame.
2. Make a low level design of working of your application.
3. Start working with React Props
4. Props are just normal arguments to the function.
5. Passing arguments to the function is the same as passing props to the functional components.
6. How can we ready the props?
7. When we want to dynamically pass some data to the components we pass in as props.
8. How to pass dynamic data?
9. What is Config driven UI
10. All the UI is driven by a config what is the config? The data, API is the config. Example, Swiggy has an offer for Delhi, Mumbai, Nagpur, etc., or some place there is no offer. So do we need to build different UI for all the locations? No. Let's consider a carousel that shows offers from different cities; we have written UI once, and now according to the data coming from the backend UI is getting changed. This is called config-driven UI. Another example if we want to show a different color in the festival in a particular city, we just need to update the backend data, and then config will drive the UI.
11. In any React application, there is a UI layer and data layer and both of them together build a frontend application. UI layer engineer, data layer engineer
12. Why do we have a warning that each list must have a unique key?
13. Never use react index as keys
14. Solve the warning - Warning: Each child in a list should have a unique "key" prop.
15. Whenever React renders any element, let's in the code we have written to add the new element in the first place of the node. If the key is not mentioned then React will render all the nodes as React will think as these are newly added. if we add keys to the child in the list, React will check okay these keys were already present before and we have a new key example "124" so now it is clear that the next key doesn't exist so React will add the child element and will not render the rest of the existing child elements.
    ```plaintext
    O (root element)
    / |  \
    0  0   0
    /  /|\  /\
    O  O O O O O
    ```
    SO if the element is added in the first place React will render all the nodes, to avoid that and let React know that these nodes exist we use a unique key for each child list.
16. Make sure you are commenting out and cleaning your code before pushing it to production
17. Always deconstruct the props to make the code cleaner and easily readable.
18. Props are nothing but objects.
19. What is optional chaining in JavaScript?
20. 
    ```plaintext
    when we loop over a container,

    o (container )
    /|\
    ooo (restaurant card)
    id1 id2 id3

    Let's say we have 3 res cards and suppose there is a new res card added in the list, if you don't give the ids, and a new card came in React will re-render all these cards as React cannot uniquely identify which is a new card.

    React cleans the container and re-renders all these cards. it will treat all the resto card as the same.

    if we give them a unique id with id1, id2, id3 and so on, and element with xyzid is added then React will know id 1,2,3 were already there so React will only render xyzid not all.

    Suppose we have infinite scrolls so now imagine the optimization part if the key is not present.

    It takes a big performance hit if the key is not added. so to avoid it we use keys.

    Don't use the index key of an array as a key as it is not suggested in the React documentation.

    Read more on React doc and Pokorny's article for an in-depth explanation of the negative impacts of using an index as a key.

    not using keys (not acceptable) << index as key << unique key
    ```


------------------------------------------------------------------------------------
                                 /* Episode 05 */
------------------------------------------------------------------------------------

1. **Clean Your Code**
   - Keep your code organized and well-structured.

2. **Add the Project File Under src Folder**
   - Place your project files under the src folder.

3. **Summary of Episode 05**
   - A small summary of the fifth episode. A more detailed version will be provided later in the session.

4. **Difference Between `import header.js` and `import header.jsx`**
   - Understand the distinction between importing JavaScript and JSX files.

5. **Difference Between `components/header.js` and `components/header.jsx`**
   - Explore the differences between JavaScript and JSX files within the components folder.

6. **Avoid Hardcoding Data in Component Files**
   - Never hardcode data like string URLs or variables directly in component files.

7. **Follow Industry Standards for Folder Naming**
   - Choose folder names according to industry standards (common, config, utils).

8. **Use Capital Letter Naming for Constants**
   - For constant variables, follow the naming convention of using capital letters (e.g., `LOGO_URL = "xyz"`).

9. **Why React is Fast?**
   - React is fast in DOM manipulation and state management.

10. **React Variables - Super Powerful Hooks**
   - Understand the power of state variables in React, achieved through hooks like `useState`.

11. **Hooks in React**
   - Hooks are normal JavaScript utility functions with powerful capabilities.

12. **Important React Hooks**
   - There are two crucial hooks in React: `useState()` and `useEffect()`.

13. **useState() Hook**
   - `useState()` is used to generate superpowerful state variables in React.

14. **useEffect() Hook**
   - `useEffect()` maintains the state of the component.

15. **State Variable Updates and React Rerender**
   - Whenever a state variable is updated, React re-renders the component.

16. **Read More on Import**
   - Explore more about the `import` statement in JavaScript.

17. **Named Export, Default Export, and * as Export**
   - Learn more about different export methods in JavaScript.

18. **Read More on React Hooks**
   - Dive deeper into the concept of React hooks.

19. **Why Do We Need a useState Hook?**
   - Understand the significance of the `useState` hook in React.

20. **React Fiber Architecture and Reconciliation**
   - Read more about React Fiber architecture and the concept of reconciliation.

21. **Efficient DOM Manipulation with Virtual DOM**
   - React efficiently manipulates the DOM using the virtual DOM.

22. **Virtual DOM in React**
   - Explore the concept of the virtual DOM in React.

23. **React Fiber Algorithm**
   - Understand the React Fiber algorithm for efficient DOM updates.

24. **React's Efficiency in DOM Manipulation**
   - Learn why React is fast, with features like virtual DOM and a fast diff algorithm.

25. **Additional Reading on React Fiber by Acdlite**
   - Check out the React Fiber architecture in Acdlite's GitHub readme.

26. **Reconciliation in React**
   - Gain insights into how React efficiently reconciles changes in the virtual DOM.

27. **React's Virtual DOM vs. Actual DOM**
   - Understand the difference between React's virtual DOM and the actual DOM.

28. **Why React is Fast - Virtual DOM and Diff Algorithm**
   - Explore why React is fast, with its virtual DOM and efficient diff algorithm.

------------------------------------------------------------------------------------
                                 /* Episode 06 */
------------------------------------------------------------------------------------

1. Monolith
Example of a company where every thing is authentication, api, ui service, backend service, database services, sms sending etc written in the same services.
Drawback - if we want to do a small change again we need to compile the bulky code and do the task.

2. Microservices

3. All small services combine together forms a big application

4. micro services talk to each other depending upon the use case.

5. having separate services for each thing example backend services, ui services, authentication services, database services, sms services, email services. this is know as separation of concern and single responsibility principle as it follows single responsibility principle as each service has it own job, and they dont interfer with each other.

- Interview Nuggets Deployment cycle will be different for each team

   - how these services talk to each other using API

   - how these services are deployed and how we can access them?

   - we can use different tech stack in  microservices architecture. Multiple tech stack can be used based on the use case.

6. all the services run on their own specific port. example :1234 ui service, :1000 backend service, :3000 - sms service and all these serives will be mapped to a domain name.

7. how they interact? they make a call to the url /api /sms /ui etc which is the port number

8. 2 ways how web app & ui applications fetch data from backed

9. First - As soon as our page loads we can make the api call and render the ui, suppose time to load = 500ms then it shows the ui after 500ms, Approach: loads - api - render

10. Second - As soon as the page loads, we will quicky render ui skeleton - and now we will make API call and then renders the data, Approach: loads - render - api - render

11. For better ux follow approach 2

12. It's not a good practice to show a lot of information in a small frame of time, so rendering of ui skeleton gives the user idea about what information is gonna load and then after render it makes sense.

13. React renders the data efficiently

14. React's render cycle is fast af, react has one of the best render mechanism.

15. react hooks are nothing but a normal javascript function that have some specific use cases.

16. useEffect(); import userEffect it takes two arguements. 1. callback function 2. dependency array

17. whatever we pass inside the callback function will be called after the ui component is rendered.

18. Explain the rendering process when we use useEffect(). Hint - use browser debugger

19. Fetch is a super power given by javascript or browser?

20. Can we use swiggy's api in our local ?

21. What is the error below?

```
localhost/:1 Access to fetch at
'https://www.swiggy.com/dapi/restaurants/list/v5?lat=21.1372529&lng=79.058856&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING'
from origin 'http://localhost:1234' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. If an opaque response serves your needs, set the request's
mode to 'no-cors' to fetch the resource with CORS disabled.
```

22. Who is blocking us? our browser is not allowing us to call swiggy's api from localhost i'e from one origin to another origin

23. how to we bypass the cors?

24. explain the concept of shimmer ui?

25. what is conditional rendering? rendering according to the condition

26. why do we even need useState variables - explain with login and logout button example.

27. js variables does not work in such situation. this is why we use local state variable

28. where does the use state come from? - import usestate

29. when we use useState the local varibable behaves like a normal javascript variable but it has a special powers

30. whenever the state variable is changed/updated react will re render the component where we have the state variable. it triggers the reconciliation cycle

31. question - onclicking the login button what will be rendered only the
button or the complete header component?

32. what is mean by rendering the component again? it means calling the function component again.

33. const [variable1, setVariable1] = useState("Login"), if we are using const variable then how it is getting updated? isn't it defeats the purpose of const variable? this is where reconciliation works, and diff algorigthm works

34. Whenvever state variables update, react triggers a reconciliation cycle (re-renders the component)

35. Local state variable - super powerful variable

36. What is optional chaining?

37. What is the difference between JS expression and JS statement

------------------------------------------------------------------------------------
                                 /* Episode 07 */
------------------------------------------------------------------------------------

1. useEffect Hook

When useEffect is called?
It is called after every render of the component. Everytime the component renders useEffect is called.

Dependency array changes the behaviour if useEffect hook.

if no dependency array present => useEffect is called on every render

if dependency array is empty [] => useEffect is called on intial render (just once)

The default behaviour of useEffect is to be called again and again if the component renders.

If dependency array is [something] => useEffect is called when [something] is updated.

Remember useEffect is called once on all conditions.

------------------------

2. useState Hook

Never create useState hooks outside the components.

It is used to create local state variable inside your functional component.

Bad Practice:

- Creating useState outside functional component

- Using useState inside conditinal statement, example if(condition){useState}

- Never use it inside for loop

- Don't create your state variables inside functions (functions created inside functional components).

Good Practice:

- Place your useState at the top level of functional component

---------------------

3. Reacter Routers

- use react router dom

- how to install react router dom?

- what is routing configuration?

- create a cofiguration

- render the configuration

- what is createBrowserRouter
- what is routerProvider

- Explore more on errorElement

- Explore more on useRouteError hook

- Customize your 404 page

- Learn more about children routes

5. Why react applications are called as single page application?
6. 2 types of routing in web apps - client side routing - server side routing
7. useParams hook
8. why do we use outlet
9. how you can destructure useParams on the fly?

------------------------------------------------------------------------------------
                                 /* Episode 08 */
------------------------------------------------------------------------------------
1. ALl about class based components
2. In the about us page, show the team members card and fetch the data from GitHub
3. What is the relation between functional component and class based components.
4. Create a user component using functional component and class based component approach
5. Functional component is nothing but just a JavaScript function that returns a JSX
6. What is a class based component? It is a normal JavaScript class
7. Learn more about JavaScript class
8. render() - render method returns some piece of JSX
9. A class based component is a class which extends React.component and it has a render method that returns a piece of JSX
10. What is React.component? It is a class given by React package
11. Which means we have to import the class
12. Import export for class based component is sames as functional component
13. Why we use constructor and super why do we always have to write super and constructor
14. We receive the props inside the constructor
15. Whenever the instance of the class is created a constructor is called all the props what we have passed will be combined together as an object and will be passed
16. How to create state variables and local variables in class based components?
17. When we say we rendering a functional component what does that mean?
18. We are mounting the functional component, loading or invoking the function.
19. Loading a class based component on the web page? It mean we are creating an instance of the class.
20. And whenever we create a new instance of a class constructor is called. And constructor is the best place to receive props and this is the best place to create state variable.
21. The state is a big object that contains all the state variables
22. How to create multiple state variables in class based components.
23. Never update the state variables in class based component directly
24. How to create state variables and local variables in class based components?
25. When we say we rendering a functional component what does that mean?
26. We are mounting the functional component, loading or invoking the function. Loading a class based component on the web page? It means we are creating an instance of the class.
27. And whenever we create a new instance of a class constructor is called. And constructor is the best place to receive props and this is the best place to create state variable.
28. The state is a big object that contains all the state variables
29. How to create multiple state variables in class based components. Never update the state variables in class based component directly
30. This.state = {} state is a reserved keyword, also it is a big object
31. Whenever state variable is updated, React triggers reconciliation and with the help of diff algorithm it finds the difference and replace the updates and then re-renders the component.
32. Loading and mounting the component is one and the same
33. The first thing when a class is loaded the instance is created, the constructor is called and then render method is called.
34. Learn more about componentDidMount() method
35. Life cycle of class component - first constructor is called, second render method is called and then componentDidMount() will be count.
36. React render life cycle diagram Wojtekmaj diagram for React lifecycle methods
37. Never ever compare React life cycle method to functional component
38. componentWillUnmount() is not equal to useEffect()
39. In useEffect() if we don't put dependency array then after each render it will be called.
40. In componentDidMount() it is only called once, and it will be mounted only once. After every subsequent render it is not mounted it will be updated.
41. componentDidMount() method
42. Why we cannot make useEffect() as an async function, why we cannot use async?
43. In componentDidMount(), it is only called once, and it will be mounted only once. After every subsequent render it is not mounted, it will be updated.
44. componentDidMount() method is called after the component is mounted to the DOM. It is commonly used for tasks like data fetching or initializing third-party libraries.
45. Why we cannot make useEffect() as an async function, why we cannot use async?
------------------------------------------------------------------------------------
                                 /* Episode 09 */
------------------------------------------------------------------------------------

1. What are custom hooks?
2. Single responsibility principle according to the principal each component should have a single responsibility.
3. What is Modularity? It makes the code testable and maintainable, reusable.
4. Keep your component as light as possible.
5. How can you create your custom hook?
6. Hooks are helper functions.
7. Always create a separate file for different hooks under `utils > hooks`. Naming convention - useHookName.
8. What is the contract of `restaurantMenu` hook? It will take the `resId` and return the `resInfo`.
9. How can you add your own npm package?
10. Whenever you write the custom hooks, first finalize the contract? Meaning what is the input of the hook and what is the output of the hook.
11. What is linter? A lot of projects use linter, why?
12. How to make an application with 10000s of components performant?
13. How large scale applications are made performant?
14. Go to network > select js > check for JavaScript file size.
15. Code splitting / chunking / dynamic bundling / lazy loading / on-demand loading / dynamic import - in short break down your app into smaller logical chunks.
16. Learn more about lazy load, and Suspense.
17. What is app bloating? Bundle size is increasing?

------------------------------------------------------------------------------------
                                 /* Episode 10 */
------------------------------------------------------------------------------------

1. What are different ways to add CSS to our React application?
2. Traditional way to writing CSS.
3. Sass vs SCSS.
4. What is Sass: Syntactically Awesome Style Sheets?
5. What is SCSS?
6. What are Styled-components?
7. Styled components - [https://styled-components.com/](https://styled-components.com/)
8. Learn more about libraries and frameworks.
9. Material UI, Bootstrap, Ant Design, Chakra UI, Tailwind.
10. What is PostCSS?
11. Make sure we are handling error for null search, no search, API calls after 3 AM.
12. For Episode 11.
13. Data is the new oil. What is high-order component? Why do we use it? Where do we use it? How do we use it? High-order component is a function that takes a component and returns a component. It takes a component as an input, enhances the component, adds features to it, and then returns the component. Build a higher-order component for promoted restaurants in Swiggy.

------------------------------------------------------------------------------------
                                 /* Episode 11 */
------------------------------------------------------------------------------------

1. for episode 11
2. Data is the new oil what is high order component? why we use it? where do we use it? how do we use it? high order component is a function that takes a component and returns a component. it takes a component as an input, enhances the component add features to it and then returns the component. build a higher order component for promoted restaurants in swiggy.
3. what is controlled and uncontrolled components?
4. lifting the state up
5. the important feature of a react application is to manage the data
6. this ui is very static, it doesn't have its logic,
7. all react application have 2 layers, ui layer and data layer - ui layer is powered by data layer
8. Higher-order components (HOCs) are a powerful feature of the React library. They allow you to reuse component logic across multiple components. In React, a higher-order component is a function that takes a component as an argument and returns a new component that wraps the original component.
9. ```<pre>element.card.card["@type"] == "type.googleapis.com/swiggy.presentation.food.v2.NestedItemCategory"
element.card.card.title
Rolls @ 99
newElement -> element.card.card.categories
array
newElement.card.card["@type"] == "type.googleapis.com/swiggy.presentation.food.v2.Dish"
const withNestedItemCategory = (RestaurantMenu) -> {
return () => {
return (
<tag>
<label>Extra Menu</label>
<!-- <RestaurantMenu /> -->
<tag>
)
}
}
element.card.card["@type"] ==
"type.googleapis.com/swiggy.presentation.food.v2.NestedItemCategory"
if this is true then we will render a new component withNestedItemCategory
else
</pre>```
10. Explore more on React Developer Tool - Extension
11. Revised HOC and state lifting.

------------------------------------------------------------------------------------
                                 /* Episode 12 */
------------------------------------------------------------------------------------

## Additional Information

- [LinkedIn - highnitin](https://linkedin.com/in/highnitin)

Feel free to connect with me on LinkedIn for more discussions and updates on my learning journey!

Happy hacking! 🚀