Как создать реакт приложение
Используйте интегрированный набор инструментов для повышения удобства пользователя и разработчика.
В данном разделе описаны несколько популярных наборов инструментов React, которые помогают в таких задачах, как:
Масштабирование множества файлов и компонентов.
Использование сторонних библиотек из npm.
Раннее обнаружение распространенных ошибок.
Отслеживаемое редактирование CSS и JS в режиме разработки.
Оптимизация кода для релиза.
Рекомендуемые в данном разделе наборы инструментов не требуют настройки для начала работы.
1.3.1 Возможно вам не нужен набор инструментов
Если вы не испытываете проблем, описанных выше, или пока не чувствуете себя комфортно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега <script> на HTML-страницу, при желании добавив поддержку JSX.
Кроме того - это самый простой способ интеграции React в существующий веб-сайт. В то же время вы всегда можете добавить больший набор инструментов, если сочтете это необходимым!
1.3.2 Рекомендуемые наборы инструментов
Команда React в первую очередь рекомендует следующие решения:
Если вы изучаете React или создаете новое одностраничное приложение, используйте Create React App.
Если вы создаете отрисовываемый на сервере веб-сайт с Node.js, попробуйте Next.js.
Если вы создаете статический контент-ориентированный сайт, попробуйте Gatsby.
Если вы создаете библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.
1.3.2.1 Create React App
Приложение Create React App - удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.
Оно настраивает вашу среду разработки, так что вы можете использовать новейшие функции JavaScript, обеспечивает удобство разработки и оптимизирует ваше приложение для продакшен. Вам потребуются Node >= 6 и npm >= 5.2. Чтобы создать проект, запустите:
Create React App не обрабатывает бэкэнд-логику или базы данных. Он просто создает фронтэнд каркас, так что вы можете использовать его с любым бэкэндом. Под капотом он использует Babel и webpack, но вам даже не нужно ничего знать о них.
Когда ваше приложение готово для разворачивания на продакшене, нужно запустить команду npm run build . Она создаст оптимизированный билд вашего приложения в папке build. Больше информации по Create React App можно получить по ссылкам Read Me и User Guide.
1.3.2.2 Next.js
Next.js - это популярный легковесный фреймворк для статических и отрисовываемых на сервере приложений, построенных на React. Он включает в себя готовые решения по стиллизации и маршрутизации, предполагая, что вы используете Node.js в качестве среды сервера.
Узнайте больше о Next.js из его официальной докумментации.
1.3.2.3 Gatsby
Gatsby - лучший способ создания статических сайтов с помощью React. Он позволяет использовать компоненты React, но выводит предварительно отрисованный HTML и CSS, чтобы гарантировать максимально быстрое время загрузки.
1.3.2.4 Более гибкие наборы инструментов
Следующие наборы инструментов предоставляют больше гибкости и выбора. Мы рекомендуем их более опытным пользователям:
Neutrino сочетает в себе мощь webpack с простотой предустановок. Включает предустановку для приложений React и компонентов React.
nwb особенно хорош для публикации компонентов React в npm. Его также можно использовать и для создания приложений React.
Parcel - быстрый сборщик веб-приложений с нулевой конфигурацией, работающий с React.
Razzle - это фреймворк для серверной отрисовки, не требующий какой-либо настройки, но предлагающий большую гибкость, чем Next.js.
1.3.3 Создание набора инструментов с нуля
JavaScript набор инструментов для сборки обычно состоит из:
Менеджера пакетов, такого как Yarn или npm. Он позволяет вам воспользоваться преимуществом обширной экосистемы сторонних пакетов, легко устанавливать и обновлять их.
Сборщика, такого как webpack или Parcel. Он позволяет вам писать модульный код и объединять его в небольшие пакеты для оптимизации времени загрузки.
Компилятора, такого как Babel. Он позволяет писать современный JS код, который также будет работать и в старых браузерах.
Если вы предпочтёте создать свой собственный JavaScript набор инструментов с нуля, ознакомьтесь с данным руководством, в котором воссоздаётся некоторая функциональность Create React App.
Не забудьте удостовериться, что ваш кастомный набор инструментов правильно настроен для продакшен.
Вы услышали о React и пришли сюда, чтобы написать свое первое приложение на нем. Это будет просто приложение hello world c использованием React. Через него мы изучим множество связанных понятий.
Что такое React для пятилетнего ребенка?
Вы видели сайты с заголовком, нижним колонтитулом, боковой панелью? Вы видели Facebook с повторяющимися блоками статусов? Все эти "строительные блоки" можно рассматривать как разные компоненты, вместе формирующие полный веб-сайт. React - это библиотека для создания таких компонентов пользовательского интерфейса.
Пробуем React из CDN
Вы работали с jQuery? Если да, то вы знаете, как это просто добавить ссылку на файл jQuery и начать его использовать. Аналогичным образом давайте попробуем создать компонент Hello World в React.
Создайте HTML-файл index.html. Поместите в него тег <div> в качестве плейсхолдера. Позже наш React-компонент Hello World будет рендериться внутри этого <div> .
Значение id может быть любым. Позже мы будем использовать значение id , чтобы сообщить ReactDOM, где рендерить наш React-компонент.
Затем добавьте следующие ссылки на CDN в свой HTML-файл.
CDN расшифровывается как Content Delivery Network. У провайдеров CDN есть серверы, распределенные по всему миру. Они кэшируют наши файлы (здесь response.development.js и response-dom.development.js) на всех своих серверах. Это помогает пользователю с любым географическим местоположением быстро получить нужный файл.
Первый добавленный нами файл - react.development.js. Он нужен для React-разработки. Он содержит больше информации для отладки и комментариев. Следовательно, размер файла будет больше по сравнению с его рабочей версией. Сейчас в мире React react.js или response.development.js содержит весь код для создания компонентов.
Теперь нам нужно что-то, чтобы рендерить созданные компоненты в браузере. Для этого мы импортируем response-dom.development.js . Этот файл содержит код для эффективного отображения React-компонентов на экране.
Настройка HTML завершена. Давайте напишем наш компонент Hello World в отдельный файл JavaScript ( component.js ). Добавьте ссылку на новый файл в наш HTML. Наш окончательный HTML-файл выглядит так:
Когда мы добавляем ссылку на response.development.js , он добавляет объект React в глобальную область видимости. Объект React содержит метод createElement() . Этот метод используется для создания компонента в React.
В component.js сначала мы создадим компонент и присвоим его переменной myComponent .
Метод createElement() принимает 3 аргумента. Первый аргумент - это имя тега HTML. Второй атрибут - это свойства или атрибуты тега HTML. Третий аргумент - дочерние элементы. Дочерним элементом может быть строка или другой компонент React.
Вот полный код для component.js.
Наш файл component.js готов. Теперь давайте откроем index.html в браузере. Он отобразит наш компонент React внутри div.
Здесь HTML-код, который рендерится как часть компонента React, написан с использованием React. Это говорит о том, что этот HTML рендерится с помощью JavaScript. Таким образом, при использовании React нам не нужно отображать весь HTML-код в браузере и программно скрывать ненужные части. Вместо этого мы можем выполнить проверку условий в JavaScript и рендерить только необходимый HTML-код.
В списке параметров React.createElement() второй переданный аргумент был null . Давайте добавим вместо null объект.
Теперь атрибут style добавлен к тегу h1 .
Итак, мы успешно создали компонент React и использовали его на нашей веб-странице. Но, как мы видим в React.createElement() , синтаксис, используемый для отображения простого тега h1 , довольно запутан. Если HTML будет больше, то все может стать хуже. Например, рассмотрим HTML-код ниже.
Когда мы конвертируем код в эквивалентный код на React, он выглядит так:
Чтобы облегчить жизнь разработчикам, Facebook придумал специальный синтаксис под названием JSX (JavaScript Syntax eXtension). Вместо написания сложного кода при помощи React.createElement() он помогает работать с синтаксисом, похожим на HTML. Например, указанный выше компонент может быть написан на JSX так:
Подробнее о JSX в следующем разделе.
Создание компонентов React с использованием JSX
Как мы видели ранее, если мы используем синтаксис JSX, с ним легко работать. Но есть проблема. Браузеры могут загружать файлы JavaScript и выполнять их с помощью своего JavaScript-движка. Движки JavaScript не могут понять JSX.
Итак, пусть разработчики вроде нас работают с JSX. Мы можем использовать инструмент для преобразования написанного нами на JSX кода в чистый JavaScript. Этот инструмент - Babel.
Давайте переименуем наш файл component.js в component.jsx. Это просто для удобства чтения кода. Теперь любой другой разработчик будет знать, что этот файл содержит код JSX. Вот полный код в component.jsx.
Установите Node.js
Node.js - это серверная платформа для JavaScript. Это означает, что у Node.js есть движок, который может читать и выполнять JavaScript. Вы можете установить его c официального сайта Node.js .
Вы можете проверить установку Node.js, введя следующую команду в терминале.
Будет отображен номер версии. У меня v12.14.1. Нам нужен Node.js для запуска некоторых инструментов сборки, таких как Babel.
При установке Node.js он также устанавливает NPM (Node Package Manager). Это менеджер, содержащий большое количество пакетов. Вы можете проверить установку npm, введя следующую команду в терминале.
Номер моей версии NPM - v6.13.4. Скачиваем и устанавливаем необходимые инструменты из NPM репозитория.
Установите Babel
Babel это транспилятор. Это означает, что он может преобразовывать один тип кода в другой. Например: Babel может конвертировать код ES6 в ES5. Babel также может конвертировать код JSX в код React.js.
Теперь нам нужен Babel для преобразования component.jsx в файл component.js . Чтобы использовать команду babel в терминале, нам нужно установить Babel глобально. Запустите эту команду в терминале.
Команда -g используется для глобальной установки любого пакета. Только если команда установлена глобально, мы можем использовать babel как команду в терминале. Мы можем проверить, успешно ли установлен Babel, набрав следующую команду в терминале.
Ранее я уже установил v7.4.3 на моей машине.
babel-cli похож на робота. Но у него нет знаний о преобразовании JSX в JavaScript. Нам нужно научить Babel, как это делать. Для этого нужно установить пакет @babel/preset-react . Если babel-cli был установлен глобально, @babel/preset-react устанавливается в пределах проекта.
Перед установкой @babel/preset-react нам нужно создать в нашем проекте файл с именем package.json. Этот файл поддерживает зависимости пакетов нашего проекта. npm имеет команду init для создания файла package.json. В терминале из корня нашего проекта выполните команду ниже.
-y - нужен для того, чтобы принять все значения по умолчанию при создании файла package.json. Теперь файл создается с содержимым по умолчанию, которое выглядит следующим образом.
Теперь мы можем начать установку пакета @babel/preset-react . В командной строке введите:
Транспилирование JSX в JS
Из корневой папки проекта в терминале запустите эту команду.
Здесь мы говорим babel использовать @babel/preset-react для преобразования component.jsx в component.js. Если мы откроем файл component.js, то увидим транспилированный чистый код JavaScript.
Если мы откроем index.html в браузере, мы сможем увидеть результат.
Мы увидели, как создать компонент React с помощью JSX. На данный момент наш проект очень простой и содержит только один компонентный файл. Поэтому можно каждый раз заходить в терминал и запускать команду babel. Но по мере роста проекта нам необходимо автоматизировать некоторые задачи. Об этом мы поговорим в отдельной статье.
Используйте встроенный набор инструментов для лучшего взаимодействия пользователя и разработчика.
На этой странице описано несколько популярных наборов инструментов React, которые помогают в таких задачах как:
- Масштабирование до большого количества файлов и компонентов.
- Использование сторонних библиотек из npm.
- Раннее обнаружение распространённых ошибок.
- Отражение изменений CSS и JS на лету в процессе разработки.
- Оптимизация кода для продакшена.
Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.
Возможно, вам не нужен дополнительный набор инструментов
Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега <script> на HTML-странице, при необходимости с JSX.
Также это самый простой способ добавить React в существующий веб-сайт. Вы всегда можете расширить набор инструментов, если посчитаете это нужным.
Рекомендуемый набор инструментов
Команда React в первую очередь рекомендует следующие решения:
- Если вы изучаете React или создаёте новое одностраничное приложение, используйте Create React App.
- Если вы создаёте серверный сайт с Node.js, попробуйте Next.js.
- Если вы создаёте статический контент-ориентированный сайт, попробуйте Gatsby.
- Если вы создаёте библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.
Create React App
Create React App — удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.
Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки. Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:
Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.
Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build . Вы можете узнать больше о Create React App из его README и его пользовательского руководства.
Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды.
Gatsby — лучший способ для создания статических сайтов с помощью React. Он позволяет использовать React-компоненты, но выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки.
Более гибкие наборы инструментов
Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:
- Neutrino сочетает в себе возможности webpack и простоту пресетов. Инструмент включает в себя пресеты для React-приложений и React-компонентов.
- Nx — набор инструментов для ведения фулстэк разработки в монорепозиториях, который обладает встроенной поддержкой React, Next.js, Express и так далее.
- Parcel — быстрый упаковщик веб-приложений с нулевой конфигурацией, который работает с React.
- Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.
Создание набора инструментов с нуля
В набор инструментов для сборки JavaScript обычно входят:
- Менеджер пакетов, такой как Yarn или npm. Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
- Сборщик, такой как webpack или Parcel. Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.
- Компилятор, такой как Babel. Он позволяет писать современный код JavaScript, который будет работать даже в старых браузерах.
Если вы предпочтёте создать свой собственный набор JavaScript-инструментов с нуля, ознакомьтесь с этим руководством, в котором воссоздаются некоторые функции Create React App.
Не забудьте убедиться, что ваш набор инструментов правильно настроен для продакшена.
Задачей этого руководства было не идти проторенным путем “волшебных” готовых шаблонов (например create-react-app и react-boilerplate), а самостоятельно разобраться во множестве динамических компонентов, формирующих приложение React .
До этого подобную тему освещал Jedai Saboteur в своей статье Creating a React App… From Scratch (англ.), на которую ввиду ее грамотности даже сделали ссылку в официальной документации React.
Как бы то ни было, но время идет, и я р ешил создать современное приложение React с нуля в 2021 году. В итоге было решено добавить в цепочку инструментов ряд “важных элементов” и задействовать последние версии основных библиотек. В некотором смысле у меня получилась последняя версия вышеприведенного руководства.
Наша цель проста: создать приложение React с нуля. “С нуля” подразумевает не то, что я буду разрабатывать вспомогательные инструменты, а то, что вместо использования, например, create-react-app , я сконфигурирую их самостоятельно.
Тем не менее помимо настройки простого рабочего приложения я также определил пару дополнительных, “важных” по меркам современного стека, требований:
- Поддержка TypeScript.
- Возможность внешнего управления состоянием.
Озадачившись списком необходимых инструментов, я решил обратиться к документации React.
После прочтения раздела Creating Toolchain from Scratch я прикинул следующий список:
Пакетный менеджер, например Yarn или npm. Позволяет воспользоваться возможностями огромной экосистемы сторонних пакетов, облегчая их установку и обновление.
Бандлер, например webpack или Parcel. Позволяет писать модульный код и связывать его воедино в небольшие пакеты, оптимизируя время загрузки.
Компилятор, например Babel. Дает возможность писать современный JS-код, который будет успешно работать в старых браузерах.
Этот краткий отрывок достаточно подробно раскрывает суть необходимых компонентов. В итоге на их роли я выбрал:
- Пакетный менеджер: Yarn
- Бандлер: webpack
- Компилятор: Babel
Это вполне типичные варианты. Даже если вам не приходилось заниматься самостоятельной настройкой этих инструментов, то вы наверняка с ними либо работали, либо просто о них слышали.
Однако, согласно моим требованиям, все еще недостает одного элемента: библиотеки управления состоянием.
Redux могла стать очевидным выбором, но я предпочел Kea. Дело в том, что разработана Kea на базе Redux, но при этом существенно упрощает управление состоянием.
По правде говоря, здесь я определенно предвзят, так как выбрал Kea больше из-за того, что использую эту библиотеку на работе, а разработал ее мой коллега.
Сперва создайте каталог и выполните в нем yarn init .
Когда система попросит задать entry point , укажите src/index.tsx . Далее станет понятно, почему именно так.
Далее внутри этого каталога создайте еще два: src и public .
В src будет храниться весь исходный код проекта, а в public мы разместим статические ресурсы.
Наше руководство будет не универсальным, а обучающим, и работа с возникающими сложностями станет его неотъемлемой частью.
В связи с этим, при установке инструментов я не буду указывать номера их версий. Если же вы захотите использовать мой вариант в качестве шаблона, то можете посмотреть их в package.json .
В качестве примера я решил взять для этого руководства webpack v5, который вызвал ряд проблем совместимости с конфигурациями, используемыми мной ранее в проектах с webpack v4. Как обычно разобраться с этой проблемой и попутно запастись дополнительными знаниями мне помогла документация, различные статьи и посты на Stack Overflow.
Babel
Для работы Babel требуется еще несколько пакетов, которые устанавливаются так:
babel-core — это компилятор, то есть сам основной компонент.
babel-cli позволит использовать компилятор из командной строки.
Последние три пакета — это “шаблоны” (настройки) Babel для работы с различными сценариями использования. present-env избавляет нас лишних проблем, позволяя писать современный JS-код и обеспечивая его работоспособность на различных клиентах. preset-typescript и preset-react говорят сами за себя: так как используем мы и TypeScript, и React, то нам понадобятся они оба.
В завершении нужно сконфигурировать файл babel/config.js , указав компилятору используемые настройки:
TypeScript
В этом проекте мы будем использовать TypeScript, поэтому у него будут свои дополнительные настройки.
Сначала установим пакет typescript :
Забегая чуть вперед, я предлагаю вам также установить следующие пакеты, если вы собираетесь следовать руководству до конца:
В них содержатся объявления типов для модулей, которые мы задействуем в проекте.
Помимо этого, нам также нужен файл tsconfig.json . Я использую конфигурацию с PostHog, с которой мы работаем в продакшене:
Можете смело менять приведенную конфигурацию под свои нужды. Тем не менее важно сохранить эти опции:
"jsx": "react" говорит сама за себя. Что же касается noEmit , то для нее мы устанавливаем true , так как Babel компилирует TS автоматически, и typescript нам нужен только для проверки ошибок (например, при написании кода).
Webpack
Для работоспособности этому инструменту также требуется ряд настроек. По сути, для каждого типа файла, который мы будем собирать, понадобится отдельный загрузчик.
webpack и webpack-cli следуют тому же принципу, что и Babel. Первый является основным пакетом, а второй позволяет обращаться к нему через командную строку.
webpack-dev-server требуется нам для локальной разработки. Вы заметите, что package.json никогда не ссылается на него из скрипта, но он необходим для запуска webpack serve :
Последними идут загрузчики, нужные для разных файлов, которые мы будем обрабатывать. ts-loader также присутствует, но поскольку мы используем для компиляции JS-файлов Babel, фактичекски, он нам не понадобится.
В завершении, как и для Babel, нужно настроить файл конфигурации webpack.config.js :
React
Учитывая, что создаем мы приложение React, нам также нужны и соответствующие пакеты.
Этого будет достаточно:
react говорит за себя. react-dom будет использоваться для рендеринга приложения в index.tsx , а react-hot-loader для разработки. Он будет автоматически обновлять файл при внесении изменений.
В завершении настроим библиотеку управления состоянием.
Согласно документации нам нужно следующее:
Здесь мы подумаем наперед и добавим отдельный пакет, который используется при написании логики Kea в TypeScript:
package.json
После всей этой настройки нужно добавить в package.json пару скриптов:
start будет запускать сервер, а typegen генерировать типы для файлов логики Kea.
Нехило так настроечек? Думаю, что шаблоны определенно заслуживают благодарности, особенно, когда они берут на себя все управление зависимостями и версионирование (react-scripts).
Как бы то ни было, но с настройкой мы закончили, и пора заняться кодом.
Но сначала немного чистого HTML
Первым делом нам нужен файл index.html , который React будет использовать для отрисовки приложения. Это будет наш единственный файл .html . Он также будет единственным в каталоге public/ .
Вот мой index.html :
Здесь происходит несколько действий:
Точка входа
Помните упоминание о точке входа? Что ж, вот мы до нее и добрались. Перейдите в подкаталог src/ и создайте файл index.tsx .
Вот содержимое моего:
Здесь происходит три основных действия:
- Мы настраиваем Kea, которая, подобно Redux, использует Provider , делая хранилище доступным для всех вложенных компонентов (в нашем случае для всего приложения).
- Вызов resetContext здесь, по сути, не нужен, так как в него ничего не передается. Тем не менее я его оставил, чтобы вы знали, куда добавлять, к примеру, плагины Kea, так как они вам наверняка понадобятся.
2. Мы импортируем и отрисовываем компонент App (который еще не собран).
3. Мы сообщаем React отрисовать приложение, используя div root из index.html в качестве "точки привязки".
Приложение!
Далее также внутри src/ создайте файл App.tsx со следующим содержимым:
Если в этот момент вы просто хотите увидеть приложение в действии, то можете удалить импорты и ссылки на MyJsComponent и Counter , после чего выполнить yarn start . Это запустит сервер, и вы сможете перейти к приложению по адресу localhost:3000 , где оно поприветствует вас фразой “Hello world!”.
Эти два дополнительных компонента я включил, чтобы убедиться в следующем:
- Возможности написания JavaScript параллельно с TypeScript.
- Возможности управления состоянием.
- В том, что бандлер без проблем обрабатывает файлы .css ( Counter содержит минимальную стилизацию).
Так что при желании вы можете на этом остановиться. Если же вы тоже хотите увидеть, как работают перечисленные возможности, то продолжим.
Написание JS и TS
Как вы видели в App.tsx , у нас есть TS-файл, спокойно импортирующий JS-файл.
Проблем не возникает, так как в webpack.config.js установлено это правило:
Если удалить j из test , то использовать JS-файлы с помощью TS-файлов мы не сможем.
Чтобы убедиться в работоспособности этой схемы, я просто создал мелкий JS-компонент и импортировал его в приложение.
Создал я его в новом каталоге components/ , заполнив следующим содержимым:
Counter
Последним я добавил в этот мини-проект традиционный React-компонент Counter.
Задачей было убедиться в работоспособности настроек Kea и в том, что при этом также работает импорт CSS-файлов.
Сначала я создал в components/ подкаталог Counter . В него я добавил три файла:
1. index.tsx — содержит сам компонент:
Все довольно просто. Кликаем + , и отсчет идет вверх, кликаем - , и он устремляется вниз. Установите любое число, используя ввод, и отсчет также обновится.
Обратите внимание на импорт stype.css .
2. counterLogic.ts — размещает в себе логику управления состоянием, используемым компонентом Counter . Я не стану объяснять, как работает Kea, но тут все должно быть понятно само собой:
3. style.css — здесь я использовал минимальную стилизацию просто, чтобы убедиться в правильной работоспособности CSS:
Если вы добрались до этой части, то, надеюсь, на выходе вы получили свежеиспеченное приложение React, современный шаблон, а также некоторый багаж дополнительных знаний. Честно говоря, здесь я просто задокументировал часть своего процесса обучения, но и вы наверняка из этого что-нибудь да почерпнули!
Читайте также: