Нет никаких сомнений в том, что из трех крупных JavaScript-фреймворков React является наиболее востребованным (Angular и Vue завершают тройку). В последнем опросе Состояние JavaScript из более чем 20 000 разработчиков JavaScript 64,8% заявили, что они использовали React раньше и что они будут использовать его снова, а также 19,1% из них. сказали, что слышали об этом и хотели бы узнать об этом.

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

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

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

Boilerplate

Boilerplate - это набор кода и технологий, которые можно повторно использовать для ускорения разработки. Если у вас есть опыт работы с каким-либо языком программирования, то у вас наверняка есть некоторые фрагменты кода, которые вы часто копируете и повторно используете в разных приложениях. Они протестированы, и вы знаете, что они будут работать, вам просто нужно изменить их в соответствии с требованиями приложения. Чтобы настроить среду React, вам почти всегда потребуется настроить сборщик кода, транспилятор JavaScript, линтер, библиотеку тестирования и диспетчер состояний. В 90% случаев это будет одинаково в каждом приложении React, и поэтому разработчики часто начинают с одного из множества доступных шаблонов React и при необходимости изменяют их.

Создать приложение React

Существует официальный шаблон React, опубликованный Facebook (который также использует библиотеку React с открытым исходным кодом). У него более 67 000 звезд на Github, и это самый популярный инструмент для запуска вашего приложения React. Скорее всего, вы уже слышали об этом, поскольку он стал неотъемлемой частью обучения и использования React. Вам не нужно беспокоиться о ручной настройке Babel, Webpack, сервера разработки и т. Д., И вместо этого вы можете сосредоточиться на создании своего приложения. Его просто использовать, вам просто нужно установить Node, и в вашем терминале мало команд от просмотра вашего приложения в браузере. Он отлично подходит для новичков и, вероятно, является лучшим решением для простых и понятных веб-приложений.

npx create-react-app my-new-shiny-app

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

React Boilerplate

В отличие от приложения Create React, этот шаблон не для новичков, и он требует глубоких знаний React, Redux, модульного тестирования и линтинга, прежде чем начинать с него. Оно более самоуверенное, чем приложение Create React, и нацелено на объединение лучшего опыта разработчиков с готовой к работе средой.

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

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

Реагировать на рогатку

Если вы знаете, что вам понадобится Redux внутри вашего проекта, но хотите запустить его с самого начала, то шаблон React Slingshot может вам подойти. В эту конфигурацию будут добавлены Redux и другие полезные библиотеки, такие как Webpack, Babel, Saas и Jest, но ничего больше. Даже ваш файл index.js будет пустым в ожидании ваших изменений.

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

Как и React Boilerplate, он также использует горячую перезагрузку, что означает, что ваши изменения CSS и JavaScript будут мгновенно отображаться внутри приложения. При каждом изменении он также запускает все тесты, которые вы написали внутри своего приложения. У меня есть одна небольшая жалоба на этот шаблон: после удаления примера приложения вы получаете неприятное сообщение об ошибке внутри вашего терминала, в котором говорится, что набор тестов не удалось запустить, поскольку теперь у вас нет написанных тестов. Все остальное будет работать вместе с этой ошибкой, но могло бы быть лучше и без нее. Тем не менее, в целом это хороший шаблон для начала вашего проекта.

Инструменты сборки

Шаблонные панели - отличный вариант для начала вашего нового проекта React, но бывают случаи, когда их использование просто излишне (то есть, когда вам не нужно огромное количество зависимостей, с которыми они идут в комплекте). Чаще всего вам может понадобиться некоторая настраиваемая конфигурация, которую проще выполнить с самого начала, чем путем изменения стандартного кода. Для этого вы должны быть знакомы с некоторыми другими инструментами, наиболее важным из которых является Webpack.

Webpack

Webpack - это, по сути, сборщик модулей, и без него вы не сможете писать приложения React, если не хотите хранить все в одном файле, полагаясь на CDN-ы (сеть доставки контента ) и теги сценария внутри вашего HTML. Вы можете попробовать, но я обещаю, что это будет не из приятных впечатлений.

В идеале приложение React состоит из множества файлов меньшего размера, которые все связаны с серией операторов импорта, ведущих к исходному файлу index.js (на самом деле его можно назвать как угодно, это просто соглашение ). Такой способ написания кода обычен для большинства серверных языков и даже для Node.js, но их поддержка в Интернете очень плохая. Webpack делает это возможным, создавая граф зависимостей вашего приложения, в котором каждый модуль отображается и объединяется вместе с другими внутри одного или нескольких файлов пакета. Вначале Webpack был печально известен своей сложностью, но сегодня с Webpack 4 его намного проще настроить, а его документация стала намного лучше.

