Документация React

Самый простой пример React выглядит так:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

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

Попробуйте на CodePen

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

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

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

Подсказка

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

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

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

Предполагаемый уровень знаний

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

Примечание

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

Приступим!

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