From 7e10d90f5ab62b61ce4c202bf46d01bb47fbd35a Mon Sep 17 00:00:00 2001 From: Tom <20648924+moT01@users.noreply.github.com> Date: Fri, 4 Apr 2025 05:41:12 -0500 Subject: [PATCH] feat(curriculum): videos and transcripts for react dependencies and frameworks (#59486) --- .../67d1ab248317a5a29058a763.md | 74 ++++++++++- .../67d311627010a0efa127b651.md | 121 +++++++++++++++++- .../67d311d256c58ef01e0d62ec.md | 49 ++++++- 3 files changed, 237 insertions(+), 7 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d1ab248317a5a29058a763.md b/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d1ab248317a5a29058a763.md index c312658b093..c80ef693a50 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d1ab248317a5a29058a763.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d1ab248317a5a29058a763.md @@ -2,13 +2,81 @@ id: 67d1ab248317a5a29058a763 title: What Is Dependency Management, and How Does It Work with Libraries Like React? challengeType: 11 -videoId: nVAaxZ34khk +videoId: Jv0dHvSoN8E dashedName: what-is-dependency-management-and-how-does-it-work-with-libraries-like-react --- # --description-- -Watch the video lecture and answer the questions below. +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. + +When you are working with more complex projects, you will often need to rely on many dependencies. If a set of dependencies is not well managed or defined in a project, then that will lead to what is known as dependency hell. + +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. + +To create a new React project using Vite and npm you can run the following command: + +```sh +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. + +You can view all of the dependencies in the `package.json` file which is located in the root directory of your project. + +The `package.json` file is a key configuration file in projects that contains metadata about your project, including its name, version, and dependencies. It also defines scripts, licensing information, and other settings that help manage the project and its dependencies. + +When you install dependencies, a `node_modules` folder will be added to your project. + +The `node_modules` folder is where all the packages and libraries required by your project are stored. This folder contains the actual code for the dependencies listed in the `package.json` file, including both your project's direct dependencies and any dependencies of those dependencies. + +The two core dependencies needed for a React project will be the `react` and `react-dom` packages: + +```json +"dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" +} +``` + +The `package.json` will list the current versions you are using for those packages. If you need to update any packages locally, you can run the `npm update` command. Or you can update all packages globally by running the `npm update -g` command. + +In addition to the `package.json` file, you will also have a `package-lock.json` file. This file will lock down the exact versions of all packages that your project is using. When you update a package, then the new versions will be updated in the lock file as well. + +Another important aspect of the `package.json` file are the dev dependencies: + +```json +"devDependencies": { + "@eslint/js": "^9.17.0", + "@types/react": "^18.3.18", + "@types/react-dom": "^18.3.5", + "@vitejs/plugin-react": "^4.3.4", + "eslint": "^9.17.0", + "eslint-plugin-react": "^7.37.2", + "eslint-plugin-react-hooks": "^5.0.0", + "eslint-plugin-react-refresh": "^0.4.16", + "globals": "^15.14.0", + "vite": "^6.0.5" +} +``` + +Dev dependencies are packages that are only used for development and not in production. An example of this would be a testing library like Jest. You would install Jest as a dev dependency because you only use it to test your project locally, and isn't needed for the application to run in production. + +For the majority of this lecture, we have been focusing on npm. But there are other package mangers like yarn and pnpm. So which package manager should you use for your project? + +Well, the short answer is it depends. + +If you are joining an existing project with a team, then all of those decisions will be made for you and you will use the existing package manager. If you are building out a project from scratch, then you will need to research the pros and cons of each manager and decide which one will better suit your needs. # --questions-- @@ -86,7 +154,7 @@ Packages that are only used for development and not in production. ## --text-- -Which of the following is NOT an example of a popular package manager for JavaScript? +Which of the following is NOT mentioned in the video as an example of a popular package manager for JavaScript? ## --answers-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311627010a0efa127b651.md b/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311627010a0efa127b651.md index 16c6fb580a3..032d431c82d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311627010a0efa127b651.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311627010a0efa127b651.md @@ -2,13 +2,130 @@ id: 67d311627010a0efa127b651 title: How Does Routing Work in React? challengeType: 11 -videoId: nVAaxZ34khk +videoId: zQcyjZFiX1A dashedName: how-does-routing-work-in-react --- # --description-- -Watch the lecture video and answer the questions below. +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? + +Well, that is where React Router comes in. + +React Router is a third party library that allows you to add routing to your React applications. To begin, you will need to install React Router in an existing React project like this: + +```sh +npm i react-router +``` + +If you check the `package.json` file, you will see that `react-router` was added to the list of dependencies: + +```json +"dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router": "^7.2.0" +} +``` + +Then inside of your `main.jsx` or `index.jsx` file, you will need to import `BrowserRouter` and render `BrowserRouter` around your `App` component: + +```js +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { BrowserRouter } from "react-router"; +import App from "./App.jsx"; + +import "./index.css"; + +createRoot(document.getElementById("root")).render( + + + + + +); +``` + +To enable routes in your application, you will need to update your `import` statement to include the `Routes` and `Route` components like this: + +```js +import { BrowserRouter, Routes, Route } from "react-router"; +``` + +Then inside of the `BrowserRouter`, add the `Routes` and `Route` components: + +```js +createRoot(document.getElementById("root")).render( + + + + } /> + + + +); +``` + +The `path` and `element` are used to couple the URL and UI components together. In this case, we are setting up a route for the homepage that points to the `App` component. + +It is common in larger applications to have multiple views and routes setup like this: + +```js + + } /> + } /> + + + } /> + } /> + } /> + } /> + + +``` + +The `index` prop in these examples is meant to represent the default route for a given path segment. So the `Home` component will be shown at the root path (`/`) while the `ProductsHome` component will be shown at the `products` path. + +You may have also noticed that we are nesting a few routes inside another route like this: + +```js + + } /> + +``` + +This means that the path of the child route will be appended to the parent route's path. So in this example, the `path` for the trending products will be `products/trending`. + +If the `path` begins with a colon (`:`) then that represents a dynamic segment in the route: + +```js +} /> +``` + +In this example we have a dynamic segment called `category`. When a user navigates to a URL like `products/brass-instruments`, then the view will change to the `Category` component and you can dynamically fetch the appropriate data based on the segment. + +You can access the value of the dynamic segment by using the `useParams` hook inside the child component like this: + +```js +import { useParams } from "react-router"; + +export default function Category() { + let params = useParams(); + {/* Accessing the category param: params.category */} + {/* rest of code goes here */} +} +``` + +Dynamic routes are helpful because they allow you to create flexible and reusable components that can render different content based on the parameters in the URL. Instead of defining a fixed list of paths for every possible route, you can use dynamic segments to render various content based on what the user has requested. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311d256c58ef01e0d62ec.md b/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311d256c58ef01e0d62ec.md index 21ec7a916e8..4bbbec3afd3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311d256c58ef01e0d62ec.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-routing-react-frameworks-and-dependency-management-tools/67d311d256c58ef01e0d62ec.md @@ -2,13 +2,58 @@ id: 67d311d256c58ef01e0d62ec title: What Are React Frameworks, and Why Are They Commonly Used in the Industry? challengeType: 11 -videoId: nVAaxZ34khk +videoId: fGj4azmffXQ dashedName: what-are-react-frameworks-and-why-are-they-commonly-used-in-the-industry --- # --description-- -Watch the lecture video and answer the questions below. +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. + +While all of these are viable options, there are times where you might want to use a React framework instead. React frameworks provide features like routing, image optimizations, data fetching, authentication and more. This means that you might not need to set up separate frontend and backend applications for certain use cases. + +Let's take a closer look at Next.js which is a popular React framework. One of the main features for Next.js is the file-system based router. This routing system includes support for dynamic routes, parallel routes, route handlers, redirects, internalization and more. + +Here is an example of creating a custom request handler: + +```js +export async function GET() { + const res = await fetch("https://example-api.com"); + const data = await res.json(); + + return Response.json({ data }); +} +``` + +You can define route handlers like GET or POST requests in a file called `route.js` inside the `app/api` directory. + +Another feature of Next.js are the automatic image and font optimizations. + +Here is an example of working with the `Image` component inside a `page.js` file: + +```js +import Image from "next/image"; + +export default function Page() { + return ( + descriptive-title-goes-here + ); +} +``` + +The `Image` component extends the native HTML `img` element and allows for faster page loads and size optimizations. This means that images will only load when they enter the viewport and the `Image` component will automatically serve correctly sized images for each device. + +While those are just a few features of Next.js, there are many more features that you can use to build robust full stack web applications. There are also other React frameworks like Remix that will provide the same ability to build out modern full stack web applications. + +Even though the JavaScript library and framework landscape is constantly changing, it is important to be aware of the available options to you and learn about each framework's pros and cons. # --questions--