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 создан для того, чтобы вы могли легко объединять компоненты, написанные независимыми людьми, командами и организациями.
Пишите компоненты с помощью кода и разметки
Компоненты 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://react.dev/