Для начала вам необходимо настроить среду (development, production или none), добавить точка входа приложения (по умолчанию index.js) и настройте параметры вывода (где и как будет сохранен окончательный пакет). Чтобы преобразовать файлы, отличные от JavaScript и JSON, вам необходимо добавить определенные загрузчики внутри module.rules и добавить плагины, если вы хотите оптимизировать пакет. или сделать еще какие-то задачи дополнительно. Загрузчики и плагины кажутся сложными, но на самом деле они таковыми не являются и в большинстве случаев имеют отличную документацию.

Webpack также используется не только для объединения вашего кода. Благодаря сообществу он может заменить большинство средств выполнения задач, таких как Gulp и Grunt, что делает Webpack отраслевым стандартом в веб-разработке сегодня.

Посылка

Parcel - это новинка, обещающая простоту и обеспечивающая наилучшие возможности для разработчиков. Вам нужно создать файл index.html с тегом скрипта, указывающим на файл index.js, и все. Parcel будет использовать оба файла как точку входа и творить чудеса вокруг них. Конфигурация не требуется, просто запустите ее в терминале с помощью команды parcel index.html, и все будет работать из коробки. Он поставляется с сервером разработки, доступ к которому по умолчанию можно получить на http: // localhost: 1234 /.

Использовать Parcel с React очень просто. Добавьте React и React-DOM в качестве зависимостей к вашему проекту, и все. То же самое и со всем остальным, например, с пресетами Babel и node-sass. Parcel обнаружит их и преобразует ваши файлы с невероятной скоростью. Философия нулевой конфигурации Parcel делает его отличным вариантом для малых и средних проектов, когда вам не нужно много настраивать, и вы хотите, чтобы все работало из коробки без особых усилий. Хотя он был выпущен в декабре 2017 года, он уже сделал себе имя и со временем станет только лучше.

Вавилон

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

ES6 вносит множество улучшений в JavaScript и делает написание кода JavaScript намного быстрее и приятнее, но здесь есть одна загвоздка. Многие старые браузеры не поддерживают некоторые или даже все функции ES6, и мы должны стремиться к тому, чтобы наши приложения работали в как можно большем количестве сред (хорошо, возможно, нам не нужно охватывать все существующие браузеры или даже все версий Того-Кого-Нельзя-Называть).

Чтобы наш современный код (например, ES6, ES7 или другие) работал в старых браузерах, нам нужно преобразовать этот код в JavaScript ES5, который поддерживают все соответствующие браузеры. Этот процесс называется транспиляцией, и Babel в настоящее время является лучшим инструментом для этого. Чтобы использовать Babel, нам необходимо загрузить и установить определенные пресеты Babel для транспиляции JSX в React (babel-preset-react) и ES6 в ES5 JavaScript (babel-preset-env ). Все специфические настройки Babel обычно попадают в файл .babelrc, или же вы можете определить их через Webpack.

С WEBPACK:

  • установить зависимости:
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
  • создайте файл .babelrc и добавьте в него:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
  • добавить в webpack.config.js:
module.exports = {
  ...
  module: {
      rules: [
          {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: {
                  loader: "babel-loader"
              }
          }
      ]
  }
  ...
};

ПОСЫЛКОЙ:

  • установить зависимости:
npm i babel-preset-env babel-preset-react --save-dev
  • создайте файл .babelrc и добавьте в него:
{
"presets": ["env", "react"]
}

Eslint

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

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

Инструменты разработчика

Отладка - это волшебное слово в веб-разработке, и независимо от всех доступных инструментов, если у нас есть выбор, мы сделаем это в браузере. Это естественная среда для отладки веб-приложений, и, кроме того, инструменты разработчика в Chrome и Firefox действительно потрясающие прямо из коробки. Существует также множество плагинов, которые вы можете добавить к их инструментам разработчика, и React Dev Tools и Redux Dev Tools должны быть первыми в вашем списке, если вы собираетесь работать с React.

Инструменты разработки React

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

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

Redux DevИнструменты

При использовании Redux иногда сложно отслеживать все изменения в вашем хранилище redux, не говоря уже о том, чтобы запомнить или визуализировать иерархию и форму объектов внутри него. Redux DevTools спешит на помощь! Вы также можете использовать его из инструментов разработчика вашего браузера, чтобы увидеть дерево хранилища redux, изменения в нем в реальном времени и многое другое.

В отличие от React Dev Tools, вы можете использовать и устанавливать Redux DevTools более чем одним способом, и вы не ограничены только средами браузера. Самое простое решение - установить его как расширение браузера, а затем включить в файле index.jsx.

В том, что все?

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

В следующей статье мы рассмотрим структуру кода внутри проекта React и то, как использовать такие инструменты, как React Router, Redux, Axios и Lodash, для создания хорошо организованного и эффективного приложения.

Первоначально опубликовано на https://krakensystems.co/blog/2019/environment-configuration-in-react