Создавайте пользовательские интерфейсы из компонентов
React позволяет создавать пользовательские интерфейсы из отдельных частей, называемых компонентами. Создавай собственные компоненты React, например Thumbnail, LikeButton, и Video. Затем объединяйте их в целые экраны, страницы, и приложения.
Независимо от того, работаете ли вы самостоятельно или с тысячами других разработчиков, использование React будет таким же. Он создан для того, чтобы вы могли легко комбинировать компоненты, написанные независимыми людьми, командами и организациями.
Написание компонентов с помощью кода и разметки
Компоненты React - это функции JavaScript. Хотите условно показать некоторый контент? Используйте оператор if. Выводите список? Попробуйте использовать массив map(). Изучение React - это изучение программирования.
Этот синтаксис разметки называется JSX. Это расширение синтаксиса JavaScript, популяризированное в React. Размещение разметки JSX рядом со связанной с ней логикой рендеринга упрощает создание, поддержку и удаление компонентов React.
Добавьте интерактивность везде, где это необходимо
Компоненты React получают данные и возвращают то, что должно появиться на экране. Вы можете передавать им новые данные в ответ на взаимодействие, например, когда пользователь вводит текст в поле ввода. Тогда React обновит экран в соответствии с новыми данными.
Вам не нужно создавать всю страницу на React. Добавьте React на существующую HTML-страницу и создайте интерактивные компоненты React в любом ее месте.
Перейдите на full-stack
с помощью фреймворка
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 Videos
React - это также архитектура. Фреймворки, реализующие ее, позволяют получать данные в асинхронных компонентах, которые запускаются на сервере или даже во время сборки. Считывайте данные из файла или базы данных и передавайте их интерактивным компонентам.
Используйте лучшее от каждой платформы
Люди любят веб-приложения и нативные приложения по разным причинам. React позволяет создавать и веб-приложения, и нативные приложения, используя одни и те же навыки. Он опирается на уникальные преимущества каждой платформы, чтобы ваши интерфейсы чувствовали себя комфортно на каждой из них.
Оставайтесь верными веб
Люди ожидают, что страницы веб-приложений будут загружаться быстро. На сервере React позволяет начать потоковую передачу HTML еще во время получения данных, постепенно заполняя оставшийся контент до загрузки кода JavaScript. На клиенте React может использовать стандартные веб-интерфейсы API, чтобы сохранить отзывчивость пользовательского интерфейса даже в процессе рендеринга.
Станьте по-настоящему нативным
Люди ожидают, что нативные приложения будут выглядеть и ощущаться как их платформа. React Native и Expo позволяют создавать приложения на React для Android, iOS и других платформ. Они выглядят и ощущаются как нативные, потому что их UI действительно нативный. Это не веб-видение - ваши компоненты React отображают реальные представления Android и iOS, предоставляемые платформой.
С React вы можете быть как веб-разработчиком, так и нативным разработчиком. Ваша команда может работать на многих платформах без ущерба для пользовательского опыта. Ваша организация может преодолеть разделение платформ и сформировать команды, владеющие всеми функциями от начала до конца.
Обновляйтесь, когда будущее будет готово
React подходит к изменениям с осторожностью. Каждый коммит React тестируется на критически важных для бизнеса поверхностях с более чем миллиардом пользователей. Более 100 000 компонентов React в Meta помогают проверить каждую стратегию миграции.
Команда React постоянно исследует, как улучшить React. Некоторые исследования занимают годы, чтобы окупиться. У React высокая планка для внедрения исследовательской идеи в производство. Только проверенные подходы становятся частью React.
Присоединяйтесь к
миллионному сообществу
Вы не одиноки. Два миллиона разработчиков со всего мира посещают документацию React каждый месяц. React - это то, с чем люди и команды могут согласиться.
Именно поэтому React - это больше, чем библиотека, архитектура или даже экосистема. React - это сообщество. Это место, где вы можете попросить помощи, найти возможности и встретить новых друзей. Здесь вы встретите разработчиков и дизайнеров, новичков и экспертов, исследователей и художников, преподавателей и студентов. Наш опыт может быть очень разным, но React позволяет нам всем вместе создавать пользовательские интерфейсы.
