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)

You don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.

Добавьте React на свою страницу

Использовать фреймворк для фулстек-решения

React — это один из фулстек-фреймворков, например, Next.js или Remix. Он позволяет соединять компоненты вместе, но не предписывает, как выполнять маршрутизацию и загрузку данных. Чтобы построить всё приложение с 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, чтобы сохранить ваш пользовательский интерфейс отзывчивым даже при рендеринге.

6:50 PM

Оставайтесь по-настоящему нативными

Люди ожидают, что нативные приложения будут выглядеть и работать так же, как их платформа. React Native и Expo позволяют создавать приложения в React для Android, iOS и более. Они выглядят и ощущаются как нативные, потому что их интерфейс является действительно нативным. Это не веб — ваши React-компоненты транслируются в реальные компоненты платформ Andoid и 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

Использовать фреймворк для фулстек-решения

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-сообщество

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

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