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

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

Я знаю, о чем вы думаете - зачем мне пытаться делать что-то самостоятельно, когда есть команда create-react-app или даже комплексные стартовые комплекты? Я дам вам несколько моментов для размышления:

  1. Когда мы полагаемся на что-то, не понимая должным образом (поскольку эти параметры cli фактически заботятся обо всем, что вам нужно, а может быть, и о многом другом), наступает время, когда ваш проект становится больше, и, например, даже простое изменение в процессе сборки сделает вашу жизнь ночной кошмар
  2. В большинстве случаев сгенерированные каркасы раздуваются, и есть много вещей, которые вам вообще не нужны - если вы похожи на меня, вам просто нравится добавлять модуль или библиотеку по запросу, а не потому, что они могут быть использованы в какой-то момент
  3. Эти скаффолды используют множество конфигураций, чтобы все работало, вы можете оказаться в ситуации, когда захотите сделать что-то настроенное по-своему, но опять же, это так сложно сделать, что вы откажетесь

И последнее, но не менее важное: то, как мы будем настраивать наши строительные леса, не должно занимать более 30 минут, но в нем будет все, что нам нужно, и, возможно, понадобится, пока проект не станет слишком большим. Даже в этой ситуации вы увидите, насколько просто подключить какую-нибудь библиотеку или внести любые изменения, которые вы хотите, и заставить все работать. Мне всегда нравится настраивать вещи таким образом, когда у меня есть полный контроль и я знаю все настройки, которые были задействованы для запуска и запуска проекта. Если вы больше любите использовать готовые строительные леса, тогда просто возьмите проект строительных лесов, который мы будем здесь создавать. Я обещаю, что сама структура очень проста и меньше, чем те, которые я упомянул, что вы можете буквально понять суть, даже если просто посмотрите на код.

Надеюсь, я вас достаточно убедил, так что давайте приступим без дальнейших промедлений.

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

