Еще одно руководство для начинающих по настройке проекта 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 г. Арфатом Салманом