Еще одно руководство для начинающих по настройке проекта React — часть 1
React набрал значительный импульс за последние несколько лет и превратился в зрелую и стабильную библиотеку пользовательского интерфейса. Он показал стабильный рост с момента его первоначального выпуска в марте 2013 года Facebook.
Несмотря на рост, создание проекта React — сложная задача. Чтобы облегчить это, Facebook выпустил create-react-app. Он может создавать приложения React без конфигурации сборки. Однако для новичка это может показаться волшебством. Кроме того, я лично считаю, что это не решение. Проблема понимания конфигураций сборки и различных частей проекта до сих пор не решена. Скорее, create-реагировать-приложение создает еще один слой, фасад, чтобы скрыть сложность.
В этой статье я создам функциональный проект React с нуля. Этот пост лучше всего подходит для начинающих, которые хотят понять различные части и то, как они работают синхронно, чтобы дать нам плавный опыт разработки.
Давайте изучать
Я собираюсь использовать Yarn вместо npm
для установки различных модулей, необходимых во время установки. Если у вас нет пряжи, вы можете посмотреть инструкцию по установке здесь.
Откройте терминал и введите следующее.
Команда mkdir
(создать каталог) создает новый каталог react-project
, а cd
изменяет на него текущий рабочий каталог.
Теперь запустите yarn init
в терминале. Yarn задаст несколько вопросов о вашем проекте и создаст файл package.json
. Значения в скобках являются значениями по умолчанию, и вы можете просто нажать Enter, чтобы оставить их без изменений. Этот файл содержит всю введенную вами информацию и список всех зависимостей, необходимых для разработки и запуска проекта.
Установка React и ReactDOM
У нас есть каталог для хранения нашего проекта. Теперь устанавливаем React и ReactDOM. Введите yarn add react react-dom
. Подкоманда add
устанавливает модуль в текущий проект. Вы можете указать более одного модуля, разделив их пробелом. Здесь мы устанавливаем react
и react-dom
.
Теперь Yarn будет получать модули, включая их зависимости, и устанавливать их. После установки вы должны увидеть, что react-project
теперь содержит каталог с именем node_modules
и файл yarn.lock
.
node_modules
— это фактическое хранилище всех модулей (и их зависимостей) в текущем проекте. В большинстве случаев этот каталог управляется пряжей или npm, если вы его использовали. Вы можете прочитать больше здесь".
Yarn также генерирует файл yarn.lock
для хранения информации о зависимостях модулей и их версиях. Думайте об этом так: этот файл создает моментальный снимок всех зависимостей, которые в настоящее время установлены. Каждый раз, когда вы добавляете или удаляете пакет, этот моментальный снимок обновляется, отражая текущее состояние. Вы можете удалить node_modules
и запустить yarn install
(или, что то же самое, только yarn
), и node_modules
будет воссоздано.
Вам может быть интересно, почему мы установили react
и react-dom
. Авторы реакции сделали различие между библиотекой, которая определяет и создаеткомпоненты представления (т. е. React), и библиотекой, которая отрисовывает (т. е. ReactDOM) вышеупомянутые компоненты. DOM в react-dom
такой же, как Web DOM. Рендеринг DOM означает создание и отображение веб-страницы. Такая организация кода позволяет использовать react
на разных платформах, просто изменив рендерер. React Native тому пример. Вместо рендеринга React в браузере одни и те же компоненты рендерятся в iOS и Android. Еще один пример — ReactVR.
Сервер разработки Webpack
На данном этапе у нас есть способ создания и рендеринга компонентов React. Однако у нас нет способа отправить эти компоненты в браузер до того, как он сможет их отобразить. Вот тут-то и появляется веб-сервер. Мы будем использовать сервер разработки под названием webpack-dev-server. Введите yarn add -D webpack webpack-dev-server
. Внимательные наблюдатели заметили бы, что мы устанавливаем и webpack
, и webpack-dev-server
. Кроме того, -D
там что-то делает.
Мы устанавливаем webpack
, потому что от него зависит webpack-dev-server
. Также чуть позже нам понадобится webpack. -D
указывает, что модули будут установлены как зависимости разработки. Как правило,проекту требуется два типа зависимостей модулей. Производство и разработка. Модули разработки не будут использоваться в производстве, т. е. когда пакет готов или когда конечный пользователь использует продукт. Однако разработчику, надеющемуся внести изменения в ваш пакет, также потребуются зависимости для разработки. Для этого package.json
будет иметь дополнительный ключ devDependencies
для списка пакетов, необходимых во время разработки.
Создание вашего первого приложения React
Создайте два файла в каталоге react-project
: index.html
и index.js
. Вы можете сделать это через терминал, набрав touch index.html index.js
в Linux и macOS. В Windows проще открыть редактор и «Сохранить как» файлы с соответствующими именами и типами.
Используя ваш любимый редактор, введите следующее в файл index.html
.
Это простой HTML-файл.
- У него есть один
div
с идентификаторомroot
. - Он также имеет тег script, который загружает файл
bundle.js
.
Этот файл будет содержать библиотеку React, средство визуализации и наши компоненты для отображения.
В файле index.js
введите следующее.
Строки №1 и №2 импортируют React и ReactDOM. В строке № 5 мы создаем элемент типа div
, используя createElement
, и устанавливаем внутреннее значение «Hello World». Строка № 5 является эквивалентным представлением <div>Hello World</div>
в React.
Строка №6 определяет место, где будет происходить рендеринг. В данном случае тег div
нашего index.html
с идентификатором root
.
Строка №4 — это вызов функции, который принимает два аргумента: Компонент/Элемент для рендеринга и место, где он будет рендериться. Следовательно, оба значения передаются правильно.
Запуск приложения React
На этом этапе ваш каталог react-project
должен выглядеть так:
Прежде чем вы сможете увидеть чудо своей работы, вам нужно сделать еще одну вещь: запустить сервер. Если вы наберете webpack-dev-server
в терминале, вы получите ошибку command not found
. Это происходит потому, что мы не установили глобально webpack-dev-server. Нам нужно использовать сценарии npm или эквивалентные сценарии пряжи для запуска webpack-dev-server
. Наряду с этим нам также необходимо предоставить файл записи webpack-dev-serve. На данный момент думайте о файле входа как о файле, который будет обслуживаться сервером разработки. Мы передаем имя файла в качестве аргументов командной строки на сервер разработки, как показано ниже.
Откройте package.json
в своем любимом редакторе и внесите изменения, чтобы в результате получился этот файл —
Сосредоточьтесь на строках с 6 по 8. Мы использовали ключ с именем scripts
, и его значением является объект. В этом объекте мы указываем имена команд и фактическую команду, которую имя будет выполнять в виде пар ключ-значение. Например, start
выполняет webpack-dev-server index.js
. Имена произвольны и могут быть любыми. Подробнее здесь.
Теперь в терминале введите yarn start
, чтобы выполнить команду, связанную с start
. Если все пойдет хорошо, то вы должны увидеть что-то вроде этого —
Теперь вы можете видеть, что проект работает по адресу http://localhost:8080/.
Перейдите по этой ссылке, и вы увидите надпись «Hello World».
Это подводит нас к концу части 1. Теоретически вы можете создавать любые приложения React, используя только перечисленные выше инструменты. Однако во второй части мы увидим, как можно значительно упростить процесс разработки, включив в него линтеры, упаковщики, JS-транспиляторы и другие утилиты.
Редактировать: Вот Часть 2.
Свяжитесь со мной @ Facebook
Первоначально опубликовано на codeburst.io 27 января 2018 г. Арфатом Салманом