От автора: когда Create React App впервые был запущен в июле 2016 года, для новичков он считался лучшим способом начать работу с React. В те дни новичкам предлагалось создать приложение React с Webpack с нуля или загружать один из множества шаблонов. Появление Create React App стало глотком свежего воздуха.
Годы спустя мы застопорились в прогрессе, так как мы стремимся делать вещи проще и проще в использовании. Наше бесконечное желание оптимизировать и добавлять функции сделало Create React App неудобным в использовании и пугающим для большинства новичков (и некоторых опытных пользователей).
Раздутая файловая структура
Извлечение в Create React App всегда было чрезвычайно неприятным опытом. Если вы когда-нибудь решались запустить npm run eject, вы, вероятно, знакомы с потоком конфигураций и многочисленных файлов, которые могут казаться невероятно пугающими для новичков. Но давайте предположим, что мы никогда не извлекаем, вот что вы получаете из коробки:
У меня кружится голова, просто от взгляда на все это.
Сразу же вас встретят две отдельные папки: public и src. В папке public вы видите favicon.ico и manifest.json помимо index.html. В папке src у вас есть два CSS-файла, четыре Javascript-файла и добавленный logo.svg просто для удовольствия.
К этому моменту вы уже можете представить, что думает большинство новичков: «Я думал, что это поможет мне изучить React и быстро начать создавать компоненты?»
Конечно, эти файлы очень важны для опытного веб-разработчика, работающего с рабочим приложением. Тестирование является основой любого надежного веб-приложения, и service workers абсолютно необходимы при создании прогрессивного веб-приложения.
Но каковы наиболее распространенные варианты использования Create React App? Как часто разработчики запускают новые проекты, которые нуждаются в таком уровне конфигурации и оптимизации? Не очень часто.
В подавляющем большинстве случаев мы создаем тестовые концепции, учебные пособия, примеры приложений и базовые приложения для воспроизведения ошибок.
Я не говорю, что Create React App не имеет цели, но он ужасно раздут для многих сценариев, в которых люди регулярно его используют. Мы не можем продолжать рассматривать Create React App как универсальный подход.
Перспектива новичка
Давайте подумаем об этом с точки зрения новичка. И давайте предположим, что у нас откуда-то было понимание того, что нужно игнорировать папку public и сосредоточиться на src. Возможно, с этой точки зрения мы можем начать понимать, почему Create React App не всегда может быть лучшим вариантом по умолчанию.
CSS-файлы
Во-первых, вас встречают два CSS-файла, и ваш первый вопрос может звучать так: «Куда делись мои стили?».
Через несколько секунд вы можете подумать, что index.css — это куда вы помещаете глобальные стили, а App.css — куда вы помещаете специфичные для компонента стили. Тем не менее, это не совсем так, так как App.css не является автоматически областью компонентов. Если вы включите его, стили будут применяться ко всему приложению.
Почему проект не может начинаться с одного файла CSS? Или, если мы просто создаем пример приложения или приложение для воспроизведения ошибок, возможно, нам вообще не нужен файл CSS.
Файлы Javascript
Вероятно, мы можем выяснить, что index.js является точкой входа нашего приложения, а App.js является компонентом верхнего уровня. Эта не сложно, но что с этими двумя другими файлами?
App.test.js, конечно, кажется предназначенным для тестирования, но подождите, я еще даже не выучил React! React поставляется с тестовой средой? Она используем Jest или Mocha? Мне всегда нужно тестировать, чтобы использовать React?
Ох, и это еще не все. Что это за serviceWorker.js? Быстрый поиск в Google по «service worker» говорит мне, что это как-то связано с автономными функциями и прогрессивными веб-приложениями.
Я только начал создавать какие-либо компоненты. Вы говорите мне, что каждое приложение React, которое я создаю, должно быть прогрессивным веб-приложением?!
Фрустрация
На данный момент, я думаю, совершенно очевидно, что новичкам было бы очень сложно использовать Create React App для учебных целей. Это лучше, чем создавать свою собственную конфигурацию Webpack? Конечно, но в 2019 году, я думаю, у нас есть лучшие варианты.
Действительно минимальное решение
Файловая структура Nano React App
Иногда (то есть часто) вы хотите быстро перейти в React и создать несколько компонентов без лишних движений. Вот почему был создан Nano React App. Он был построен на Parcel, упаковщике веб-приложений (наподобие, Webpack), который включает в себя множество умных настроек по умолчанию. Он также может быть намного быстрее, чем Webpack, если ваш компьютер имеет несколько ядер.
И чтобы дать вам представление о популярности Parcel, на момент написания статьи: у Parcel есть 29 753 звезды на Github, а у Webpack — 46 495 звезд. То есть это не какой-то непонятный проект.
Сгенерированное приложение имеет так мало строк кода, что больше нет необходимости в его извлечении. Включены только два скрипта: сервер разработки и скрипт производственной сборки.
Чего еще в нем нет? Помимо извлечения: нет линтинга, нет тестирования, нет service workers.
Опять же, позвольте мне повторить, что это важные вещи для производственного приложения. Но для небольшого учебного или простого приложения для воспроизведения ошибок, эти вещи будут раздувать код.
И если вы когда-нибудь решите, что вам нужны эти вещи, вы можете легко интегрировать их без необходимости «извлекать» и радикально изменять файловую структуру проекта.
Попробуйте!
Чтобы использовать приложение Nano React, просто запустите:
npx nano-react-app my-app
Примечание: npx это команда, связанная с современными версиями Node, которые позволяют запускать двоичный файл без необходимости выполнять предварительно npm install.
Это распакует шаблон приложения в каталог по вашему выбору (my-app в данном случае). Мы поддерживаем те же преобразования Babel, которые вы получаете с помощью Create React App, поэтому вы можете свободно использовать свойства класса для методов компонентов из коробки.
Мы не запускаем для вас npm install, поэтому распаковка шаблона проекта происходит очень быстро. Также отсутствуют файлы package-lock.json или yarn.lock. Это было сделано специально, так как мы не хотим склонять вас в сторону использования yarn или npm. Спасибо за внимание!
Автор: Adrian Li
Источник: https://hackernoon.com
Редакция: Команда webformyself.