Привет, мир

Самый небольшой пример на React выглядит так:

ReactDOM.render(
  <h1>Привет, мир!</h1>,
  document.getElementById('root')
);

На странице отображается заголовок «Привет, мир!».

Попробовать на CodePen

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

Как читать это руководство

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

Совет

Это руководство предназначено для людей, которые предпочитают концепцию обучения «шаг за шагом». Если вы предпочитаете учиться на практике, ознакомьтесь с нашим практическим руководством. Возможно, вы обнаружите, что руководство и учебник дополняют друг друга.

Это первая глава в пошаговом руководстве по основным концепциям React. В боковой панели навигации вы найдёте список всех его глав. Если вы читаете эту страницу с мобильного устройства, вы можете открыть навигацию по главам, нажав на кнопку в правом нижнем углу экрана.

Каждая глава этого руководства основывается на знаниях, представленных в предыдущих главах. Вы можете узнать большинство из React, прочитав главы руководства «Основные концепции» в том порядке, в котором они перечислены в боковой панели. Например, «Введение в JSX» — следующая глава после этой.

Ожидаемый уровень знаний

React — это библиотека JavaScript, поэтому мы предполагаем, что у вас есть базовое понимание языка JavaScript. Если вы не очень уверенны, мы рекомендуем изучить данное введение в JavaScript для проверки своего уровня знаний, чтобы успешно изучить это руководство. Это может занять от 30 минут до часа, но в результате вам не придётся чувствовать, что вы одновременно изучаете и React, и JavaScript.

Примечание

Данное руководство в примерах иногда использует некоторые из новых возможностей JavaScript. Если вы не работали с JavaScript в последние несколько лет, эти три пункта должны дать знания, достаточные для комфортного чтения этой документации.

Давайте начнём

Продолжайте прокручивать страницу вниз, и вы найдете ссылку на следующую главу руководства прямо перед футером сайта.