logo by @sawaratsuki1004

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 в существующую HTML-страницу и отображайте интерактивные компоненты 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} />;
}

React - это еще и архитектура. Фреймворки, реализующие ее, позволяют получать данные в асинхронных компонентах, которые запускаются на сервере или даже во время сборки. Считывать данные из файла или базы данных и передавать их интерактивным компонентам.

Используйте лучшее из каждой платформы

Люди любят веб-приложения и нативные приложения по разным причинам. React позволяет создавать как веб-приложения, так и нативные приложения, используя одни и те же навыки. Он опирается на уникальные преимущества каждой платформы, чтобы ваши интерфейсы были удобны на каждой платформе.

example.com

Будьте верны Вебу

Люди ожидают, что страницы веб-приложений будут загружаться быстро. На сервере, React позволяет начать потоковую передачу HTML, пока вы еще получаете данные, постепенно заполняя оставшееся содержимое до загрузки кода JavaScript. На клиенте, React может использовать стандартные веб-интерфейсы API, чтобы поддерживать пользовательский интерфейс даже в процессе рендеринга.

6:15 PM

Будьте верны native-приложениям

Люди ожидают, что приложения будут выглядеть и ощущаться как их нативные.React Native и Expo позволяют создавать приложения на React для Android, iOS и других платформ. Они выглядят и ощущаются как родные, потому что их пользовательский интерфейс действительно родной. Это не web-view - ваши компоненты React отображают реальные представления Android и iOS, предоставляемые платформой.

С помощью React вы можете быть как веб-разработчиком, так и нативным разработчиком. Ваша команда может работать на многих платформах без ущерба для пользовательского опыта. Ваша организация может преодолеть разделение платформ и сформировать команды, владеющие всеми функциями от начала до конца.

Обновляйтесь, когда будущее наступит

React подходит к изменениям с осторожностью. Каждый коммит React тестируется на критически важных для бизнеса поверхностях с более чем миллиард пользователей. Более 100 000 компонентов React в Meta помогают проверить каждой стратегии миграции.

Команда React постоянно исследует, как улучшить React. Некоторые исследования занимают годы, чтобы окупиться. У React высокая планка для внедрения исследовательских идей в продукт. Только проверенные подходы становятся частью React.

Присоединяйтесь к миллионному сообществу

Вы не одиноки. Два миллиона разработчиков со всего мира посещают документацию по React каждый месяц. React - это то, с чем люди и команды могут договориться.

People singing karaoke at React Conf
Sunil Pai speaking at React India
A hallway conversation between two people at React Conf
A hallway conversation at React India
Elizabet Oliveira speaking at React Conf
People taking a group selfie at React India
Nat Alison speaking at React Conf
Organizers greeting attendees at React India

Вот почему React - это больше, чем библиотека, архитектура или даже экосистема. React - это сообщество. Это место, где вы можете попросить помощи, найти возможности и встретить новых друзей. Вы встретите как разработчиков, так и дизайнеров, новичков и экспертов, исследователей и художников, преподавателей и студентов. Наши биографии могут быть очень разными, но React позволяет нам всем вместе создавать пользовательские интерфейсы.

logo by @sawaratsuki1004

Добро пожаловать в сообщество React

Начать