React
Библиотека для веб- и нативных пользовательских интерфейсов
Создавайте пользовательские интерфейсы из компонентов
React позволяет создавать пользовательские интерфейсы из отдельных элементов, называемых компонентами. Создавайте собственные компоненты React, такие как Thumbnail, LikeButton, и Video. Затем объединяйте их в целые экраны, страницы и приложения.
Video.js
function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}Работая самостоятельно или с тысячами других разработчиков, React ощущается одинаково. Он разработан для беспрепятственного объединения компонентов, написанных независимыми людьми, командами и организациями.
Пишите компоненты с помощью кода и разметки
Компоненты React — это JavaScript-функции. Хотите отобразить содержимое условно? Используйте оператор if. Отображение списка? Попробуйте массив map(). Изучение React — это изучение программирования.
VideoList.js
function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}Этот синтаксис разметки называется JSX. Это расширение синтаксиса JavaScript, популяризированное React. Размещение разметки JSX рядом с логикой рендеринга делает компоненты React легкими для создания, поддержки и удаления.
Добавляйте интерактивность там, где это необходимо
Компоненты React получают данные и возвращают то, что должно отображаться на экране. Вы можете передавать им новые данные в ответ на взаимодействие, например, когда пользователь что-то вводит в поле ввода. React затем обновит экран в соответствии с новыми данными.
SearchableVideoList.js
import { useState } from 'react';
function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}Видео React
Краткая история React
Вам не нужно создавать всю страницу с React. Добавьте React в существующую HTML-страницу и отобразите интерактивные компоненты React в любом месте на ней.
Полностью серверная часть
с помощью фреймворка
React — это библиотека. Она позволяет объединять компоненты, но не предписывает, как выполнять маршрутизацию и загрузку данных. Для создания всего приложения с React мы рекомендуем использовать полностью серверный фреймворк React, например, Next.js или Remix.
confs/[slug].js
import { db } from './database.js';
import { Suspense } from 'react';
async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}
async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}
19 Видео
React также является архитектурой. Фреймворки, которые её реализуют, позволяют получать данные в асинхронных компонентах, работающих на сервере или даже во время сборки. Читайте данные из файла или базы данных и передавайте их в интерактивные компоненты.
Используйте лучшее от каждой платформы
Люди любят веб-приложения и нативные приложения по разным причинам. React позволяет создавать как веб-приложения, так и нативные приложения, используя одни и те же навыки. Он опирается на уникальные преимущества каждой платформы, чтобы ваши интерфейсы чувствовали себя комфортно на каждой платформе.
Преданность веб-стандартам
Пользователи ожидают, что страницы веб-приложений будут загружаться быстро. На сервере React позволяет начинать потоковую передачу HTML, пока вы ещё загружаете данные, постепенно заполняя оставшееся содержимое, прежде чем загрузится любой JavaScript-код. В клиенте React может использовать стандартные веб-API, чтобы поддерживать отзывчивость вашего пользовательского интерфейса даже во время отрисовки.
Полностью нативное решение
Пользователи ожидают, что нативные приложения будут выглядеть и работать как приложения платформы. React Native и Expo позволяют создавать приложения с помощью React для Android, iOS и других платформ. Они выглядят и работают как нативные приложения, потому что их пользовательские интерфейсы являются нативными. Это не веб-вью — ваши компоненты React отображают реальные виджеты Android и iOS, предоставляемые платформой.
С React вы можете быть веб- и нативным разработчиком. Ваша команда может выпускать приложения на многих платформах, не жертвуя удобством пользователя. Ваша организация может преодолеть барьеры между платформами и сформировать команды, которые отвечают за весь функционал от начала до конца.
Обновление, когда будущее готово
React подходит к изменениям с осторожностью. Каждый коммит React тестируется на критически важных бизнес-поверхностях с более чем миллиардом пользователей. Более 100 000 компонентов React в Meta помогают валидировать каждую стратегию миграции.
Последние новости React
Присоединяйтесь к сообществу
миллионов разработчиков
Вы не одиноки. Два миллиона разработчиков со всего мира каждый месяц посещают документацию React. React — это то, о чём могут договориться люди и команды.
Вот почему React — это больше, чем библиотека, архитектура или даже экосистема. React — это сообщество. Это место, где можно попросить помощи, найти возможности и познакомиться с новыми друзьями. Вы встретите как разработчиков, так и дизайнеров, новичков и экспертов, исследователей и художников, учителей и студентов. Наши истории могут быть очень разными, но React позволяет нам всем создавать пользовательские интерфейсы вместе.
Добро пожаловать в сообщество
React
Начать
© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://18.react.dev/
