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>
  );
}

My video

Video description

Работаете ли вы самостоятельно или с тысячами других разработчиков, использование 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>
  );
}

3 Videos

First video

Video description

Second video

Video description

Third video

Video description

Этот синтаксис разметки называется 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}”`} />
    </>
  );
}

example.com/videos.html

React Videos

A brief history of React

5 Videos

React: The Documentary

The origin story of React

Rethinking Best Practices

Pete Hunt (2013)

Introducing React Native

Tom Occhino (2015)

Introducing React Hooks

Sophie Alpert and Dan Abramov (2018)

Introducing Server Components

Dan Abramov and Lauren Tan (2020)

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

Добавьте 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} />;
}

example.com/confs/react-conf-2021

19 Videos

React 18 Keynote

The React Team

React 18 for App Developers

Shruti Kapoor

Streaming Server Rendering with Suspense

Shaundai Person

The First React Working Group

Aakansha Doshi

React Developer Tooling

Brian Vaughn

React without memo

Xuan Huang (黄玄)

React Docs Keynote

Rachel Nabors

Things I Learnt from the New React Docs

Debbie O'Brien

Learning in the Browser

Sarah Rainsberger

The ROI of Designing with React

Linton Ye

Interactive Playgrounds with React

Delba de Oliveira

Re-introducing Relay

Robert Balicki

React Native Desktop

Eric Rozell and Steven Moyes

On-device Machine Learning for React Native

Roman Rädle

React 18 for External Store Libraries

Daishi Kato

Building Accessible Components with React 18

Diego Haz

Accessible Japanese Form Components with React

Tafu Nakazaki

UI Tools for Artists

Lyle Troxell

Hydrogen + React 18

Helen Lin

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

Начните работу с фреймворком

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

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

example.com

Оставайтесь верными вебу

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

7:26 AM

Верьте нативу

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

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

Сборка для нативных платформ

Обновите, когда будущее будет готово

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

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

Читать больше новости React

Последние новости React

React Canaries: Incremental Feature Rollout

May 3, 2023

React Labs: March 2023

March 22, 2023

Introducing react.dev

March 16, 2023

React Labs: June 2022

June 15, 2022

Читать больше новости React

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

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

A hallway conversation between two people at React Conf

Elizabet Oliveira speaking at React Conf

People taking a group selfie at React India

Organizers greeting attendees at React India

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

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

Начать

React

Создание пользовательских интерфейсов из компонентов

Video.js

My video

Пишите компоненты с кодом и разметкой

VideoList.js

3 Videos

First video

Second video

Third video

Добавляйте интерактивность везде, где вам это удобно

SearchableVideoList.js

React Videos

5 Videos

React: The Documentary

Rethinking Best Practices

Introducing React Native

Introducing React Hooks

Introducing Server Components

Стать full-stack с фреймворком

confs/[slug].js

19 Videos

React 18 Keynote

React 18 for App Developers

Streaming Server Rendering with Suspense

The First React Working Group

React Developer Tooling

React without memo

React Docs Keynote

Things I Learnt from the New React Docs

Learning in the Browser

The ROI of Designing with React

Interactive Playgrounds with React

Re-introducing Relay

React Native Desktop

On-device Machine Learning for React Native

React 18 for External Store Libraries

Building Accessible Components with React 18

Accessible Japanese Form Components with React

UI Tools for Artists

Hydrogen + React 18

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

Оставайтесь верными вебу

Верьте нативу

Обновите, когда будущее будет готово

React Canaries: Incremental Feature Rollout

React Labs: March 2023

Introducing react.dev

React Labs: June 2022

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

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

Стать full-stack
с фреймворком

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

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