Делаем калькулятор на базе React. Часть 1: Настройка окружения

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

Что будем делать?

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

Возникает логичный вопрос, зачем нам делать еще один калькулятор, если их и так полно? На то есть две причины:

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

Стек специфичный, и работать с ним интересно. А реализация некоторых функций потребует работы с локальным хранилищем и API, что прокачает навыки начинающих. Также мы попробуем Axios c Cheerio для добычи данных с любого сайта, показывающего состояние валют, и будем использовать Express для хостинга калькулятора на серверах Timeweb.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Что будем использовать и почему?

В стеке у нас будет несколько технологий:

React
Chakra
Reack Hooks
Express
Axios
Cheerio
Redux (под конец, чисто ради интереса)

React – самый популярный фреймворк для создания интерфейсов на языке JavaScript. Его востребованность не падает, а с появлением тенденций в области Web3 она только растет. Так что уметь работать с React очень даже полезно. Он не сделает наш калькулятор эффективнее и быстрее, просто это React.

Chakra UI – известная библиотека, упрощающая оформление интерфейса в приложениях на базе React. Мы будем использовать ее не потому, что лень писать свой CSS-код, а потому что Chakra прикольная, и иногда разработчикам приходится сталкиваться с подобными продуктами. Полезно иметь представление о визуальных библиотеках в духе Чакры.

Мы будем использовать функциональные компоненты вместо классовых. Хуки в них применяются по умолчанию.

В качестве сервера будет выступать Express. Это приложение для Node.js, позволяющее запускать JavaScript-программы на хостинге и удерживать в онлайн-состоянии. Также мы задействуем Axios, чтобы вытащить с сайта его верстку, а потом при помощи Cheerio отфильтровать из полученных данных нужные котировки.

По ходу разработки мы будем применять стандартные механизмы хранения состояний Реакта, но в конце перенесем эту логику в Redux.

Устанавливаем необходимые компоненты

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

Загружаем VS Code

В качестве рабочей среды будем использовать редактор VS Code. Это что-то в духе золотого стандарта. Не будем от него отходить и скачаем привычный для всех редактор.

Заходим на официальный сайт Microsoft.
Кликаем на кнопку Download.
Устанавливаем клиент.
Готово.

Нам даже не нужны никакие плагины, потому что VS Code по умолчанию поддерживает формат JSX для работы с React. Проблем с автодополнением, проверкой и другими аспектами разработки не возникнет. Но вы можете настроить и другой редактор. Принципиальных отличий все равно не будет.

Устанавливаем React DevTools

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

Логотип DevTools в панели управления Edge

Оно устанавливается в Google Chrome и другие браузеры на базе Chromium. Заходим в магазин расширений Google и кликаем по кнопке Add to Chrome (даже если у вас Opera или Edge). Через пару секунд в панели управления появится иконка React DevTools.

Устанавливаем create-react-app

create-react-app – это шаблон для быстрого начала разработки. Дело в том, что для нормального существования с Реактом и внешними библиотеками для создания приложений надо использовать Webpack. Настраивать его руками – та еще боль, а create-react-app уже включает в себя настроенный WebPack со всеми вытекающими. То есть все наши элементы приложения будут автоматически собираться в единый проект при сохранении изменений в документе, и для этого не придется каждый раз вручную что-то пересохранять.

Чтобы создать базовый проект на React, на компьютере должна быть установлена Node.js.

Если она есть, то переходим к следующему этапу:

Открываем директорию, где будет храниться наш код в командной строке.
Вводим команду create-react-app [НАЗВАНИЕ_ВАШЕЙ_ПРОГРАММЫ] и нажимаем Enter.
Через секунду командная строка попросит ввести y, чтобы продолжить установку. Соглашаемся.

Интерфейс установки React-приложения

Через несколько секунд базовый проект будет установлен. Нам останется только зайти в папку с проектом, введя команду cd [ПУТЬ_ДО_ПАПКИ_С_ПРОЕКТОМ], и запустить приложение при помощи команды npm start. Автоматически включится браузер и наша React-программа.

Подключаем ChakraUI

Но это еще не все. Теперь нам нужна визуальная библиотека Chakra. Мы ее установим и выполним самую базовую настройку, чтобы не возвращаться к этому в следующих частях цикла.

Чтобы обзавестись Чакрой:

Открываем директорию с проектом, созданным при помощи create-react-app.

Вводим в терминал команду

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5

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

Открываем файл index.js.
Импортируем в него библиотеку Chakra.
```
import \{ ChakraProvider } from '@chakra-ui/react'
```
И заворачиваем корневой компонент App в ChakraProvider.

Содержимое файла index.js

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

Устанавливаем Axios и Cheerio

Эти два приложения мы просто установим.

Команда npm install cheerio загрузит библиотеку Cheerio со всеми необходимыми зависимостями. А команда npm install axios загрузит Axios. Пока пользоваться ими не будем, поэтому даже базовая настройка нам не нужна. Все равно в итоге они будут жить в отдельном Node.js-приложении-помощнике.

Пара слов про Redux и Express

Так как первая версия калькулятора будет базироваться исключительно на хуках и других встроенных в React-инструментах, то часть с подключением и установкой Redux c Express повременим.

Вместо заключения

На этом пока что все. Теперь у нас есть готовый шаблон React-приложения. Если вы что-то смыслите в разработке, то можете поиграться с ним самостоятельно. Если нет, то увидимся в следующей части. Сделаем базовый компонент-калькулятор, который уже будет что-то считать, но не будет особо умным. Также изучим примитивные концепции Реакта, необходимые для понимания фреймворка.

Продолжение: Калькулятор-конвертер на базе React. Часть 2: Базовый интерфейс калькулятора