Введение в реакцию
Этот учебник не предполагает каких-либо существующих знаний React.
Прежде чем мы начнем обучение
В этом уроке мы создадим небольшую игру. Возможно, у вас возникнет соблазн пропустить его, потому что вы не создаете игры, но дайте ему шанс. Методы, которые вы изучите в этом руководстве, являются основополагающими для создания любого приложения React, и их освоение даст вы глубоко понимаете React.
Совет
Это руководство предназначено для людей, которые предпочитают учиться на практике. Если вы предпочитаете изучать концепции с нуля, ознакомьтесь с нашим пошаговым руководством. Этот учебник и руководство могут дополнять друг друга.
Учебник разделен на несколько разделов:
- Настройка для обучения даст вам отправную точку для выполнения инструкций.
- Обзор научит вас основам React: компонентам, свойствам и состоянию.
- Завершение игры научит вас наиболее распространенным методам разработки React.
- Добавление путешествия во времени даст вам более глубокое понимание уникальных преимуществ React.
Вам не нужно заполнять все разделы сразу, чтобы извлечь пользу из этого руководства. Постарайтесь пройти как можно дальше — даже если это одна или две секции.
Что мы строим?
В этом уроке мы покажем, как создать интерактивную игру в крестики-нолики с помощью React.
Вы можете увидеть, что мы будем строить здесь: Окончательный результат. Если код вам непонятен или вы не знакомы с его синтаксисом, не волнуйтесь! Цель этого руководства — помочь вам понять React и его синтаксис.
Мы рекомендуем вам ознакомиться с игрой в крестики-нолики, прежде чем продолжить обучение. Одна из особенностей, которую вы заметите, заключается в том, что справа от игрового поля есть пронумерованный список. Этот список дает вам историю всех ходов, которые произошли в игре, и обновляется по ходу игры.
Вы можете закрыть игру в крестики-нолики, как только вы с ней познакомитесь. В этом уроке мы начнем с более простого шаблона. Наш следующий шаг — настроить вас так, чтобы вы могли начать создавать игру.
Предпосылки
Мы предполагаем, что вы немного знакомы с HTML и JavaScript, но вы должны быть в состоянии следовать им, даже если вы работаете с другого языка программирования. Мы также предполагаем, что вы знакомы с такими понятиями программирования, как функции, объекты, массивы и, в меньшей степени, классы.
Если вам нужно просмотреть JavaScript, мы рекомендуем прочитать это руководство. Обратите внимание, что мы также используем некоторые функции из ES6 — последней версии JavaScript. В этом уроке мы используем стрелочные функции, классы, операторы let
и const
. Вы можете использовать Babel REPL, чтобы проверить, во что компилируется код ES6.