Начало работы с React

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

1. Введение

Первый вопрос, который нам нужно задать себе, - почему мы все равно должны инвестировать в изучение React. Что ж, React набирает популярность и является одним из самых популярных фреймворков JavaScript на данный момент, согласно нескольким опросам и отчетам. Кроме того, регулярное изучение новых языков и фреймворков - это всегда хорошее вложение вашего времени. Чем больше вы познакомитесь с разными технологиями, разными языками программирования, разными фреймворками и т. Д., Тем легче будет изучать новые вещи. Вы будете учиться лучше и быстрее, и это, вероятно, один из самых ценных навыков, которые вам понадобятся при разработке программного обеспечения. Возможно, вы считаете себя только backend-разработчиком, но даже в этом случае разумно взглянуть на технологии, которые поначалу могут показаться за пределами вашей компетенции. Это расширит ваш общий взгляд на разработку программного обеспечения, и вы станете более Т-образным профессионалом. А пока достаточно введения, давайте начнем с React!

2. Начало работы

Наша первая отправная точка - конечно же, официальный сайт React. Когда мы заглядываем на веб-сайт, мы замечаем, что уже присутствует много полезной информации, чтобы начать работу. Вероятно, самый доступный элемент - это практическое руководство. Это руководство поможет вам создать упрощенную версию классической игры «Крестики-нолики» (для голландских читателей: Boter-kaas-en-eieren).

Поскольку React - это фреймворк JavaScript, вам необходимо иметь некоторые знания об основах JavaScript, если у вас их еще нет. Хорошую отправную точку для понимания основ JavaScript можно найти на странице веб-сайта Mozilla. Повторное введение в JavaScript (учебник по JS). Здесь вы можете найти еще много ресурсов по JavaScript, но повторного введения будет достаточно для использования учебника React.

3. Среда разработки

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

Обязательным условием для локального использования React является наличие установленного Node.js. Переходим на страницу загрузки Node.js. В зависимости от используемой операционной системы вы можете выбрать предварительно созданный установщик для своей платформы. Мы используем Ubuntu и хотели использовать диспетчер пакетов. В этом случае вы нажимаете ссылку Установка Node.js через диспетчер пакетов внизу страницы. Затем выберите для дистрибутивов Linux на основе Debian и Ubuntu пакеты Enterprise Linux / Fedora и Snap. Наконец, вы попадаете на страницу с инструкциями по установке с помощью оснастки.

Мы решили установить последнюю версию LTS, которая на момент написания является версией v12.x. Выполните следующие команды:

$ curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

$ sudo apt-get install -y nodejs

3.1 IntelliJ IDE

Какую среду IDE вы будете использовать? Мы поддерживаем JetBrains IDE и в основном занимаемся разработкой на Java. Первый выбор - IntelliJ для использования в качестве IDE. Инструкции по настройке IntelliJ для разработки React доступны на веб-сайте JetBrains. Однако имейте в виду, что вам понадобится Ultimate Edtion IntelliJ для правильной поддержки React. Community Edition будет недостаточно для разработки React.

3.2 IDE WebStorm

Если у вас нет Ultimate Edition IntelliJ, вы можете использовать WebStorm в качестве IDE. WebStorm - это IDE JetBrains для разработки на JavaScript. Помните, что версии сообщества для WebStorm не существует. Итак, когда вы серьезно относитесь к разработке React, вам придется покупать лицензию. Другой альтернативой является использование 30-дневной бесплатной ознакомительной версии после каждого выпуска. Каждый год выходит три релиза, так что для оценки этого будет достаточно.

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

4. Продолжить обучение.

После установки и выбора IDE, которую вы будете использовать, вы можете продолжить обучение, как описано на веб-сайте React. Это очень интуитивно понятно. Следуйте советам и не копируйте и не вставляйте решения, а набирайте их самостоятельно. Это может показаться пустой тратой времени, но часто это поможет вам узнать некоторые детали, которые иначе вы бы не увидели, просто скопировав и вставив.

В конце урока осталось выполнить ряд упражнений. Рекомендуется завершить эти задания. Самостоятельное внесение изменений поможет вам лучше понять структуру. Мы не объясняем здесь решения задач, но мы предоставляем их на GitHub. Итак, сначала попробуйте решить их сами, а когда вы полностью застряли, вы можете взглянуть на наши решения. Ниже мы приводим ссылки на коммиты с решениями.

1. Display the location for each move in the format (col, row) in the move history list.
2. Bold the currently selected item in the move list.
3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
4. Add a toggle button that lets you sort the moves in either ascending or descending order.
5. When someone wins, highlight the three squares that caused the win.
6. When no one wins, display a message about the result being a draw.

5. Заключение

Прилагаемая документация на веб-сайте React - очень хорошее место для начала, когда вы хотите изучить React. Учебное пособие сразу же даст вам практический опыт работы с React, а задания в конце учебного пособия помогут вам еще больше. Кроме того, рекомендуется внимательно изучить другую документацию на сайте React. Это даст вам некоторое представление о том, что такое React. И, в конце концов, практика - единственный способ получить опыт.