Есть ли еще место для шаблонов проектов в 2021 году?
Когда я впервые начал работать с React в 2016 году, в моде были шаблоны. Почти все рекомендовали начинать ваш новый проект с одного из множества шаблонных вариантов, наиболее популярным из которых является react-шаблона.
Перенесемся в 2021 год, и это уже не так.
Но почему вообще стартовые шаблоны стали настолько популярными?
Когда мы впервые начали работать с React, не было «единственного» способа или интерфейса командной строки для создания нового проекта. Нам пришлось настроить наши проекты, установив зависимости разработчика, такие как webpack, чтобы связать наш код, babel, чтобы транспилировать его, и нам пришлось настраивать webpack самостоятельно.
Настройка становилась еще более сложной, когда вы хотели поддерживать расширенные функции, такие как рендеринг на стороне сервера.
На то, чтобы просто начать работу с приложением «привет, мир», могут потребоваться часы. Таким образом, сообщество перешло к использованию установленных шаблонов, которые сделали за них тяжелую работу.
Каковы преимущества использования шаблона?
- Простая установка и хороший опыт разработчика
- Обычно они предлагают хорошую документацию
- Они предлагают расширенные функции, такие как рендеринг на стороне сервера (SSR), быстрое обновление или горячая перезагрузка модуля.
- Вы можете сразу приступить к работе над своим приложением, не беспокоясь о настройке babel, webpack и т. Д.
Каковы недостатки использования шаблона?
Они требуют более высокой стоимости обслуживания, так как вам нужно самостоятельно обновлять зависимости. Поскольку исправления ошибок и новые функции объединены в шаблон, вам придется вручную объединить эти изменения в свой проект.
Они также добавляют в ваш проект много строк кода, которые вы не писали сами. Это еще больше усложняет поддержание этого.
Итак, каковы альтернативы использованию шаблона?
Есть три основных альтернативы использованию шаблона для вашей следующей проекции React в 2021 году.
1. Настройте проект самостоятельно.
Это наиболее трудоемкий и трудоемкий вариант, но, пожалуй, самый полезный. Если вы воспользуетесь этим подходом, вы лучше поймете инструменты разработки, такие как babel и webpack.
Эти знания бесценны, поскольку большинство интерфейсных инженеров плохо знакомы с такими инструментами, как webpack.
Он также предлагает максимальную настройку и позволяет настраивать свой проект по своему усмотрению.
Обратной стороной этого подхода является то, что вам нужно будет не только потратить время на первоначальную настройку, но и постоянно обновлять зависимости и корректировать настройку по мере внесения критических изменений в различные плагины веб-пакетов и сам веб-пакет.
2. Используйте приложение create-react-app.
Использование create-react-app - отличный способ начать работу с новым проектом React в 2021 году.
Но разве приложение create-react-app не является еще одним шаблоном? Да, технически. Но огромное преимущество использования create-react-app заключается в том, что оно скрывает все ваши конфигурации в зависимости react-scripts. Когда вы запускаете проект с помощью create-response-app, у вас есть файл конфигурации веб-пакета и т. Д.
Вместо обновления отдельных зависимостей все, что вам нужно сделать, это обновить react-scripts, чтобы получить последнюю версию create-response-app.
Основным недостатком использования create-react-app является то, что оно не поддерживает стандартные настройки. Чтобы добавить пользовательские загрузчики веб-пакетов, вам нужно будет либо извлечь (и теперь у вас снова есть шаблон), либо использовать сторонний инструмент, такой как craco.
3. Используйте create-next-app.
NextJS - мой любимый способ создания приложений React. Он больше не предназначен только для проектов с рендерингом на стороне сервера, теперь он поддерживает рендеринг статических сайтов. Create-next-app отлично подходит для начала работы с новым приложением.
Например, чтобы начать работу с новым проектом машинописного текста, вы можете запустить npx create-next-app --example typescript.
Как и create-response-app, он скрывает ваши зависимости от разработчиков в nextpackage. Таким образом, вам не нужно вручную обновлять зависимости разработчика, и вы получаете поддержку таких функций, как быстрое обновление, прямо из коробки.
И он даже поддерживает пользовательские конфигурации веб-пакетов, просто настройте свой next.config.js файл и добавьте любые загрузчики, которые вам нравятся.
Итак, что мне следует использовать в моем следующем проекте React?
Если вы работаете над клиентским приложением, которое не требует настройки веб-пакета, я бы порекомендовал вам использовать create-response-app.
Если вам нужны настраиваемые конфигурации сборки, или вам нужно поддерживать рендеринг на стороне сервера или рендеринг статического сайта, используйте create-next-app.
Как всегда, спасибо, что нашли время, чтобы прочитать наш контент и поддержать Frontend Digest. Если вам нравится писать подобный контент, обязательно свяжитесь с нами и станьте автором!
