Создание приложения React мертво! Вот несколько альтернатив

Create React App (CRA) когда-то был основным инструментом для создания новых проектов React. Он предоставил простой и удобный в использовании интерфейс командной строки (CLI) для настройки новых кодовых баз React, а также сервер разработки, автоматическую транспиляцию и многое другое.

Однако кажется, что дни CRA сочтены, с более чем 400 открытыми запросами на включение и отсутствием последние обновления.

Позвольте мне показать вам некоторые альтернативы CRA, которые мы лично используем в CroCoder. Альтернативы с расширенными функциями, более гибким и настраиваемым процессом разработки, которые активно поддерживаются.

Vite + React

Vite + React — отличная альтернатива Create React App (CRA), поскольку оно предлагает превосходную производительность и более быстрое время разработки. В отличие от CRA, скорость и производительность которого может постепенно снижаться по мере увеличения размера и сложности приложения, Vite построен на основе esbuild (сборщик JavaScript, написанный на Go), который связывает зависимости в 10–100 раз быстрее, чем сборщики на основе JavaScript. Кроме того, Vite использует собственный ESM браузера для анализа и компиляции кода по запросу. Vite также обеспечивает расширенную совместимость подключаемых модулей и более быстрые обновления по сравнению с CRA, что делает его более эффективным и действенным выбором для создания приложений React.

Еще одно преимущество использования Vite + React заключается в том, что он позволяет сократить время сборки. Vite использует собственный ESM браузера для анализа и компиляции кода по запросу, устраняя необходимость в отдельном этапе сборки. Это означает, что вы можете увидеть изменения сразу после начала разработки, не дожидаясь завершения сборки. Кроме того, Vite допускает абсолютный импорт, что упрощает управление и организацию вашей кодовой базы. Напротив, CRA использует относительный импорт, что может привести к более длинным и сложным путям импорта.

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

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

Веб-сайт нашей компании был создан с использованием Vite + React, и мы им более чем довольны. С минимальной настройкой нам удалось добавить статическую сборку + поддержку островной архитектуры, и теперь мы можем разверните его в Vercel за считанные минуты.

Ознакомьтесь с документацией Vite и попробуйте сами!

# Create Vite + React app using npm
npm create vite@latest vite-react-app -- --template react-ts

# Create Vite + React app using yarn
yarn create vite --template react-ts

# Create Vite + React app using pnpm
pnpm create vite --template react-ts

Next.js

Next.js — это интерфейсная платформа, созданная на основе React и предназначенная для повышения производительности, удобства пользователей и SEO веб-приложения. Он предоставляет готовое решение для рендеринга на стороне сервера (SSR) компонентов React, которое позволяет отправлять пользователю простой индексируемый HTML-код, упрощая поисковым роботам текстовое содержимое приложения. , тем самым улучшив его видимость в поисковых системах.

Next.js также предлагает функции инкрементной статической регенерации (ISR) и создания статического сайта (SSG), которые могут повысить скорость веб-сайта, но менее подходят для интерактивных веб-приложений, требующих большого количества действий пользователя.

Он считается одним из самых популярных инструментов в экосистеме React и используется многими ведущими компаниями.

Еще одно преимущество Next.js заключается в том, что он предоставляет простую и удобную среду разработки, которая позволяет разработчикам сосредоточиться на своем коде, а не на настройке инструментов сборки. Он поставляется со встроенным сервером разработки, горячей заменой модулей (HMR) и автоматическим разделением кода, что может ускорить время разработки.

Таким образом, Next.js — это популярный интерфейсный фреймворк, который предоставляет готовое решение для рендеринга компонентов React на стороне сервера, что может улучшить производительность, UX, а также SEO веб-приложений. Он предлагает функции для инкрементной статической регенерации и создания статических сайтов, он построен на основе React и совместим с популярными инструментами React. Он готов к работе, а также предоставляет простую среду разработки.

Создайте свой собственный стартовый Next.js и прочтите документацию Next.js, чтобы узнать о нем больше!

# Create Next.js app using npm
npx create-next-app@latest --ts

# Create Next.js app using yarn
yarn create next-app --typescript

# Create Next.js app using pnpm
pnpm create next-app --ts

Стек T3

T3 Stack — это стек веб-разработки, ориентированный на простоту, модульность и безопасность полного стека. Основные компоненты стека включают Next.js, JavaScript-фреймворк для рендеринга компонентов React на стороне сервера и TypeScript. Другие популярные дополнения к стеку включают Tailwind CSS, инфраструктуру CSS, ориентированную на утилиты, и tRPC, библиотеку для создания безопасных удаленных процедур.

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

Я не могу рекомендовать стек T3 достаточно, это похоже на глоток свежего воздуха в экосистеме React.

Если вы еще не использовали его раньше, обязательно попробуйте. Узнайте больше об этом в документах T3 Stack, и если вы хотите настроить свой монорепозиторий с помощью проекта t3 Stack, возьмите взгляните на create-t3-turbo.

# Create T3 Stack app using npm
npm create t3-app@latest

# Create T3 Stack app using yarn
yarn create t3-app

# Create T3 Stack app using pnpm
pnpm create t3-app

Заключение

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

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

Еще одно преимущество использования альтернативы Create React App заключается в том, что у них часто более активное и заинтересованное сообщество. Например, Next.js имеет большое и активное сообщество, в котором многие разработчики делятся своим опытом и решениями через онлайн-учебники и форумы. Это может быть невероятно полезно для разработчиков, которые плохо знакомы с React или которым нужна помощь и поддержка в решении конкретных проблем или проблем.

Таким образом, хотя приложение Create React может быть «мертвым», экосистема React все еще жива и здорова. Существует множество доступных альтернатив, которые могут обеспечить столь же хороший или даже лучший опыт разработки, и их стоит рассмотреть для вашего следующего проекта React. Независимо от того, выберете ли вы Next.js, Vite + React или другую альтернативу, вы можете быть уверены, что используете инструмент, который хорошо поддерживается, активно поддерживается и создан с использованием лучших современных профессиональных практик.

:::информация Также опубликовано здесь.

:::