From 3d76f10574987e412fa4f8da2d73b6f684d7c8b7 Mon Sep 17 00:00:00 2001 From: Liam Maguire <89417801+liammaguire1@users.noreply.github.com> Date: Mon, 28 Jul 2025 22:38:29 -0400 Subject: [PATCH] fix(curriculum): remove videos from React fundamentals lecture blocks (#61545) --- .../6734e3a9cc78faaf4248d335.md | 15 ++++----------- .../6734e867bbf41cc5b11648c4.md | 9 +-------- .../6734e86f590727c5e7e9ec5e.md | 15 ++++----------- .../6734e879c78ee6c61db25b90.md | 15 ++++----------- .../6734e88cc46e6dc679420040.md | 15 ++++----------- .../674ba6876f7ada867135bb95.md | 15 ++++----------- .../6734e3ceee2da4b0301719b7.md | 9 +-------- .../673500abfe36cd015b67b1b7.md | 9 +-------- .../673500b41af8500191febedc.md | 9 +-------- .../673500bfe1f41601c1ddb1a2.md | 9 +-------- 10 files changed, 25 insertions(+), 95 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md index 0771d273420..fd4521640b9 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e3a9cc78faaf4248d335.md @@ -1,19 +1,12 @@ --- id: 6734e3a9cc78faaf4248d335 title: What Is the Role of JS Libraries and Frameworks, and Why Are They Used in the Industry? -challengeType: 11 -videoId: AJMjp3NxnEA +challengeType: 19 dashedName: what-is-the-role-of-js-libraries-and-frameworks-and-why-are-they-used-in-the-industry --- # --description-- -Watch the video or read the transcript 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. @@ -92,7 +85,7 @@ COBOL ### --feedback-- -Review the beginning of the video where React libraries were first discussed. +Review the beginning section where React libraries were first discussed. --- @@ -104,7 +97,7 @@ Ruby on Rails ### --feedback-- -Review the beginning of the video where React libraries were first discussed. +Review the beginning section where React libraries were first discussed. --- @@ -112,7 +105,7 @@ Swift ### --feedback-- -Review the beginning of the video where React libraries were first discussed. +Review the beginning section where React libraries were first discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md index e1c7299d4ec..bbf8edf7623 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e867bbf41cc5b11648c4.md @@ -1,19 +1,12 @@ --- id: 6734e867bbf41cc5b11648c4 title: What Are Single Page Applications, and What Are Some Issues Surrounding Them? -challengeType: 11 -videoId: pqTVIg2JTJc +challengeType: 19 dashedName: what-are-single-page-applications-and-what-are-some-issues-surrounding-them --- # --description-- -Watch the video or read the transcript 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 with a set of challenges and considerations. SPAs heavily use JavaScript to manage the application's state and render content. Instead of requesting new HTML pages from the server, SPAs use JavaScript to manipulate the DOM and fetch data asynchronously. This is often done using libraries and frameworks like React, Vue, or Angular, which provide great tools for building complex user interfaces. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md index 1ef153d3f32..f1e714afb7e 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e86f590727c5e7e9ec5e.md @@ -1,19 +1,12 @@ --- id: 6734e86f590727c5e7e9ec5e title: What Is React, and What Is It Commonly Used For? -challengeType: 11 -videoId: 1FGlfBVLSOA +challengeType: 19 dashedName: what-is-react-and-what-is-it-commonly-used-for --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --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. @@ -78,7 +71,7 @@ State determines the styling of UI components. ### --feedback-- -Review the beginning the video where this was discussed. +Review the beginning section where this was discussed. --- @@ -90,7 +83,7 @@ State is used to manage the DOM directly. ### --feedback-- -Review the beginning the video where this was discussed. +Review the beginning section where this was discussed. --- @@ -98,7 +91,7 @@ State is only used in functional components. ### --feedback-- -Review the beginning the video where this was discussed. +Review the beginning section where this was discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md index 2127718f402..36bd5391a75 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e879c78ee6c61db25b90.md @@ -1,19 +1,12 @@ --- id: 6734e879c78ee6c61db25b90 title: What Are Components in React, and How Do They Work? -challengeType: 11 -videoId: 0X9IvIhopZQ +challengeType: 19 dashedName: what-are-components-in-react-and-how-do-they-work --- # --description-- -Watch the video or read the transcript and answer the questions 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. @@ -199,7 +192,7 @@ How would you render a `Message` component in React? ### --feedback-- -Review the part of the video where it explains how components are rendered. +Review the section where it explains how components are rendered. --- @@ -207,7 +200,7 @@ Review the part of the video where it explains how components are rendered. ### --feedback-- -Review the part of the video where it explains how components are rendered. +Review the section where it explains how components are rendered. --- @@ -215,7 +208,7 @@ Review the part of the video where it explains how components are rendered. ### --feedback-- -Review the part of the video where it explains how components are rendered. +Review the section where it explains how components are rendered. --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md index c544d03f4c3..d6fce6e3048 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md @@ -1,19 +1,12 @@ --- id: 6734e88cc46e6dc679420040 title: What is Vite, and How Can It Be Used to Set Up a New React Project? -challengeType: 11 -videoId: lzU9WdGBjlw +challengeType: 19 dashedName: what-is-vite-and-how-can-it-be-used-to-set-up-a-new-react-project --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is Vite, and how can it be used to set up a new React project? - Unlike working with smaller vanilla HTML, CSS, and JavaScript projects, starting a new React project includes a few more steps to ensure that everything runs correctly. Instead of trying to set up of all of the necessary configurations by yourself, there are tools that will do that for you. One of the most popular tools for setting up projects is Vite. Vite, which means "fast" in French, is a build tool that aims to provide a faster development experience for modern web projects. Vite can be used with React, as well as with other libraries and frameworks like Vue or Svelte. You can even use it with vanilla JavaScript projects. @@ -149,7 +142,7 @@ Which directory contains the starting code that is found in the `App.jsx` file? ### --feedback-- -Review the end of the video where this was discussed. +Review the end section where this was discussed. --- @@ -157,7 +150,7 @@ Review the end of the video where this was discussed. ### --feedback-- -Review the end of the video where this was discussed. +Review the end section where this was discussed. --- @@ -169,7 +162,7 @@ Review the end of the video where this was discussed. ### --feedback-- -Review the end of the video where this was discussed. +Review the end section where this was discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md index 7c554a565e8..20fa5bc4a26 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-javascript-libraries-and-frameworks/674ba6876f7ada867135bb95.md @@ -1,19 +1,12 @@ --- id: 674ba6876f7ada867135bb95 title: How Can You Import and Export Components in React? -challengeType: 11 -videoId: XWvb9g1IjR4 +challengeType: 19 dashedName: how-can-you-import-and-export-components-in-react --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How can you import and export components in React? - In earlier lecture videos, you learned how to work with imports and exports in JavaScript. In this lecture, we will take a look at how to import and export components in React. In this example, we have a `Cat` component that belongs in a file called `Cat.jsx`. For the file extension, we are using the `.jsx` file extension because this file is mainly working with JSX. @@ -148,7 +141,7 @@ exportComponent function Cat() { ### --feedback-- -Review the middle of the video where this was discussed. +Review the middle section where this was discussed. --- @@ -168,7 +161,7 @@ e.default function Cat() { ### --feedback-- -Review the middle of the video where this was discussed. +Review the middle section where this was discussed. --- @@ -188,7 +181,7 @@ default function Cat() { ### --feedback-- -Review the middle of the video where this was discussed. +Review the middle section where this was discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md index fc412e392f5..a5cb6b576df 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/6734e3ceee2da4b0301719b7.md @@ -1,19 +1,12 @@ --- id: 6734e3ceee2da4b0301719b7 title: How Do You Pass Props from a Parent Component to a Child Component in React? -challengeType: 11 -videoId: kUJ6yGagVtE +challengeType: 19 dashedName: how-do-you-pass-props-from-a-parent-component-to-a-child-component-in-react --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you pass props from a parent component to a child component in react? - In the previous lectures, we learned how to build small components in React like this: ```jsx diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md index 34750fe37d6..a1051d2be09 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500abfe36cd015b67b1b7.md @@ -1,19 +1,12 @@ --- id: 673500abfe36cd015b67b1b7 title: How Does Conditional Rendering Work in React Components? -challengeType: 11 -videoId: jSwg6t4FOBc +challengeType: 19 dashedName: how-does-conditional-rendering-work-in-react-components --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How does conditional rendering work in react components? - Conditional rendering in React allows you to create dynamic user interfaces. It is used to show different content based on certain conditions or states within your application. The most common approaches of using conditional rendering includes using `if` statements, the ternary (`?:`) operator, and logical AND (`&&`) operator. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md index 04e21526312..9f4535a0f71 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500b41af8500191febedc.md @@ -1,19 +1,12 @@ --- id: 673500b41af8500191febedc title: How Do You Render Lists in React? -challengeType: 11 -videoId: EXuI5_x3tEM +challengeType: 19 dashedName: how-do-you-render-lists-in-react --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you render lists in React? - Rendering lists is a fundamental task in React web apps, and is used for displaying data to users. In React, the `map` method is used to transform an array of data into an array of JSX elements that can be rendered in the UI. Here is an example of a component called `FruitList` that displays a list of fruits: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md index 35311a0f81c..8578048debe 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-data-in-react/673500bfe1f41601c1ddb1a2.md @@ -1,19 +1,12 @@ --- id: 673500bfe1f41601c1ddb1a2 title: How Do Inline Styles Work in React? -challengeType: 11 -videoId: SMnrYMHFvbA +challengeType: 19 dashedName: how-do-inline-styles-work-in-react --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do inline styles work in react? - In React, inline styles are used to apply CSS styles directly to React elements within your JSX code instead of defining them in separate CSS files. React's approach to inline styles involves using JavaScript objects to define styles, rather than traditional CSS strings. This means that instead of writing styles as you would in a CSS file, you create a JavaScript object where the keys are camel cased versions of CSS property names, and the values are the strings of CSS values.