mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(curriculum): update first React module lectures (#57372)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Jessica Wilkins
+3
-7
@@ -23,16 +23,12 @@
|
||||
"title": "What Are Components in React, and How Do They Work?"
|
||||
},
|
||||
{
|
||||
"id": "6734e883fbc50ec642237caf",
|
||||
"title": "What Are Meta Frameworks, and Why Are They Commonly Used in the Industry?"
|
||||
"id": "674ba6876f7ada867135bb95",
|
||||
"title": "How Can You Import and Export Components in React?"
|
||||
},
|
||||
{
|
||||
"id": "6734e88cc46e6dc679420040",
|
||||
"title": "What Are Some Tools to Use to Set Up Projects Using a Library or Framework?"
|
||||
},
|
||||
{
|
||||
"id": "6734e89acc80e0c6afebb682",
|
||||
"title": "What Is Dependency Management, and How Does It Work with Libraries Like React?"
|
||||
"title": "What is Vite and How Can It Be Used to Setup a New React Project?"
|
||||
}
|
||||
],
|
||||
"helpCategory": "JavaScript"
|
||||
|
||||
+4
-4
@@ -54,11 +54,11 @@ Which of the following is an example of a JavaScript library?
|
||||
|
||||
## --answers--
|
||||
|
||||
Angular
|
||||
COBOL
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider which of these provides specific functions without dictating overall application structure.
|
||||
Review the beginning of the video where React libraries were first discussed.
|
||||
|
||||
---
|
||||
|
||||
@@ -70,7 +70,7 @@ Ruby on Rails
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider which of these provides specific functions without dictating overall application structure.
|
||||
Review the beginning of the video where React libraries were first discussed.
|
||||
|
||||
---
|
||||
|
||||
@@ -78,7 +78,7 @@ Swift
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider which of these provides specific functions without dictating overall application structure.
|
||||
Review the beginning of the video where React libraries were first discussed.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
+93
-5
@@ -14,20 +14,108 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What Is React, and What Is It Commonly Used For? question?
|
||||
What is one of the key advantages of React?
|
||||
|
||||
## --answers--
|
||||
|
||||
Answer 1
|
||||
It is only used for building mobile applications.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember that React does not directly work with the DOM but rather something else.
|
||||
|
||||
---
|
||||
|
||||
Answer 2
|
||||
It requires direct manipulation of the DOM for better performance.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember that React does not directly work with the DOM but rather something else.
|
||||
|
||||
---
|
||||
|
||||
Answer 3
|
||||
It uses a virtual DOM to improve performance and efficiency.
|
||||
|
||||
---
|
||||
|
||||
It cannot handle dynamic updates to UI components.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember that React does not directly work with the DOM but rather something else.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of state in React?
|
||||
|
||||
## --answers--
|
||||
|
||||
State determines the styling of UI components.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning the video where this was discussed.
|
||||
|
||||
---
|
||||
|
||||
State tracks and updates data that affects how a component renders and behaves.
|
||||
|
||||
---
|
||||
|
||||
State is used to manage the DOM directly.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning the video where this was discussed.
|
||||
|
||||
---
|
||||
|
||||
State is only used in functional components.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning the video where this was discussed.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Why is freeCodeCamp focusing on teaching React?
|
||||
|
||||
## --answers--
|
||||
|
||||
React is the only JavaScript library available.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about its React standing within the industry.
|
||||
|
||||
---
|
||||
|
||||
React has wide spread use and demand in the industry.
|
||||
|
||||
---
|
||||
|
||||
React is easy to learn and does not require state management.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about its React standing within the industry.
|
||||
|
||||
---
|
||||
|
||||
React is better for building back-end services.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about its React standing within the industry.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
+16
-16
@@ -14,39 +14,39 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
What is the primary purpose of components in React?
|
||||
What is the primary reason React uses `className` instead of `class` for HTML elements in JSX?
|
||||
|
||||
## --answers--
|
||||
|
||||
To handle server-side logic.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how components help in structuring a React application.
|
||||
`class` is a reserved keyword in JavaScript.
|
||||
|
||||
---
|
||||
|
||||
To manage database connections.
|
||||
`className` sounds nicer.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how components help in structuring a React application.
|
||||
Think about what `class` already means in JavaScript.
|
||||
|
||||
---
|
||||
|
||||
To create reusable UI elements.
|
||||
|
||||
---
|
||||
|
||||
To optimize JavaScript performance.
|
||||
Using `className` results in better security in React apps.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how components help in structuring a React application.
|
||||
Think about what `class` already means in JavaScript.
|
||||
|
||||
---
|
||||
|
||||
Using `className` results in faster performance.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what `class` already means in JavaScript.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
1
|
||||
|
||||
## --text--
|
||||
|
||||
@@ -98,7 +98,7 @@ Review the part of the video where it explains how components are rendered.
|
||||
|
||||
---
|
||||
|
||||
`<Message></Message>`
|
||||
`<</Message>`
|
||||
|
||||
### --feedback--
|
||||
|
||||
|
||||
-121
@@ -1,121 +0,0 @@
|
||||
---
|
||||
id: 6734e883fbc50ec642237caf
|
||||
title: What Are Meta Frameworks, and Why Are They Commonly Used in the Industry?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
dashedName: what-are-meta-frameworks-and-why-are-they-commonly-used-in-the-industry
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What is a key feature of meta frameworks like Next.js?
|
||||
|
||||
## --answers--
|
||||
|
||||
They replace the need for JavaScript libraries like React.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the main benefits that meta frameworks offer over using a library like React on its own.
|
||||
|
||||
---
|
||||
|
||||
They provide server-side rendering capabilities.
|
||||
|
||||
---
|
||||
|
||||
They only work with NoSQL databases.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the main benefits that meta frameworks offer over using a library like React on its own.
|
||||
|
||||
---
|
||||
|
||||
They are primarily used for mobile app development.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the main benefits that meta frameworks offer over using a library like React on its own.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
In Next.js, what is the purpose of the `getServerSideProps` function?
|
||||
|
||||
## --answers--
|
||||
|
||||
To define client-side routing.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how Next.js handles data fetching for server-side rendering.
|
||||
|
||||
---
|
||||
|
||||
To fetch data on the server before rendering a page.
|
||||
|
||||
---
|
||||
|
||||
To create a new React component.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how Next.js handles data fetching for server-side rendering.
|
||||
|
||||
---
|
||||
|
||||
To configure the project's build settings.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider how Next.js handles data fetching for server-side rendering.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Why are meta frameworks commonly used in the industry?
|
||||
|
||||
## --answers--
|
||||
|
||||
They are easier to learn than basic HTML and CSS
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the benefits that meta frameworks offer to development teams and businesses.
|
||||
|
||||
---
|
||||
|
||||
They only work with specific databases
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the benefits that meta frameworks offer to development teams and businesses.
|
||||
|
||||
---
|
||||
|
||||
They provide standardized project structures and built-in optimizations
|
||||
|
||||
---
|
||||
|
||||
They are required for all modern web applications
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about the benefits that meta frameworks offer to development teams and businesses.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
+60
-60
@@ -1,9 +1,9 @@
|
||||
---
|
||||
id: 6734e88cc46e6dc679420040
|
||||
title: What Are Some Tools to Use to Set Up Projects Using a Library or Framework?
|
||||
title: What is Vite and How Can It Be Used to Setup a New React Project?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
dashedName: what-are-some-tools-to-use-to-set-up-projects-using-a-library-or-framework
|
||||
dashedName: what-is-vite-and-how-can-it-be-used-to-setup-a-new-react-project
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -14,71 +14,35 @@ Watch the lecture video and answer the questions below.
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is NOT a primary purpose of project setup tools like Vite or Create React App?
|
||||
What is the main advantage of using Vite when starting a new React project?
|
||||
|
||||
## --answers--
|
||||
|
||||
Automating the creation of initial project structure.
|
||||
It automatically writes the main application logic for you.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what these tools do automatically versus what the developer typically needs to do themselves.
|
||||
Think about the speed difference between setting up a project on your own versus using Vite.
|
||||
|
||||
---
|
||||
|
||||
Setting up necessary configurations.
|
||||
It provides a faster development experience by automating configurations and build processes.
|
||||
|
||||
---
|
||||
|
||||
It spots all security vulnerabilities in your React project.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what these tools do automatically versus what the developer typically needs to do themselves.
|
||||
Think about the speed difference between setting up a project on your own versus using Vite.
|
||||
|
||||
---
|
||||
|
||||
Writing the main application logic.
|
||||
|
||||
---
|
||||
|
||||
Installing required dependencies.
|
||||
It installs external libraries like jQuery and Bootstrap.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what these tools do automatically versus what the developer typically needs to do themselves.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What command would you use to create a new React project using Vite?
|
||||
|
||||
## --answers--
|
||||
|
||||
`npm init vite my-react-app`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall the specific command mentioned in the lecture for creating a React project with Vite.
|
||||
|
||||
---
|
||||
|
||||
`npm create vite@latest my-react-app -- --template react`
|
||||
|
||||
---
|
||||
|
||||
`npx create-react-app my-react-app`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall the specific command mentioned in the lecture for creating a React project with Vite.
|
||||
|
||||
---
|
||||
|
||||
`vite new my-react-app --react`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall the specific command mentioned in the lecture for creating a React project with Vite.
|
||||
Think about the speed difference between setting up a project on your own versus using Vite.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
@@ -86,35 +50,71 @@ Recall the specific command mentioned in the lecture for creating a React projec
|
||||
|
||||
## --text--
|
||||
|
||||
Which tool provides an interactive project scaffolding experience for Vue.js projects?
|
||||
What does the `npm install` command do after creating a new React project with Vite?
|
||||
|
||||
## --answers--
|
||||
|
||||
Create React App
|
||||
It starts the development server.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember which tool was mentioned specifically for Vue.js projects that asks questions about your project setup.
|
||||
Consider what needs to happen before you can run the project.
|
||||
|
||||
---
|
||||
|
||||
Angular CLI
|
||||
It installs the dependencies listed in the `package.json` file.
|
||||
|
||||
---
|
||||
|
||||
It opens the project in the browser.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember which tool was mentioned specifically for Vue.js projects that asks questions about your project setup.
|
||||
Consider what needs to happen before you can run the project.
|
||||
|
||||
---
|
||||
|
||||
Vue CLI
|
||||
|
||||
---
|
||||
|
||||
Yeoman
|
||||
It creates the `App.jsx` file.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember which tool was mentioned specifically for Vue.js projects that asks questions about your project setup.
|
||||
Consider what needs to happen before you can run the project.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Which directory contains the starting code that is found in the `App.jsx` file?
|
||||
|
||||
## --answers--
|
||||
|
||||
`home`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the end of the video where this was discussed.
|
||||
|
||||
---
|
||||
|
||||
`index`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the end of the video where this was discussed.
|
||||
|
||||
---
|
||||
|
||||
`src`
|
||||
|
||||
---
|
||||
|
||||
`public`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the end of the video where this was discussed.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
-121
@@ -1,121 +0,0 @@
|
||||
---
|
||||
id: 6734e89acc80e0c6afebb682
|
||||
title: What Is Dependency Management, and How Does It Work with Libraries Like React?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
dashedName: what-is-dependency-management-and-how-does-it-work-with-libraries-like-react
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What is the primary purpose of the `package.json` file in a React project?
|
||||
|
||||
## --answers--
|
||||
|
||||
To store the project's source code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information the package manager needs to install the correct packages for your project.
|
||||
|
||||
---
|
||||
|
||||
To list the project's dependencies and their versions.
|
||||
|
||||
---
|
||||
|
||||
To configure the React framework.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information the package manager needs to install the correct packages for your project.
|
||||
|
||||
---
|
||||
|
||||
To store the compiled JavaScript code.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what information the package manager needs to install the correct packages for your project.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
Which command would you use to add a new dependency to a React project using npm?
|
||||
|
||||
## --answers--
|
||||
|
||||
`npm add react-router-dom`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the most common npm command used to add new packages to a project.
|
||||
|
||||
---
|
||||
|
||||
`npm install react-router-dom`
|
||||
|
||||
---
|
||||
|
||||
`npm update react-router-dom`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the most common npm command used to add new packages to a project.
|
||||
|
||||
---
|
||||
|
||||
`npm new react-router-dom`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Consider the most common npm command used to add new packages to a project.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of the caret (`^`) symbol in a dependency version in `package.json`?
|
||||
|
||||
## --answers--
|
||||
|
||||
It allows only patch updates.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how semantic versioning works and how package managers use it to manage updates.
|
||||
|
||||
---
|
||||
|
||||
It allows minor and patch updates, but not major version changes.
|
||||
|
||||
---
|
||||
|
||||
It always installs the latest version, regardless of compatibility.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how semantic versioning works and how package managers use it to manage updates.
|
||||
|
||||
---
|
||||
|
||||
It prevents any updates to the package.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about how semantic versioning works and how package managers use it to manage updates.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
+169
@@ -0,0 +1,169 @@
|
||||
---
|
||||
id: 674ba6876f7ada867135bb95
|
||||
title: How Can You Import and Export Components in React?
|
||||
challengeType: 11
|
||||
videoId: nVAaxZ34khk
|
||||
dashedName: how-can-you-import-and-export-components-in-react
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the lecture video and answer the questions below.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
Which of the following is the correct way to export a React component?
|
||||
|
||||
## --answers--
|
||||
|
||||
```js
|
||||
export default function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Cute cats running in the grass."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
exportComponent function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Cute cats running in the grass."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle of the video where this was discussed.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
e.default function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Cute cats running in the grass."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle of the video where this was discussed.
|
||||
|
||||
---
|
||||
|
||||
```js
|
||||
default function Cat() {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Mr. Whiskers</h2>
|
||||
<img
|
||||
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"
|
||||
alt="Cute cats running in the grass."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle of the video where this was discussed.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
1
|
||||
|
||||
## --text--
|
||||
|
||||
Where would you typically import a child component like the `Cat` component in a React project?
|
||||
|
||||
## --answers--
|
||||
|
||||
Inside the `index.html` file.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about where components are commonly composed together in a React project.
|
||||
|
||||
---
|
||||
|
||||
Inside the `cat-photo-app.css` file.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about where components are commonly composed together in a React project.
|
||||
|
||||
---
|
||||
|
||||
In a parent component or the root component file (typically `App.jsx`).
|
||||
|
||||
---
|
||||
|
||||
In the public folder.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about where components are commonly composed together in a React project.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What is the purpose of the `import` statement in the `App` component?
|
||||
|
||||
## --answers--
|
||||
|
||||
It automatically styles the `App` component.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember that you learned how to work with imports in earlier lecture videos.
|
||||
|
||||
---
|
||||
|
||||
It imports the `Cat` component, allowing it to be used within the `App` component.
|
||||
|
||||
---
|
||||
|
||||
It sets the default state for the `App` component.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember that you learned how to work with imports in earlier lecture videos.
|
||||
|
||||
---
|
||||
|
||||
It allows the `App` to run faster.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Remember that you learned how to work with imports in earlier lecture videos.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
Reference in New Issue
Block a user