fix(curriculum): remove videos for React data fetching, routing and debugging lecture (#61558)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2025-07-31 03:59:25 -07:00
parent a55b0c2983
commit af3b7104fe
11 changed files with 38 additions and 115 deletions
@@ -1,19 +1,12 @@
 ---
 id: 67d1ad82cff954a854bcbcaa
 title: What Is Prop Drilling?
-challengeType: 11
-videoId: 83LkOesFkWI
+challengeType: 19
 dashedName: what-is-prop-drilling
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is prop drilling?
-
 Prop drilling is the most basic approach to state management in React applications. It looks simple, but can get messy quickly, and is very hard to scale.

 Let's look at what prop drilling is, why it's a problem, and a good replacement for it as an application grows.
@@ -1,19 +1,12 @@
 ---
 id: 67d2f5b78609f97400923f7f
 title: What Are State Management Libraries, and When Should You Use Them?
-challengeType: 11
-videoId: 9GBjI8LDauU
+challengeType: 19
 dashedName: what-are-state-management-libraries-and-when-should-you-use-them
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are state management libraries, and when should you use them?
-
 As your app grows, managing how data flows between components can become complex.

 When starting out, React's `useState` hook might be sufficient, but as you add features, you might encounter issues with:
@@ -1,19 +1,12 @@
 ---
 id: 67d2f5dacd5e0c749e5d534c
 title: How Can You Debug Your React Components Using the React DevTools?
-challengeType: 11
-videoId: ghTDVD-hPuc
+challengeType: 19
 dashedName: how-can-you-debug-your-react-components-using-react-devtools
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How can you debug your React components using the React DevTools?
-
 The browser has built-in developer tools you can use to debug HTML, CSS, and JavaScript.

 However, they're not great for finding and fixing bugs in React apps. So the React team developed a tool called "React Developer Tools" (AKA React DevTools) so you can inspect, debug, and profile React apps.
@@ -1,19 +1,12 @@
 ---
 id: 67d2f5f19a0f0b75343f1905
 title: What Are React Server Components, and How Do They Work?
-challengeType: 11
-videoId: weeLaRgDBmg
+challengeType: 19
 dashedName: what-are-react-server-components-and-how-do-they-work
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are React Server Components, and how do they work?
-
 React Server Components (RSCs) is a new trend that has changed the way React developers approach things. With RSCs, more work shifts to the server, which has a lot of benefits.

 Let's take a look at what server components are, how they work, and what led to the introduction of server components.
@@ -1,19 +1,12 @@
 ---
 id: 67d1ab248317a5a29058a763
 title: What Is Dependency Management, and How Does It Work with Libraries Like React?
-challengeType: 11
-videoId: Jv0dHvSoN8E
+challengeType: 19
 dashedName: what-is-dependency-management-and-how-does-it-work-with-libraries-like-react
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is dependency management, and how does it work with libraries like React?
-
 In software, a dependency is where one component or module in an application relies on another to function properly. Dependencies are common in software applications because it allows developers to use pre-built functions or tools created by others.

 If you want to build out a React application, you will need to install the React dependencies. Without these dependencies, none of your code will work correctly and the application will display a list of errors.
@@ -22,7 +15,7 @@ When you are working with more complex projects, you will often need to rely on

 To manage software dependencies in a project, you will need to use a package manager. A package manager is a tool used for installation, updates, and removal of dependencies. Many popular programming languages like JavaScript, Python, Ruby and Java, all use package managers.

-In an earlier lecture video, you were briefly introduced to one popular package manager called npm.
+In an earlier lecture, you were briefly introduced to one popular package manager called npm.

 To create a new React project using Vite and npm you can run the following command:

@@ -30,7 +23,7 @@ To create a new React project using Vite and npm you can run the following comma
 npm create vite@latest my-react-app -- --template react
 ```

-As you recall from the prior videos, this will create all of the necessary boilerplate code needed to launch a new React application. Before you can launch the application, you will need to install the dependencies by running `npm install` or `npm i` for short.
+As you recall from the prior lectures, this will create all of the necessary boilerplate code needed to launch a new React application. Before you can launch the application, you will need to install the dependencies by running `npm install` or `npm i` for short.

 You can view all of the dependencies in the `package.json` file which is located in the root directory of your project.

@@ -90,7 +83,7 @@ A special type of testing software used in JavaScript and Python applications.

 ### --feedback--

-Refer to the very beginning of the video where this was discussed.
+Refer to the very beginning of the lecture where this was discussed.

 ---

@@ -98,7 +91,7 @@ This is where multiple tasks are running simultaneously in the background.

 ### --feedback--

-Refer to the very beginning of the video where this was discussed.
+Refer to the very beginning of the lecture where this was discussed.

 ---

@@ -110,7 +103,7 @@ A special type of compiler used to run JavaScript code in the browser.

 ### --feedback--

-Refer to the very beginning of the video where this was discussed.
+Refer to the very beginning of the lecture where this was discussed.

 ## --video-solution--

@@ -154,7 +147,7 @@ Packages that are only used for development and not in production.

 ## --text--

-Which of the following is NOT mentioned in the video as an example of a popular package manager for JavaScript?
+Which of the following is NOT mentioned in the lecture as an example of a popular package manager for JavaScript?

 ## --answers--

@@ -166,7 +159,7 @@ Which of the following is NOT mentioned in the video as an example of a popular

 ### --feedback--

-Refer to the last minute of the video where this was discussed.
+Refer to the last minute of the lecture where this was discussed.

 ---

@@ -174,7 +167,7 @@ Refer to the last minute of the video where this was discussed.

 ### --feedback--

-Refer to the last minute of the video where this was discussed.
+Refer to the last minute of the lecture where this was discussed.

 ---

@@ -182,7 +175,7 @@ Refer to the last minute of the video where this was discussed.

 ### --feedback--

-Refer to the last minute of the video where this was discussed.
+Refer to the last minute of the lecture where this was discussed.

 ## --video-solution--

@@ -1,19 +1,12 @@
 ---
 id: 67d311627010a0efa127b651
 title: How Does Routing Work in React?
-challengeType: 11
-videoId: zQcyjZFiX1A
+challengeType: 19
 dashedName: how-does-routing-work-in-react
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How does routing work in React?
-
 In earlier lectures, you learned that React is a single page application. Single page applications are applications that contain one HTML file and use JavaScript to dynamically update any content on the page.

 So what happens when you need to add multiple "pages" to your React application? How would you go about navigating to those different views?
@@ -139,7 +132,7 @@ It is used to remove dynamic routes from your React applications.

 ### --feedback--

-Review the beginning of the video where React Router was discussed.
+Review the beginning of the lecture where React Router was discussed.

 ---

@@ -147,7 +140,7 @@ It is used to setup static routes only for your React applications.

 ### --feedback--

-Review the beginning of the video where React Router was discussed.
+Review the beginning of the lecture where React Router was discussed.

 ---

@@ -155,7 +148,7 @@ It is used to remove routes from your React applications.

 ### --feedback--

-Review the beginning of the video where React Router was discussed.
+Review the beginning of the lecture where React Router was discussed.

 ---

@@ -175,7 +168,7 @@ Which hook is used to retrieve a dynamic parameter for a URL?

 ### --feedback--

-Review the last minute of the video where this was discussed.
+Review the last minute of the lecture where this was discussed.

 ---

@@ -187,7 +180,7 @@ Review the last minute of the video where this was discussed.

 ### --feedback--

-Review the last minute of the video where this was discussed.
+Review the last minute of the lecture where this was discussed.

 ---

@@ -195,7 +188,7 @@ Review the last minute of the video where this was discussed.

 ### --feedback--

-Review the last minute of the video where this was discussed.
+Review the last minute of the lecture where this was discussed.

 ## --video-solution--

@@ -219,7 +212,7 @@ Which of the following is the correct way to represent a dynamic segment in a pa

 ### --feedback--

-Review the last minute of the video where this was discussed.
+Review the last minute of the lecture where this was discussed.

 ---

@@ -229,7 +222,7 @@ Review the last minute of the video where this was discussed.

 ### --feedback--

-Review the last minute of the video where this was discussed.
+Review the last minute of the lecture where this was discussed.

 ---

@@ -239,7 +232,7 @@ Review the last minute of the video where this was discussed.

 ### --feedback--

-Review the last minute of the video where this was discussed.
+Review the last minute of the lecture where this was discussed.

 ## --video-solution--

@@ -1,19 +1,12 @@
 ---
 id: 67d311d256c58ef01e0d62ec
 title: What Are React Frameworks, and Why Are They Commonly Used in the Industry?
-challengeType: 11
-videoId: fGj4azmffXQ
+challengeType: 19
 dashedName: what-are-react-frameworks-and-why-are-they-commonly-used-in-the-industry
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What are React frameworks, and why are they commonly used in the industry?
-
 Up until this point, you have been using React to build out user interfaces. If you needed additional features like routing, then you had to import a third party library like React Router to be able to switch between the different views.

 But what happens when you need to build out a full stack web application? Well you could use React for the frontend and use Node and Express for the backend logic if you just want to stick with JavaScript. Or you could use other languages like Go, Python, or Java for your backend.
@@ -67,7 +60,7 @@ Spring

 ### --feedback--

-Refer to the beginning of the video where this was discussed.
+Refer to the beginning of the lecture where this was discussed.

 ---

@@ -75,7 +68,7 @@ Laravel

 ### --feedback--

-Refer to the beginning of the video where this was discussed.
+Refer to the beginning of the lecture where this was discussed.

 ---

@@ -87,7 +80,7 @@ Django

 ### --feedback--

-Refer to the beginning of the video where this was discussed.
+Refer to the beginning of the lecture where this was discussed.

 ## --video-solution--

@@ -107,7 +100,7 @@ Routing.

 ### --feedback--

-Refer to the beginning of the video where this was discussed.
+Refer to the beginning of the lecture where this was discussed.

 ---

@@ -115,7 +108,7 @@ Image optimization.

 ### --feedback--

-Refer to the beginning of the video where this was discussed.
+Refer to the beginning of the lecture where this was discussed.

 ---

@@ -123,7 +116,7 @@ Data fetching.

 ### --feedback--

-Refer to the beginning of the video where this was discussed.
+Refer to the beginning of the lecture where this was discussed.

 ## --video-solution--

@@ -139,7 +132,7 @@ It automatically increases the size of all images to improve quality.

 ### --feedback--

-Refer to the end of the video where this was discussed.
+Refer to the end of the lecture where this was discussed.

 ---

@@ -151,7 +144,7 @@ It guarantees zero performance impact when loading images.

 ### --feedback--

-Refer to the end of the video where this was discussed.
+Refer to the end of the lecture where this was discussed.

 ---

@@ -159,7 +152,7 @@ It has zero support for lazy loading for images.

 ### --feedback--

-Refer to the end of the video where this was discussed.
+Refer to the end of the lecture where this was discussed.

 ## --video-solution--

@@ -1,19 +1,12 @@
 ---
 id: 67d1a99d10fd509c88faf3bf
 title: How Does Data Fetching Work in React?
-challengeType: 11
-videoId: _gwWcrZ1WJo
+challengeType: 19
 dashedName: how-does-data-fetching-work-in-react
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How does data fetching work in React?
-
 React apps often rely on external APIs and databases for dynamic content. To access the data from those APIs and databases, you need to use some data fetching techniques.

 Let's take a look at how data fetching works in React and the different options available to you for fetching data.
@@ -1,19 +1,12 @@
 ---
 id: 67d2f4ddb4a4306fdf5bbaee
 title: What Is Memoization, and How Does the useMemo Hook Work?
-challengeType: 11
-videoId: 2X7LD_6P4eI
+challengeType: 19
 dashedName: what-is-memoization-and-how-does-the-usememo-hook-work
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is memoization and how does the `useMemo` hook work?
-
 As your React app gets larger, unnecessary re-renders and expensive calculations can slow down performance, leading to slow UI updates and increased resource usage.

 This can be especially problematic in apps with complex state management, large lists, functions that require heavy computations, and many components with a single parent.
@@ -1,19 +1,12 @@
 ---
 id: 67d2f51ff2c927713caa24fa
 title: How Do the useCallback Hook and React.memo Work?
-challengeType: 11
-videoId: BGK2SLMOthI
+challengeType: 19
 dashedName: how-do-the-usecallback-hook-and-react-memo-work
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-How do the `useCallback` hook and `React.memo` work?
-
 In the last lecture, you learned about memoization and how the `useMemo` hook works.

 In this lecture, you'll learn how the `useCallback` hook and `React.memo` work.
@@ -1,19 +1,12 @@
 ---
 id: 67e2a513dbffdc8dcf1700af
 title: What Is the useOptimistic Hook, and How Does It Work?
-challengeType: 11
-videoId: ZmjYqlrU4g0
+challengeType: 19
 dashedName: what-is-the-useoptimistic-hook-and-how-does-it-work
 ---

 # --description--

-Watch the video or read the transcript and answer the questions below.
-
-# --transcript--
-
-What is the `useOptimistic` hook and how does it work?
-
 Recent versions of React introduced server components and server actions to shift some of the rendering and logic responsibilities to the server.

 Along with those updates, React added a new hook called `useOptimistic` to keep UIs responsive while waiting for an async action to complete in the background.