Пишем первый React компонент
2 года назад·4 мин. на чтение
Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.
Содержание туториала по React
Компоненты — одна из основных концепций React. Они являются основой, на которой вы строите пользовательские интерфейсы (UI), что делает их идеальным местом для начала вашего пути к React.
Эта разметка представляет эту статью
Компоненты: строительные блоки пользовательского интерфейса
В Интернете HTML позволяет нам создавать богато структурированные документы с помощью встроенного набора тегов, таких как<h1>
и <li>
:
<article> <h1>My First Component</h1> <ol> <li>Components: UI Building Blocks</li> <li>Defining a Component</li> <li>Using a Component</li> </ol> </article>
<article>
, ее заголовок <h1>
и (сокращенное) оглавление в виде упорядоченного списка <ol>
. Подобная разметка в сочетании с CSS для стилизации и JavaScript для интерактивности лежит в основе каждой боковой панели, аватара, модального окна, раскрывающегося списка — каждой части пользовательского интерфейса, которую вы видите в Интернете.
React позволяет комбинировать разметку, CSS и JavaScript в кастомные «компоненты», повторно используемые элементы пользовательского интерфейса для вашего приложения. Код оглавления, который вы видели выше, можно превратить в компонент <TableOfContents />
, который можно отображать на каждой странице. Внутри он по-прежнему использует те же HTML-теги, такие как <article>
, <h1>
и т. д.
Как и в случае с HTML-тегами, вы можете составлять, упорядочивать и размещать компоненты для оформления целых страниц. Например, страница документации, которая состоит из компонентов React, может выглядеть следующим образом:
По мере роста вашего проекта вы заметите, что многие из ваших проектов могут быть составлены путем повторного использования уже написанных вами компонентов, что ускоряет разработку. Оглавление выше можно добавить на любой экран с помощью<PageLayout> <NavigationHeader> <SearchBar /> <Link to="/docs">Docs</Link> </NavigationHeader> <Sidebar /> <PageContent> <TableOfContents /> <DocumentationText /> </PageContent> </PageLayout>
<TableOfContents />
. Вы даже можете запустить свой проект, состоящий из компонентов, которыми поделились участники сообщества React с открытым исходным кодом, такими как Chakra UI и Material UI.
Определение компонента
Традиционно при создании веб-страниц веб-разработчики размечали свой контент, а затем добавляли интерактивность, добавляя немного JavaScript. React ставит интерактивность на первое место, но при этом использует ту же технологию: компонент React — это функция JavaScript, в которую вы можете добавить разметку. Вот как это выглядит:Вот как написать компонент:export default function Profile() { return <img src="https://example.com/userpic.jpg" alt="User Name" />; }
Шаг 1: Экспортируйте компонент
Префиксexport default
— это стандартный синтаксис JavaScript (не относящийся к React). Он позволяет пометить основную функцию в файле, чтобы впоследствии можно было импортировать ее из других файлов. Подробнее об импорте смотрите в разделе Импорт и экспорт компонентов.
Шаг 2: Определите функцию
С помощью функцииfunction Profile() { }
вы определяете функцию JavaScript с именем Profile
.
Компоненты React — это обычные функции JavaScript, но их имена должны начинаться с заглавной буквы, иначе они не будут работать.
Шаг 3: Добавьте разметку
Компонент возвращает тег<img />
с атрибутами src
и alt
. <img />
написан как HTML, но на самом деле это JavaScript. Этот синтаксис называется JSX, и он позволяет встраивать разметку в JavaScript.
Но если ваша разметка не находится на той же строке, что и ключевое слово return, вы должны заключить ее в пару круглых скобок, например:
export default function Profile() { return ( <div> <img src="https://example.com/userpic.jpg" alt="User Name" /> </div> ); }
Использование компонента
Теперь, когда вы определили свой компонентProfile
, вы можете вложить его в другие компоненты. Например, вы можете экспортировать компонент Gallery
, который использует несколько компонентов Profile
:
export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </section> ); }
Что видит браузер
Обратите внимание на разницу в регистрах:<section>
пишется строчными буквами, поэтому React знает, что мы ссылаемся на HTML-тег.<Profile/>
начинается с заглавнойP
, поэтому React знает, что мы хотим использовать наш компонент с именемProfile
.
Profile
содержит еще больше HTML: <img />
. В итоге вот что видит браузер:
<section> <h1>Amazing scientists</h1> <img src="https://example.com/userpic.jpg" alt="User Name" /> <img src="https://example.com/userpic.jpg" alt="User Name" /> <img src="https://example.com/userpic.jpg" alt="User Name" /> </section>
Вложение и организация компонентов
Компоненты — это обычные функции JavaScript, поэтому вы можете хранить несколько компонентов в одном файле. Это удобно, когда компоненты относительно малы или тесно связаны друг с другом. Если этот файл переполнен, вы всегда можете переместитьProfile
в отдельный файл. Как это сделать, вы узнаете вскоре на странице об импорте.
Поскольку компоненты Profile
визуализируются внутри Gallery
— даже несколько раз — мы можем сказать, что Gallery
является родительским компонентом, отображающим каждый Profile
как «дочерний». Это часть магии React: вы можете определить компонент один раз, а затем использовать его в любом месте и столько раз, сколько захотите.
Компоненты могут отображать другие компоненты, но вы никогда не должны вкладывать их определения:
Фрагмент выше очень медленный и вызывает ошибки. Вместо этого определите каждый компонент на верхнем уровне:export default function Gallery() { // Никогда не определяйте компонент внутри другого function Profile() { // ... } // ... }
Когда дочернему компоненту нужны данные от родителя, передайте их пропсами, а не определениями вложенности.export default function Gallery() { // ... } // ✅ Определите компонент на корневом уровне function Profile() { // ... }
Резюме
Вы только что впервые попробовали React! Напомним некоторые ключевые моменты.- React позволяет создавать компоненты - многократно используемые элементы пользовательского интерфейса для вашего приложения.
- В приложении React каждая часть пользовательского интерфейса является компонентом.
-
Компоненты React являются обычными функциями JavaScript, за исключением:
- Их имена всегда начинаются с заглавной буквы.
- Они возвращают разметку JSX.
Как запрашивать данные в ReactJS с fetch
год назад·2 мин. на чтение
Несколько простых шагов для запроса данных с сервера в ReactJS с помощью fetch API.
1. Определите значение по умолчанию
Вызовfetch()
является асинхронным методом, поэтому нам нужно использовать значение по умолчанию до тех пор, пока REST API не вернет ответ. Определение неправильных значений по умолчанию вызовет ошибки JavaScript еще до вызова fetch()
, поэтому убедитесь, что значение по умолчанию указано в React JS коде.
В нашем случае, так как мы ожидаем массив из вызова API, значением по умолчанию будет пустой массив.
const defaultValue = []
2. Объявите состояние React для хранения данных из API
Нам нужно объявить состояние React для хранения списка пользователей, возвращенного из ответа на вызов API. Обновление состояния с помощьюsetUsers()
гарантирует, что экран обновится после получения списка пользователей из вызова REST API.
// Состояние для хранения списка пользователей const [users, setUsers] = useState(defaultValue);
3. JavaScript функции для получения данных из API и сохранения ответа
Нам нужно объявить JS-функцию для получения данных с внешнего URL-адреса следующим образом:- Мы получаем данные из URL-адреса
https://jsonplaceholder.typicode.com/todos/
с помощью JavaScriptfetch()
API. - Добавьте функцию обратного вызова в
then()
для преобразования ответа в формат JSON. - Состояние пользователя React обновляется списком пользователей из ответа API.
// Функция для сохранения данных const getApiData = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/todos/" ).then((response) => response.json()); // Обновим состояние setUsers(response); };
4. Добавьте useEffect
для получения API при загрузке страницы
После того, как мы определили функцию для получения данных API, она должна срабатывать при загрузке страницы. getApiData()
, добавленный в React useEffect()
с пустым массивом зависимостей, который гарантирует, что код срабатывает один раз при загрузке страницы.
useEffect(() => { getApiData(); }, []);
5. Генерация JSX-кода с состоянием React
Наконец, нам нужно отобразить сведения о каждом пользователе. Следовательно, мы сгенерируем JSX-код для каждого пользователя с помощьюArray.map()
, а функция обратного вызова вернет <div></div>
с user.id
и user.title
.
<div className="app"> {users.map((user) => ( <div className="item-container"> Id:{user.id} <div className="title">Title:{user.title}</div> </div> ))} </div>
6. Вызов API через Axios
Основной недостаток вызоваfetch()
заключается в том, что нам пришлось вручную конвертировать данные из API в формат JSON. Существует npm пакет axios, который сам управляет преобразованием JSON. После установки npm install axios
в package.json
, можно реализовать метод getAPIData()
через axios следующим образом:
import axios from "axios"; const getApiData = async () => { const response = await axios( "https://jsonplaceholder.typicode.com/todos/" ); setUsers(response); };
Полный код решения
import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { const [users, setUsers] = useState([]); const getApiData = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/todos/" ).then((response) => response.json()); setUsers(response); }; useEffect(() => { getApiData(); }, []); return ( <div className="app"> {users.map((user) => ( <div className="item-container"> Id:{user.id} <div className="title">Title:{user.title}</div> </div> ))} </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);