Namaste React

Namaste React course notes provide concise, hands-on insights into React development. Covering key concepts, components, and best practices, it's a valuable resource for mastering React.js efficiently.

React Assignments

📚 Chapter 01 - Inception

• What is Emmet?
• Difference between a Library and Framework?
• What is CDN? Why do we use it?
• Why is React known as React?
• What is crossorigin in script tag?
• What is difference between React and ReactDOM?
• What is difference between react.development.js and react.production.js files via CDN?
• What is async and defer?

---

📚 Chapter 02 - Igniting our App

• What is NPM?
• What is Parcel/Webpack? Why do we need it?
• What is .parcel-cache
• What is npx ?
• What is difference between dependencies vs devDependencies
• What is Tree Shaking?
• What is Hot Module Replacement?
• List down your favorite 5 superpowers of Parcel and describe any 3 of them in your own words.
• What is .gitignore? What should we add and not add into it?
• What is the difference between package.json and package-lock.json
• Why should I not modify package-lock.json?
• What is node_modules ? Is it a good idea to push that on git?
• What is the dist folder?
• What is browserlists
• Read about dif bundlers: vite, webpack, parcel
• Read about: ^ - caret and ~ - tilde
• Read about Script types in html (MDN Docs)

---

📚 Chapter 03 - Laying the foundation

• JSX
• React.createElement vs JSX
• Benefits of JSX
• Behind the Scenes of JSX
• Babel & parcel role in JSX
• Components
• Functional Components
• Composing Components

---

📚 Chapter 04 - Talk is Cheap, show me the code

• Is JSX mandatory for React?
• Is ES6 mandatory for React?
• {TitleComponent} vs {<TitleComponent/>} vs {<TitleComponent></TitleComponent>} in JSX.
• How can I write comments in JSX?
• What is <React.Fragment></React.Fragment> and <></>?
• What is Reconciliation in React?
• What is React Fiber?
• Why do we need keys in React?
• Can we use index as keys in React?
• What is props in React? Ways to.
• What is Config Driven UI?

---

📚 Chapter 05 - Let's get Hooked!

• 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?

---

📚 Chapter 06 - Exploring the world

• 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()?

---

📚 Chapter 07 - Finding the Path

• 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?

---

📚 Chapter 08 - Let's get Classy

• 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?

---

📚 Chapter 09 - Optimizing our App

• 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?

---

📚 Chapter 10 - Jo dikhta hai vo bikta hai

• 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?

---

📚 Chapter 11 - Data is the new Oil

• 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?

---

📚 Chapter 12 - Let's Build our Store

• 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.

---

📚 Chapter 13 - Time for the test

• What are different types for testing?
• What is Enzyme?
• Enzyme vs React Testing Library
• What is Jest and why do we use it?

---