Введение в реакцию

Этот учебник не предполагает каких-либо существующих знаний React.

Прежде чем мы начнем обучение

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

Совет

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

Учебник разделен на несколько разделов:

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

Что мы строим?

В этом уроке мы покажем, как создать интерактивную игру в крестики-нолики с помощью React.

Вы можете увидеть, что мы будем строить здесь: Окончательный результат. Если код вам непонятен или вы не знакомы с его синтаксисом, не волнуйтесь! Цель этого руководства — помочь вам понять React и его синтаксис.

Мы рекомендуем вам ознакомиться с игрой в крестики-нолики, прежде чем продолжить обучение. Одна из особенностей, которую вы заметите, заключается в том, что справа от игрового поля есть пронумерованный список. Этот список дает вам историю всех ходов, которые произошли в игре, и обновляется по ходу игры.

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

Предпосылки

Мы предполагаем, что вы немного знакомы с HTML и JavaScript, но вы должны быть в состоянии следовать им, даже если вы работаете с другого языка программирования. Мы также предполагаем, что вы знакомы с такими понятиями программирования, как функции, объекты, массивы и, в меньшей степени, классы.

Если вам нужно просмотреть JavaScript, мы рекомендуем прочитать это руководство. Обратите внимание, что мы также используем некоторые функции из ES6 — последней версии JavaScript. В этом уроке мы используем стрелочные функции, классы, операторы let и const. Вы можете использовать Babel REPL, чтобы проверить, во что компилируется код ES6.