|-- src
   |-- components
      |-- main (the component that's responsible for view switching based on route)
         |-- main.jsx
      |-- another.component
         |-- component.jsx
         |-- _component.scss
      |-- _components.scss (all the .scss partials defined in different components are referenced here)
   |-- views
       |-- home.jsx (or can be a directory of a view)
       |-- another.view
           |-- another.view.jsx
           |-- _another.view.scss
       |-- _views.scss (all the .scss partials defined in different views are referenced here)
   |-- index.scss (refers _components.scss, _views.scss and any other .scss partials)
   |-- index.jsx (the entry point where the app renders the main component and which eventually renders the views
       based on selected route)

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

За пределами каталога src будут и другие очевидные и необходимые файлы, но мы будем разбираться в них один за другим, поскольку все они будут играть важную роль!

Настройка проекта

package.json

Первое, что нам нужно, это package.json в каталоге нашего проекта. А для управления нашими модулями узлов я предпочитаю использовать yarn, потому что это быстрее, но вы также можете использовать npm, если хотите. Вы можете следовать инструкциям по установке пряжи вверх.

Если вы уже настроили пряжу, то предположим, что наш проект представляет собой простой шаблон, и давайте сделаем следующее:

mkdir simple-boilerplate && cd simple-boilerplate && yarn init

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

Далее установим зависимости:

yarn add jquery react react-dom @fortawesome/fontawesome-free-webfonts bootstrap popper.js
  1. Если в наших компонентах нам когда-либо понадобится напрямую манипулировать dom-узлом (что мы будем делать так часто), мы найдем jquery очень удобным в таких ситуациях.
  2. Надеюсь, вы знаете, почему мы установили React
  3. react-dom предназначен для отрисовки компонентов React в дереве dom.
  4. В том числе fontawesome для бесплатных шрифтов с иконками
  5. bootstrap для использования нестандартных элементов и стилей; popper.js - это просто зависимость начальной загрузки, которую мы должны были включить (она используется такими функциями, как размещение всплывающей подсказки, всплывающего окна или даже раскрывающегося списка в области просмотра)

Выполнено? Молодец! Нам нужно установить некоторые зависимости, которые будут использоваться только для разработки. Так что да, зависимости разработчиков:

yarn add babel-cli babel-loader babel-preset-env babel-preset-react css-loader file-loader node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server — dev

Мы будем использовать Babel для транспиляции кода ES6 в ES5, поэтому мы установили Babel и предустановки, которые потребуются для конкретного кода React. Webpack будет нашим инструментом сборки и сборки, поэтому мы используем его необходимые части, относящиеся к нашему проекту. Наконец, мы также включили webpack-dev-server для тестирования нашего приложения на localhost.

webpack.config.js

Как упоминалось ранее, мы будем использовать webpack для объединения наших модулей и подготовки нашего приложения к работе. Webpack также упрощает разработку, позволяя использовать экспорт и импорт ES6 для поддержки ваших модулей. Чтобы узнать больше, ознакомьтесь с их подробной документацией.

Для начала нам нужно создать файл конфигурации для webpack внутри каталога проекта:

touch webpack.config.js

После создания скопируйте и вставьте следующие строки кода:

Эта конфигурация указывает webpack сделать за нас несколько вещей:

  1. Используйте загрузчик Babel для преобразования любого кода .js или .jsx в синтаксис ES5.
  2. Используйте sass-loader, style-loader и css-loader, чтобы позаботиться о компиляции SCSS в CSS и импорт CSS.
  3. Используйте загрузчик файлов и загрузчик URL-адресов для загрузки шрифтов значков, предоставленных font awesome.
  4. Наконец, создайте простую конфигурацию для крошечного webpack-dev-сервера, который очень пригодится, когда мы займемся разработкой и протестируем ее в браузере.

main.jsx

Теперь мы создадим папку src и создадим index.jsx, который мы уже указали в webpack.config.js:

mkdir src && cd src && touch index.jsx

Нам также понадобится компонент, который управляет переключением представлений на основе его текущего пути маршрута. Допустим, это основной компонент:

mkdir -p components/main && cd components/main && touch main.jsx

Теперь добавьте следующие строки кода в main.jsx:

Использование компонента Main очень просто. Нам просто нужно передать массив объектов представления, которые являются простыми объектами Javascript с двумя свойствами - относительным путем (например: /home) и классом компонента, который он должен отображать, когда мы попадаем в этот путь.

Чтобы сделать его более понятным, давайте просто создадим наш первый компонент представления.

Введите это в терминал:

mkdir -p src/views/home

Это создаст каталог «views» в src и создаст «домашний» каталог внутри «views». Внутри «home» мы создаем файл home.jsx со следующим кодом:

На этом этапе нам нужно определить наш index.jsx, чтобы склеить эти два компонента вместе и дать представление о том, как их следует использовать.

Файл index.jsx будет выглядеть так:

Давайте сделаем глубокий вдох и сделаем паузу на секунду.

Итак, что здесь происходит? Это точка входа для webpack. Первое, что мы сделали, - это импортировали файлы стилей с потрясающими шрифтами и загрузочный javascript. Самое замечательное в том, что webpack найдет их на их пути и объединит в распространяемый файл, который мы собираемся создать. Это будет объединено в файл с именем vendor.js. Весь другой код, который мы написали и импортировали, будет помещен в отдельный файл с именем bundle.js.

Мы также импортируем index.scss, который является записью для всех партиалов .scss, которые мы определяем здесь и внутри нашего приложения. Вскоре мы рассмотрим это подробнее.

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

Теперь, когда index.jsx готов, нам нужен еще один файл, чтобы сделать нашу жизнь осмысленной! Index.html, который будет использовать все это чудо, которое мы создали до сих пор.

index.scss

Ах, подождите, index.html, очевидно, следующий важный бит; но мы уже говорили об index.scss, поэтому он тоже нуждается в небольшом представлении! На данный момент этот файл находится внутри src и содержит следующую строку кода:

@import “~bootstrap/scss/bootstrap”;

Да, вы правильно догадались! Мы импортируем все стили начальной загрузки в наше приложение, что означает, что по умолчанию мы можем использовать элементы прямо из него!

index.html

Мы добились значительного прогресса, и в течение следующих нескольких строк мы сможем запустить нашу первую настройку реагирования, которую мы начали с нуля. Будьте готовы удивляться! Наш супер компактный, простой, но мощный index.html содержит только следующие строки кода:

Вы немного удивлены? Да, конечно, надо!

Эти bundle.js и vendor.js - это файлы, которые я объяснил недавно!

Здесь нужно отметить пару вещей. Прежде всего, в этой строке начинается вся магия -

<div id=”app”></div>

Если вы помните, в нашем index.jsx мы фактически указали методу ReactDom.render для рендеринга нашего компонента App в узел dom, который идентифицируется идентификатором app! Вот код для справки:

render(
<Router><App/></Router>,
document.getElementById(‘app’)
);

Во-вторых, есть порядок включения исходных файлов js и div с идентификатором app. Если вместо того, как сейчас, вы перепишете код следующим образом:

<script src=”vendor.js”></script>
<script src=”bundle.js”></script>
<div id=”app”></div>

Ничего бы не вышло! Почему? Противоположный порядок (т.е. загрузка файлов js после div) на самом деле гарантирует, что весь код, который мы написали до сих пор, и все файлы поставщика (например, react, response-dom) загружаются только после того, как уже есть div определяется идентификатором app. Итак, когда мы сказали ReactDom.render фактически отобразить наш компонент в dom-узел с идентификатором app, он нашел этот узел, просто выполнив

document.getElementById(‘app’)

Запуск проекта

Чтобы запустить наш проект, нам нужно добавить следующее в наш файл package.json:

Эти команды позволят нам скомпилировать и собрать наш проект, а также обслуживать его на локальном хосте с помощью webpack-dev-server.

Вернуться к index.html

Все еще помните те ссылки на bundle.js и vendor.js, которые мы включили в index.html? Если вы запустите yarn build, будет создана папка dist, в которой будут находиться эти два файла! Он также будет содержать некоторые другие файлы - в основном файлы шрифтов из font awesome, чтобы они были доступны при обслуживании проекта. Нашему файлу index.html нужны только эти два файла для рендеринга каждого компонента и представлений, которые будет иметь наше приложение в будущем!

Подождите, вы действительно уже выполнили сборку пряжи? Если да, то вы видели, что он ломается и не генерирует файлы, о которых мы только что говорили. Это подводит нас к последней части головоломки!

.babelrc

Причина сбоя сборки заключается в том, что мы включили Babel и сказали webpack использовать его для транспилирования кодов ES6 в ES5, но мы никогда не сообщаем Babel, КАК он должен это делать. Давайте создадим файл .babelrc в каталоге нашего проекта (вне каталога src). Сюда входит только список предустановок, которые Babel следует использовать во время транспиляции.

{
  “presets”: [“env”, “react”]
}

Как только мы его получим, Babel знает, какие предустановки следует использовать для процесса. Если мы снова запустим yarn build, все должно работать нормально!

Проверить в браузере

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

Тестирование

Отличная работа! Каркас готов, и теперь вы можете продолжать создавать свое приложение React!

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

К счастью, на этом этапе, когда у нас нет библиотек управления состоянием, таких как mobx или redux, или каких-либо http-запросов, выполняемых с использованием fetch или axios, написание тестов для компонентов React будет легче решить.

Установка зависимостей и настройка

В качестве фреймворка для тестирования мы будем использовать шутку. Это как вся Карма, Мокко, Чай и Синон в одном месте. Если вы их использовали (я предполагаю, что это не первый раз, когда вы пишете тесты для своего проекта), вы найдете jest супер удобным, поскольку он требует почти нулевой конфигурации и имеет все, например, библиотеку утверждений, функции заглушки и средство запуска тестов. Кроме того, мы будем использовать эту служебную библиотеку от AirBnB под названием фермент. Он очень легкий и в основном создан для выполнения запросов dom, подобных jquery, к элементам реакции, что является важной частью большинства тестов, которые вы когда-либо будете писать для своих компонентов реакции.

yarn add enzyme enzyme-adapter-react-16 jest babel-jest — dev

Чтобы энзим мог работать с нашей текущей версией React, которая составляет 16+, нам нужен файл с именем setup.enzyme.js, который будет существовать в каталоге нашего проекта:

Давайте также включим следующие строки кода в package.json-

Наконец, давайте включим команду test в объект скриптов package.json-

Написание первого теста

Хорошо, похоже, мы сделали все, что могли, и теперь пришло время написать несколько тестов, чтобы проверить, правильно ли работает наша тестовая установка. Давайте создадим файл home.test.js внутри src / views / home:

Любой файл, заканчивающийся на .test.js, будет подхвачен шуткой.

Давайте наберем «тест пряжи» в терминале и с радостью обнаружим, что наш тест пройден!

Что дальше

В этот скаффолд не включена библиотека управления состоянием (например, Redux / Mobx). Использовать один так же просто, как установить его с помощью yarn и затем написать фрагменты кода, которые будут творить чудеса. В моем следующем посте я надеюсь обсудить использование Mobx и Redux в проекте React с использованием этого же каркаса - так что я думаю, что это сделает этот каркас укомплектованным всем, что вам может понадобиться для более крупного и масштабируемого проекта. Дайте мне знать, как скоро я должен его написать, в разделе комментариев ниже.

Заключительные примечания

Ух ты! Прошло много времени с тех пор, как мы начали, и приятно видеть, что вы так далеко продвинулись со мной! Поздравляю!

Если вы следовали этому примеру, у вас должна быть рабочая установка для проекта React, и вы можете пойти дальше. Вы можете найти весь проект в github - https://github.com/dibosh/simple-react-template и использовать шаблон прямо оттуда (не забудьте нажать на звездочку, если вы сочтете это полезным).

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

Автор: Муним Дибош - разработчик программного обеспечения полного стека с более чем 5-летним опытом разработки программного обеспечения и практических методов. Он также является дизайнером на практике и любит создавать красивые вещи. Что ему больше всего нравится в работе инженера полного цикла, так это способность вносить равный вклад в проектирование и разработку, а также помогать в принятии более эффективных решений по продукту.

У него большой опыт написания приложений с использованием React и связанных с ним технологий. С ним можно связаться по электронной почте [email protected] или посетить его веб-сайт, чтобы узнать больше о его проектах и ​​работах - www.munimdibosh.me