mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-01 08:05:25 -05:00
fix(curriculum): fCC authors page - minor improvements (#60638)
This commit is contained in:
@@ -89,7 +89,7 @@ Axios
|
||||
|
||||
---
|
||||
|
||||
`Fetch` API
|
||||
Fetch API
|
||||
|
||||
#### --answer--
|
||||
|
||||
|
||||
@@ -18,16 +18,16 @@ dashedName: review-asynchronous-javascript
|
||||
- V8 is an example of a JavaScript engine developed by Google.
|
||||
- The **JavaScript runtime** is the environment in which JavaScript code is executed. It includes the JavaScript engine which processes and executes the code, and additional features like a web browser or Node.js.
|
||||
|
||||
## The fetch API
|
||||
## The Fetch API
|
||||
|
||||
- The `fetch` API allows web apps to make network requests, typically to retrieve or send data to the server. It provides a `fetch()` method that you can use to make these requests.
|
||||
- You can retrieve text, images, audio, JSON, and other types of data using the `fetch` API.
|
||||
- The Fetch API allows web apps to make network requests, typically to retrieve or send data to the server. It provides a `fetch()` method that you can use to make these requests.
|
||||
- You can retrieve text, images, audio, JSON, and other types of data using the Fetch API.
|
||||
|
||||
## HTTP methods for fetch API
|
||||
## HTTP methods for Fetch API
|
||||
|
||||
The `fetch` API supports various HTTP methods to interact with the server. The most common methods are:
|
||||
The Fetch API supports various HTTP methods to interact with the server. The most common methods are:
|
||||
|
||||
- **GET**: Used to retrieve data from the server. By default, the `fetch` API uses the `GET` method to retrieve data.
|
||||
- **GET**: Used to retrieve data from the server. By default, the Fetch API uses the `GET` method to retrieve data.
|
||||
|
||||
```js
|
||||
fetch('https://api.example.com/data')
|
||||
@@ -41,7 +41,7 @@ fetch('https://api.example.com/data')
|
||||
.then(data => console.log(data))
|
||||
```
|
||||
|
||||
In this code, the response coming from the fetch API is a promise and the `.then` handler is converting the response to a JSON format.
|
||||
In this code, the response coming from the Fetch API is a promise and the `.then` handler is converting the response to a JSON format.
|
||||
|
||||
- **POST**: Used to send data to the server. The `POST` method is used to create new resources on the server.
|
||||
|
||||
|
||||
@@ -581,7 +581,7 @@ const [state, action, isPending] = useActionState(actionFunction, initialState,
|
||||
|
||||
## Data Fetching in React
|
||||
|
||||
- **Options For Fetching Data**: There are many different ways to fetch data in React. You can use the native `Fetch` API, or third party tools like Axios or SWR.
|
||||
- **Options For Fetching Data**: There are many different ways to fetch data in React. You can use the native Fetch API, or third party tools like Axios or SWR.
|
||||
- **Commonly Used State Variables When Fetching Data**: Regardless of which way you choose to fetch your data in React, there are some pieces of state you will need to keep track of. The first is the data itself. The second will track whether the data is still being fetched. The third is a state variable that will capture any errors that might occur during the data fetching process.
|
||||
|
||||
```js
|
||||
|
||||
@@ -2743,16 +2743,16 @@ const curriedAverage = a => b => c => (a + b + c) / 3;
|
||||
- V8 is an example of a JavaScript engine developed by Google.
|
||||
- The **JavaScript runtime** is the environment in which JavaScript code is executed. It includes the JavaScript engine which processes and executes the code, and additional features like a web browser or Node.js.
|
||||
|
||||
## The fetch API
|
||||
## The Fetch API
|
||||
|
||||
- The `fetch` API allows web apps to make network requests, typically to retrieve or send data to the server. It provides a `fetch()` method that you can use to make these requests.
|
||||
- You can retrieve text, images, audio, JSON, and other types of data using the `fetch` API.
|
||||
- The Fetch API allows web apps to make network requests, typically to retrieve or send data to the server. It provides a `fetch()` method that you can use to make these requests.
|
||||
- You can retrieve text, images, audio, JSON, and other types of data using the Fetch API.
|
||||
|
||||
## HTTP methods for fetch API
|
||||
## HTTP methods for Fetch API
|
||||
|
||||
The `fetch` API supports various HTTP methods to interact with the server. The most common methods are:
|
||||
The Fetch API supports various HTTP methods to interact with the server. The most common methods are:
|
||||
|
||||
- **GET**: Used to retrieve data from the server. By default, the `fetch` API uses the `GET` method to retrieve data.
|
||||
- **GET**: Used to retrieve data from the server. By default, the Fetch API uses the `GET` method to retrieve data.
|
||||
|
||||
```js
|
||||
fetch('https://api.example.com/data')
|
||||
@@ -2766,7 +2766,7 @@ fetch('https://api.example.com/data')
|
||||
.then(data => console.log(data))
|
||||
```
|
||||
|
||||
In this code, the response coming from the fetch API is a promise and the `.then` handler is converting the response to a JSON format.
|
||||
In this code, the response coming from the Fetch API is a promise and the `.then` handler is converting the response to a JSON format.
|
||||
|
||||
- **POST**: Used to send data to the server. The `POST` method is used to create new resources on the server.
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@ const [state, action, isPending] = useActionState(actionFunction, initialState,
|
||||
|
||||
## Data Fetching in React
|
||||
|
||||
- **Options For Fetching Data**: There are many different ways to fetch data in React. You can use the native `Fetch` API, or third party tools like Axios or SWR.
|
||||
- **Options For Fetching Data**: There are many different ways to fetch data in React. You can use the native Fetch API, or third party tools like Axios or SWR.
|
||||
- **Commonly Used State Variables When Fetching Data**: Regardless of which way you choose to fetch your data in React, there are some pieces of state you will need to keep track of. The first is the data itself. The second will track whether the data is still being fetched. The third is a state variable that will capture any errors that might occur during the data fetching process.
|
||||
|
||||
```js
|
||||
|
||||
@@ -8,7 +8,7 @@ demoType: onLoad
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will learn how to work with the `fetch` API to load data from an external source and display it on a page filled with freeCodeCamp authors.
|
||||
In this workshop, you will learn how to work with the Fetch API to load data from an external source and display it on a page filled with freeCodeCamp authors.
|
||||
|
||||
All of the HTML and CSS for this workshop has been provided for you. You can take a look at the two files to familiarize yourself with them.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-22
|
||||
|
||||
# --description--
|
||||
|
||||
Some of the author bios are much longer than others. To give the cards a uniform look, you can extract the first 50 characters of each one and replace the rest with an ellipsis `("...")`. Otherwise, you can show the entire bio.
|
||||
Some of the author bios are much longer than others. To give the cards a uniform look, you can extract the first 50 characters of each one and replace the rest with an ellipsis `"..."`. Otherwise, you can show the entire bio.
|
||||
|
||||
Within the paragraph element, replace `bio` with a ternary operator. For the condition, check if the length of `bio` is greater than 50. If it is, use the `.slice()` method to extract the first 50 characters of `bio` and add an ellipsis at the end. Otherwise, show the full `bio`.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user