fix: add video ids and transcript headings, and fix a couple of title…

…s and slugs (freeCodeCamp#58138)

Co-authored-by: Tom <[email protected]>

curriculum/challenges/_meta/lecture-introduction-to-javascript-libraries-and-frameworks/meta.json

@@ -28,7 +28,7 @@
     },
     {
       "id": "6734e88cc46e6dc679420040",
-      "title": "What is Vite and How Can It Be Used to Setup a New React Project?"
+      "title": "What is Vite, and How Can It Be Used to Set Up a New React Project?"
     }
   ],
   "helpCategory": "JavaScript"

curriculum/challenges/_meta/lecture-working-with-data-in-react/meta.json

@@ -8,7 +8,7 @@
   "challengeOrder": [
     {
       "id": "6734e3ceee2da4b0301719b7",
-      "title": "How Do You Pass Props from Parent to Child Component in React?"
+      "title": "How Do You Pass Props from a Parent Component to a Child Component in React?"
     },
     {
       "id": "673500abfe36cd015b67b1b7",

curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md

@@ -2,37 +2,41 @@
 id: 6734e3a9cc78faaf4248d335
 title: What Is the Role of JS Libraries and Frameworks, and Why Are They Used in the Industry?
 challengeType: 19
-# videoId: nVAaxZ34khk
+videoId: AJMjp3NxnEA
 dashedName: what-is-the-role-of-js-libraries-and-frameworks-and-why-are-they-used-in-the-industry
 ---
 
 # --description--
 
-The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+Watch the video and answer the questions below.
+
+# --transcript--
+
+What is the role of JS libraries and frameworks, and why are they used in the industry?
 
 JavaScript libraries and frameworks provide pre-built code that streamlines the development process.  While both libraries and frameworks serve to improve productivity and standardize coding practices, they differ in their approach and level of control they provide to developers.
 
 Libraries are generally more focused on providing solutions to specific tasks, such as manipulating the DOM, handling events, or managing AJAX requests.
 
-An example of a JavaScript library is jQuery. 
+An example of a JavaScript library is jQuery.
 
-jQuery became very popular in the early 2010s and was widely used to simplify DOM manipulation, event handling, animations, effects, and more. This library also offered a rich ecosystem of plugins, which made it easy to build common web components like datepickers, sliders, and modal dialogs.
+jQuery became very popular in the early 2010s and was widely used to simplify DOM manipulation, event handling, animations, effects, and more. This library also offered a rich ecosystem of plugins, which made it easy to build common web components like date pickers, sliders, and modal dialogs.
 
 Although jQuery is no longer as widely used as it once was, it significantly helped developers by making tasks that were complex in vanilla JavaScript much easier to implement.
 
-Frameworks, on the other hand, provide a more defined structure for building applications. They often come with a set of rules and conventions that developers need to follow. 
+Frameworks, on the other hand, provide a more defined structure for building applications. They often come with a set of rules and conventions that developers need to follow.
 
-For example, Angular encourages a component-based architecture with a set of conventions and tools that provide a structured approach to organizing and building applications. Angular gives developers clear guidelines on how to structure components, manage state, handle routing, and interact with services, making it a more opinionated framework. 
+For example, Angular encourages a component-based architecture with a set of conventions and tools that provide a structured approach to organizing and building applications. Angular gives developers clear guidelines on how to structure components, manage state, handle routing, and interact with services, making it a more opinionated framework.
 
 Other examples of frameworks include Remix and NextJS.
 
 In contrast, React, a UI library, is more flexible and doesn't enforce any particular architectural pattern. React focuses primarily on the view layer and leaves a lot of the choices on application design up to the developers.
 
-Although libraries and frameworks are used across projects of all sizes, The choice between using them often depends on the project's requirements. Libraries offer flexibility for specific functionalities, while frameworks provide a structured approach towards complex applications.
+Although libraries and frameworks are used across projects of all sizes, the choice between using them often depends on the project's requirements. Libraries offer flexibility for specific functionalities, while frameworks provide a structured approach towards complex applications.
 
-In the industry, libraries and frameworks are widely used for several reasons. They significantly speed up development by providing quick solutions for common problems. 
+In the industry, libraries and frameworks are widely used for several reasons. They significantly speed up development by providing quick solutions for common problems.
 
-One common problem in JavaScript is working with dates and timezones. But there are libraries out there with built in solutions to help you with date manipulation, timezones, parsing and formatting of dates. 
+One common problem in JavaScript is working with dates and timezones. But there are libraries out there with built-in solutions to help you with date manipulation, time zones, parsing and formatting of dates.
 
 A lot of popular libraries and frameworks are well-tested and maintained by large communities. This means they're often more practical than building the same thing from scratch.
 

curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md

@@ -2,13 +2,17 @@
 id: 6734e867bbf41cc5b11648c4
 title: What Are Single Page Applications, and What Are Some Issues Surrounding Them?
 challengeType: 19
-# videoId: nVAaxZ34khk
+videoId: pqTVIg2JTJc
 dashedName: what-are-single-page-applications-and-what-are-some-issues-surrounding-them
 ---
 
 # --description--
 
-The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+Watch the video and answer the questions below.
+
+# --transcript--
+
+What are single page applications, and what are some issues surrounding them?
 
 Unlike traditional multi-page websites, single page applications (SPAs) load only one HTML page and dynamically update the content as the user interacts with the app, without reloading the entire page. This approach can lead to faster, more responsive applications, but it also comes a set of challenges and considerations.
 
@@ -18,11 +22,9 @@ SPAs have some common issues. One significant issue is that screen readers may s
 
 Another challenge with SPAs is with navigation and browser history. Users expect the back and forward buttons to work as they do on traditional websites. This might not work properly in SPAs because technically, the URL of the web app doesn’t change. Since, the URL of the web app doesn’t change, they can’t bookmark any specific page. Refreshing the page might reset the application to its initial state, rather than maintaining the current view.
 
-SPAs can pose challenges for SEO optimization. 
-
-Search engines like Google can have difficulty indexing dynamically loaded content because they may not execute JavaScript properly or may miss content that isn’t included in the initial HTML page. This can lead to pages not being indexed correctly. 
+SPAs can pose challenges for SEO optimization. Search engines like Google can have difficulty indexing dynamically loaded content because they may not execute JavaScript properly or may miss content that isn’t included in the initial HTML page. This can lead to pages not being indexed correctly.
 
-However, modern search engines have improved their ability to crawl SPAs, and there are techniques such as server-side rendering (SSR), pre rendering, and the use of SEO-friendly URLs that can help mitigate these issues and improve SEO for SPAs.
+However, modern search engines have improved their ability to crawl SPAs, and there are techniques such as server-side rendering (SSR), pre-rendering, and the use of SEO-friendly URLs that can help mitigate these issues and improve SEO for SPAs.
 
 Performance is another consideration. SPAs load the entire application in one go, which means that if the loading time increases, users will be seeing a blank screen for a longer period of time. Now consider the scenario of users with slower internet speeds. Overall, the user experience will not be very pleasant.
 

curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md

@@ -2,19 +2,23 @@
 id: 6734e86f590727c5e7e9ec5e
 title: What Is React, and What Is It Commonly Used For?
 challengeType: 19
-# videoId: nVAaxZ34khk
+videoId: 1FGlfBVLSOA
 dashedName: what-is-react-and-what-is-it-commonly-used-for
 ---
 
 # --description--
 
-The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+Watch the video and answer the questions below.
 
-React is one of the most popular JavaScript libraries for building user interfaces and web applications. Originally developed and maintained by Facebook, React has gained huge popularity in web development due to its efficiency, flexibility, and features. 
+# --transcript--
+
+What is React, and what is it commonly used for?
+
+React is one of the most popular JavaScript libraries for building user interfaces and web applications. Originally developed and maintained by Facebook, React has gained huge popularity in web development due to its efficiency, flexibility, and features.
 
 A fundamental concept in React is the creation of reusable UI components. These components, such as buttons, cards, and avatar components, can be easily reused throughout your application. You can nest these components inside each other to build more complex, dynamic interfaces.
 
-One of the key advantages of React is that these custom components can update and render independently as data changes. 
+One of the key advantages of React is that these custom components can update and render independently as data changes.
 
 Unlike traditional JavaScript, which requires direct manipulation of the DOM (Document Object Model), React uses a virtual DOM, which improves performance and efficiency. You’ll learn more about the virtual DOM and how it works in upcoming lecture videos.
 
@@ -24,7 +28,7 @@ With React, you can easily track and update the state of components, ensuring th
 
 While there are many libraries within the JavaScript ecosystem, freeCodeCamp will mainly be focused on teaching React because of its wide spread use and demand in the industry.
 
-Over the next few lectures, we will dive deeper into building custom components, managing state, and more. 
+Our next few lectures will dive deeper into building custom components, managing state, and more.
 
 # --questions--
 

curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md

@@ -2,17 +2,21 @@
 id: 6734e879c78ee6c61db25b90
 title: What Are Components in React, and How Do They Work?
 challengeType: 19
-# videoId: nVAaxZ34khk
+videoId: 0X9IvIhopZQ
 dashedName: what-are-components-in-react-and-how-do-they-work
 ---
 
 # --description--
 
-The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now:
+Watch the video and complete the assignment below.
+
+# --transcript--
+
+What are components in React, and how do they work?
 
 Components are the building blocks of React applications that allow developers to break down complex user interfaces into smaller, manageable pieces, making it easier to develop and maintain large-scale applications.
 
-The two types of components in React are functional and class based components. In modern React, developers will use functional components and all of the examples we look at today will be functional components. 
+The two types of components in React are functional and class based components. In modern React, developers will use functional components and all of the examples we look at today will be functional components.
 
 At a higher level, you can think of component like JavaScript functions that return elements describing the UI.
 
@@ -28,42 +32,41 @@ function Greeting() {
 }
 ```
 
-In this example, we've defined a component called Greeting. The curly braces `{}` inside the `h1` tags enable us to embed JavaScript expressions, allowing us to access the name variable within the h1 element.
+In this example, we've defined a component called `Greeting`. The curly braces `{}` inside the `h1` tags enable us to embed JavaScript expressions, allowing us to access the `name` variable within the `h1` element.
 
-We are also applying a `className` called title to the `h1` element. 
+We are also applying a `className` called `title` to the `h1` element.
 
-But why are we using `className` instead of class like with regular HTML elements? 
+But why are we using `className` instead of `class` like with regular HTML elements?
 
-Well this is because in JavaScript, `class` is a reserved name. So, we need to use `className` instead. 
+Well, this is because in JavaScript, `class` is a reserved name. So, we need to use `className` instead.
 
-We are also using a comment in JSX showing what the result will be. It is important to note that you can use regular comment syntax like this but it needs to be wrapped in curly braces in order for it to work.
+We are also using a comment in JSX showing what the result will be. It is important to note that you can use regular comment syntax like this but it needs to be wrapped in curly braces in order for it to work:
 
 ```js
 {/* Block Comments */}
 ```
 
 Another thing you might have noticed is that we are using a capital letter at the beginning of the component name. But why can’t we use all lower case letters?
 
-This is because React treats components with a capital letter as custom components, while elements with lowercase letters are considered built-in HTML elements. 
+This is because React treats components with a capital letter as custom components, while elements with lowercase letters are considered built-in HTML elements.
 
-When React encounters a lowercase tag (like `<div>` or `<span>`), it assumes it's a standard HTML element. However, if the component name starts with a capital letter, React will treat it as a user-defined component and render it accordingly. This distinction helps React differentiate between native HTML tags and components that you create.
+When React encounters a lowercase tag, like `<div>` or `<span>`, it assumes it's a standard HTML element. However, if the component name starts with a capital letter, React will treat it as a user-defined component and render it accordingly. This distinction helps React differentiate between native HTML tags and components that you create.
 
 To use this `Greeting` component in our application, we would write something like this:
 
 ```js
 <Greeting />
 ```
 
-This would render an `<h1>` element with the text `"Hello, John"` to the page. But take a closer look at the syntax here. When we use the component, it ends with a forward slash and then the greater than symbol.
+This would render an `h1` element with the text `Hello, John` to the page. But take a closer look at the syntax here. When we use the component, it ends with a forward slash and then the greater than symbol.
 
-When working with JSX, all tags and uses of components need to be explicitly closed. So if the component or tag does not have any children, then you need to explicitly close it like shown here
+When working with JSX, all tags and uses of components need to be explicitly closed. So if the component or tag does not have any children, then you need to explicitly close it like shown here:
 
 ```js
-<img />
-<MyComponent />
+<Greeting /> {/* /> is required */}
 ```
 
-So far we have only been looking at how to render a single h1 element. But you can actually render multiple elements. 
+So far we have only been looking at how to render a single `h1` element. But you can actually render multiple elements.
 
 Let’s take a look at the following example code here:
 
@@ -76,15 +79,13 @@ function Greeting() {
 }
 ```
 
-We are trying to add another sentence of `"Nice to meet you"` but it is not rendering on the page correctly. 
+We are trying to add another sentence of `Nice to meet you` but it is not rendering on the page correctly.
 
-There seems to be an error message instead. The error message says `"Adjacent JSX elements must be wrapped in an enclosing tag."`
+There seems to be an error message instead. The error message says `Adjacent JSX elements must be wrapped in an enclosing tag.`
 
-The reason why you are getting that error message is because multiple sibling elements need to be wrapped in a parent element. While you could wrap the h1 and p elements in a single div, there is another way to silence the error.
+The reason why you are getting that error message is because multiple sibling elements need to be wrapped in a parent element. While you could wrap the `h1` and `p` elements in a simple `div`, there is another way to silence the error.
 
-React `<Fragment>`s are used to group elements together.
-
-Here is what the revised example will look like:
+React fragments are used to group elements together. Here is what the revised example will look like:
 
 ```js
 function Greeting() {
@@ -98,10 +99,10 @@ function Greeting() {
 }
 ```
 
-You can also choose to use empty JSX tags which can serve as shorthand for Fragments. 
+You can also choose to use empty JSX tags which can serve as shorthand for fragments:
 
 ```js
- function Greeting() {
+function Greeting() {
   const name = "John";
   return (
     <>