diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1a82dad69dc95546e5f0d.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1a82dad69dc95546e5f0d.md index df42c5f9453..6816464c036 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1a82dad69dc95546e5f0d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1a82dad69dc95546e5f0d.md @@ -1,19 +1,12 @@ --- id: 67d1a82dad69dc95546e5f0d title: How Do You Reference Values Using Refs? -challengeType: 11 -videoId: gA0MGdlEubs +challengeType: 19 dashedName: how-do-you-reference-values-using-refs --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you reference values using refs? - In React, there may be situations where you need direct access to a DOM element. That's where "refs" come in handy. Refs can also store mutable values, but state is a better choice for that. In vanilla JavaScript, you used the `getElementById()` and `querySelector()` methods to access DOM elements. But in React, you use refs to access elements in the DOM. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec6711b62f1cc5cc52e1.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec6711b62f1cc5cc52e1.md index 7a291ae5383..eba1ca2718c 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec6711b62f1cc5cc52e1.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec6711b62f1cc5cc52e1.md @@ -1,19 +1,12 @@ --- id: 67d1ec6711b62f1cc5cc52e1 title: What Are Effects in React, and How Does the useEffect Hook Work? -challengeType: 11 -videoId: Dtd_8qxFM1w +challengeType: 19 dashedName: what-are-effects-in-react-and-how-does-the-useeffect-hook-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are effects in React, and how does the `useEffect` hook work? - In React, an effect is anything that happens outside the component rendering process. That is, anything React does not handle directly as part of rendering the UI. Common examples include fetching data, updating the browser tab's title, reading from or writing to the browser's local storage, getting the user's location, and much more. These operations interact with the outside world and are known as side effects. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec87b34cee1d9219f7e9.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec87b34cee1d9219f7e9.md index b0a694d82a3..9bec1a1c43b 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec87b34cee1d9219f7e9.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-effects-and-referencing-values-in-react/67d1ec87b34cee1d9219f7e9.md @@ -1,19 +1,12 @@ --- id: 67d1ec87b34cee1d9219f7e9 title: How Can You Create Custom Hooks in React? -challengeType: 11 -videoId: r9MI-2J01PY +challengeType: 19 dashedName: how-can-you-create-custom-hooks-in-react --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How can you create custom hooks in React? - React provides many built-in hooks that let you implement different features in your projects. These include `useState`, `useEffect`, `useContext`, and others. But sometimes, you'll need to add a feature that none of the built-in hooks can help with. Fortunately, you can create your own custom hooks in React. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md index 6cb3c04ad11..a8934035500 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67d1a928ae86929a85c1bb6b.md @@ -1,19 +1,12 @@ --- id: 67d1a928ae86929a85c1bb6b title: How Do Forms Work in React? -challengeType: 11 -videoId: t9ax7VY00m0 +challengeType: 19 dashedName: how-do-forms-work-in-react --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do forms work in React? - Forms are fundamental to every web application because they let you handle user input, collect data, and trigger actions. In React, forms are managed using state or refs, giving you full control over their behavior and validation. These two ways to manage forms are called "controlled" and "uncontrolled" input. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md index f5754d8c452..ec7a5868ea3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-forms-in-react/67e2a4cab99d4e8bc795e99d.md @@ -1,19 +1,12 @@ --- id: 67e2a4cab99d4e8bc795e99d title: What Is the useActionState Hook, and How Does It Work? -challengeType: 11 -videoId: GARlXz-vIFg +challengeType: 19 dashedName: what-is-the-useactionstate-hook-and-how-does-it-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is the `useActionState` hook and how does it work? - React 19 came with two notable new features called server components and server actions.  From that version onwards, server components became the default in frameworks like Next.js that readily support them. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1a3fea729e274dc33d04d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1a3fea729e274dc33d04d.md index 60f6cf7cdef..d7ef5890bb3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1a3fea729e274dc33d04d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1a3fea729e274dc33d04d.md @@ -1,19 +1,12 @@ --- id: 67d1a3fea729e274dc33d04d title: How Do Events Work in React? -challengeType: 11 -videoId: M8kyPCAb94w +challengeType: 19 dashedName: how-do-events-work-in-react --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do events work in React? - Event handling is an essential part of every interactive website. React provides a powerful and consistent way to handle events through its Synthetic Event System, which is a wrapper around native events like `click`, `keydown`, and `submit` you learned about in earlier lectures. @@ -104,7 +97,7 @@ By only using native browser events. ### --feedback-- -Review the beginning of the video where the answer was discussed. +Review the beginning of the lecture where the answer was discussed. --- @@ -112,7 +105,7 @@ By creating custom events for each browser. ### --feedback-- -Review the beginning of the video where the answer was discussed. +Review the beginning of the lecture where the answer was discussed. --- @@ -124,7 +117,7 @@ By directly modifying the DOM for each event. ### --feedback-- -Review the beginning of the video where the answer was discussed. +Review the beginning of the lecture where the answer was discussed. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eaf77f510e15dfed7c14.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eaf77f510e15dfed7c14.md index 2eedcb0bf22..841df94d35f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eaf77f510e15dfed7c14.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eaf77f510e15dfed7c14.md @@ -1,19 +1,12 @@ --- id: 67d1eaf77f510e15dfed7c14 title: What is State, and How Does the useState Hook Work? -challengeType: 11 -videoId: d4guPmZvH_M +challengeType: 19 dashedName: what-is-state-and-how-does-the-usestate-hook-work --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is state, and how does the `useState` hook work? - State is one of the most important fundamentals of React and other frontend frameworks. It's like the brain of a component, meaning it holds information that can change over time and controls how the components behave and look. Let's look into what state is and how the `useState` hook lets you work with it. @@ -139,7 +132,7 @@ React 15.6 ### --feedback-- -Review the beginning of the video where the answer was discussed. +Review the beginning of the lecture where the answer was discussed. --- @@ -151,7 +144,7 @@ React 17.0 ### --feedback-- -Review the beginning of the video where the answer was discussed. +Review the beginning of the lecture where the answer was discussed. --- @@ -159,7 +152,7 @@ React 18.2 ### --feedback-- -Review the beginning of the video where the answer was discussed. +Review the beginning of the lecture where the answer was discussed. ## --video-solution-- @@ -217,7 +210,7 @@ const [formData, setFormData] = useState(< ### --feedback-- -Review the end of the video where the answer was discussed. +Review the end of the lecture where the answer was discussed. --- @@ -231,7 +224,7 @@ const ref = useState({ ### --feedback-- -Review the end of the video where the answer was discussed. +Review the end of the lecture where the answer was discussed. --- @@ -245,7 +238,7 @@ const = useState({ ### --feedback-- -Review the end of the video where the answer was discussed. +Review the end of the lecture where the answer was discussed. --- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eb6929e68117faa6717f.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eb6929e68117faa6717f.md index 73ecd851929..a69fc629b3e 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eb6929e68117faa6717f.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1eb6929e68117faa6717f.md @@ -1,19 +1,12 @@ --- id: 67d1eb6929e68117faa6717f title: What Is Rendering in React, and How Are Components Displayed on the Screen? -challengeType: 11 -videoId: KLWTruxP1a8 +challengeType: 19 dashedName: what-is-rendering-in-react-and-how-are-components-displayed-on-the-screen --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What is rendering in React, and how are components displayed on the screen? - In React, rendering is the process by which components appear in the user interface (UI), usually the browser. React takes all your JavaScript, JSX, and CSS code, figures out how it should look, and then displays it in the user interface. @@ -74,7 +67,7 @@ Start, load, and finish. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. --- @@ -82,7 +75,7 @@ Initialize, update, and complete. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. --- @@ -94,7 +87,7 @@ Begin, process, and end. ### --feedback-- -Review the beginning of the video for the answer. +Review the beginning of the lecture for the answer. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebb595f4f619c0e35d1a.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebb595f4f619c0e35d1a.md index 83dc5db0b99..2375c9a98e1 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebb595f4f619c0e35d1a.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebb595f4f619c0e35d1a.md @@ -1,19 +1,12 @@ --- id: 67d1ebb595f4f619c0e35d1a title: How Do You Update Objects in State? -challengeType: 11 -videoId: BwHJrBW-m0M +challengeType: 19 dashedName: how-do-you-update-objects-in-state --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you update objects in state? - Updating objects in state in React can be tricky if you're used to changing object property values directly. React treats state as immutable, meaning you should not modify it directly. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebcab4e0521a6654bb64.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebcab4e0521a6654bb64.md index 94a46898886..57009bb6f10 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebcab4e0521a6654bb64.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-state-and-responding-to-events-in-react/67d1ebcab4e0521a6654bb64.md @@ -1,19 +1,12 @@ --- id: 67d1ebcab4e0521a6654bb64 title: How Do You Update Arrays in State? -challengeType: 11 -videoId: HviNQSO369k +challengeType: 19 dashedName: how-do-you-update-arrays-in-state --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How do you update arrays in state? - In React, updating arrays in state is quite straightforward, but it can be easy to make a mistake, especially if you're coming from vanilla JavaScript where you can modify arrays directly. In React, state is treated as immutable so it can recognize changes and make the proper updates to the user interface.