Подробное руководство по извлечению и отправке данных в React.js с помощью стилей Axios и Tailwind CSS
Подробное руководство по извлечению, получению, отправке и изменению данных в React.js с помощью стилей Axios и Tailwind CSS
В веб-разработке выборка, получение, отправка и изменение данных являются общими задачами, необходимыми для создания интерактивных и динамических веб-приложений. Одной из популярных библиотек для выполнения HTTP-запросов в JavaScript является Axios, которую можно использовать в сочетании с Promise и Try-Catch для обработки асинхронных операций и ошибок более удобным для чтения и сопровождения способом. В этом сообщении блога мы рассмотрим, как использовать Axios, Promise и Try-Catch в React.js для извлечения, получения, отправки и изменения данных из API JSONPlaceholder, а также добавить некоторые стили CSS к нашим компонентам с помощью Tailwind CSS.
1. Настройте проект и установите зависимости.
Для начала нам нужно создать новый проект React.js с помощью Create React App, инструмента с интерфейсом командной строки, который настраивает новый проект с базовой структурой папок и файлами конфигурации. Откройте терминал или командную строку и выполните следующие команды:
npx create-react-app axios-tutorial cd axios-tutorial
После создания проекта мы можем установить необходимые зависимости, выполнив следующую команду:
npm install axios tailwindcss
Axios — это облегченная клиентская библиотека HTTP, которая поддерживает все современные браузеры и предоставляет простой API для выполнения HTTP-запросов. Tailwind CSS — это ориентированная на утилиты среда CSS, которая позволяет нам быстро и эффективно стилизовать наши компоненты, применяя предварительно определенные классы.
2. Создайте новый компонент для получения данных
В этом руководстве мы создадим новый компонент с именем FetchData, который извлекает данные из API JSONPlaceholder и отображает их в таблице. Чтобы создать компонент, откройте папку src и создайте новый файл с именем FetchData.js. Затем добавьте следующий код:
import React, { useState, useEffect } from "react";
import axios from "axios";
const FetchData = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((response) => setUsers(response.data))
.catch((error) => console.log(error));
}, []);
return (
<div className="container mx-auto mt-4">
<h1 className="text-2xl font-bold mb-4">Fetch Data Example</h1>
<table className="table-auto">
<thead>
<tr>
<th className="px-4 py-2">ID</th>
<th className="px-4 py-2">Name</th>
<th className="px-4 py-2">Email</th>
<th className="px-4 py-2">Website</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id}>
<td className="border px-4 py-2">{user.id}</td>
<td className="border px-4 py-2">{user.name}</td>
<td className="border px-4 py-2">{user.email}</td>
<td className="border px-4 py-2">{user.website}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default FetchData;
Разберем код:
- Мы импортируем React, useState, useEffect и axios из соответствующих пакетов.
- Мы определяем функциональный компонент с именем
FetchData, который возвращает некоторый JSX. - Мы используем хук
useStateдля создания переменной состояния с именемusers, которая инициализируется как пустой массив. - Мы используем хук
useEffectдля получения данных из JSONPlaceholder API при монтировании компонента. Мы делаем запрос GET к конечной точке/usersи устанавливаем переменную состоянияusersв данные ответа с помощью функцииsetUsers. Мы также отлавливаем любые ошибки, которые могут возникнуть, и записываем их в консоль. - Мы визуализируем контейнер
<div>с заголовком и элемент<table>, отображающий данные в табличном формате. Мы сопоставляем массивusers, используя методmap, чтобы отображать новую строку таблицы для каждого пользовательского объекта. В каждой строке отображается идентификатор пользователя, имя, адрес электронной почты и веб-сайт.
3. Добавьте компонент в файл App.js.
Чтобы увидеть компонент FetchData в действии, нам нужно добавить его в файл App.js. Откройте файл и замените существующий код следующим:
import React from "react";
import FetchData from "./FetchData";
function App() {
return (
<div className="container mx-auto mt-4">
<FetchData />
</div>
);
}
export default App;
Здесь мы импортируем компонент FetchData из файла FetchData.js и визуализируем его внутри элемента контейнера <div>.
4. Запустите приложение и протестируйте компонент
Чтобы протестировать компонент, нам нужно запустить сервер разработки, выполнив следующую команду:
npm start
Это должно открыть новое окно браузера с URL-адресом https://localhost:3000/ и отобразить компонент FetchData с таблицей пользовательских данных.
5. Создайте новый компонент для отправки и изменения данных
Мы также создадим новый компонент с именем SendData, который позволит нам отправлять данные в JSONPlaceholder API и изменять существующее имя пользователя. Чтобы создать компонент, откройте папку src и создайте новый файл с именем SendData.js. Затем добавьте следующий код:
import React, { useState } from "react";
import axios from "axios";
const SendData = () => {
const [name, setName] = useState("");
const [id, setId] = useState("");
const [message, setMessage] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
axios
.put(`https://jsonplaceholder.typicode.com/users/${id}`, { name })
.then((response) =>
setMessage(`User ${id} name changed to ${response.data.name}`)
)
.catch((error) => setMessage(error.message));
setName("");
setId("");
};
return (
<div className="container mx-auto mt-4">
<h1 className="text-2xl font-bold mb-4">Send Data Example</h1>
<form onSubmit={handleSubmit}>
<div className="flex flex-col mb-4">
<label htmlFor="name" className="mb-2">
Name
</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
className="border border-gray-400 py-2 px-3"
/>
</div>
<div className="flex flex-col mb-4">
<label htmlFor="id" className="mb-2">
ID
</label>
<input
type="text"
id="id"
value={id}
onChange={(e) => setId(e.target.value)}
className="border border-gray-400 py-2 px-3"
/>
</div>
<button type="submit" className="bg-blue-500 text-white py-2 px-4">
Submit
</button>
</form>
{message && (
<p className="text-green-500 mt-4">{message}</p>
)}
</div>);
};
export default SendData;
В этом компоненте мы используем хук useState для создания переменных состояния для имени пользователя, идентификатора и сообщения, которое будет отображаться при отправке формы. Мы также создаем функцию handleSubmit, которая делает запрос PUT к конечной точке /users/:id для обновления имени пользователя. Мы используем метод axios.put и передаем идентификатор пользователя и новое имя в качестве данных.
Когда запрос выполнен успешно, мы устанавливаем переменную состояния message в строку, которая подтверждает изменение имени. Если возникает ошибка, мы устанавливаем переменную состояния message в сообщение об ошибке.
В операторе return мы отображаем форму с двумя полями ввода для имени пользователя и идентификатора. Мы также визуализируем кнопку отправки, которая запускает функцию handleSubmit при нажатии. Наконец, мы визуализируем переменную состояния message под формой.
6. Добавьте новый компонент в файл App.js.
Чтобы увидеть компонент SendData в действии, нам нужно добавить его в файл App.js. Откройте файл и замените существующий код следующим:
import React from "react";
import FetchData from "./FetchData";
import SendData from "./SendData";
function App() {
return (
<div className="container mx-auto mt-4">
<FetchData />
<SendData />
</div>
);
}
export default App;
Здесь мы импортируем компонент SendData из файла SendData.js и визуализируем его под компонентом FetchData внутри элемента-контейнера <div>.
7. Запустите приложение и протестируйте компоненты
Чтобы протестировать компонент SendData, введите идентификатор пользователя и новое имя в поля ввода и нажмите кнопку отправки. Если запрос выполнен успешно, вы должны увидеть подтверждающее сообщение под формой.
Заключение
В этом руководстве мы узнали, как использовать Axios, Promises и Try-Catch для извлечения, отправки и изменения данных из API в приложении React.js. Мы также использовали Tailwind CSS для стилизации компонентов и отображения данных в удобном для пользователя формате. Выполнив эти шаги, вы теперь сможете создавать аналогичные компоненты и использовать их для взаимодействия с другими API.
