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

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

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

создать-реагировать-приложение

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

npx create-creact-app project-name
cd project-name
npm start

# starts on port 3000

нано-реагировать-приложение

Действительно минимальная замена Create-React-App. Полноценный проект React всего в 6 файлах. Использует ViteJS с нулевой конфигурацией вместо Webpack. Без извлечения, без линтинга, без сервис-воркера.

npx nano-react-app project-name
cd project-name
npm install
npm start

# starts on port 3000

реактивный стартовый набор

Самый популярный в Интернете интерфейсный шаблон для создания веб-приложений с помощью React, Relay и GraphQL. Основан на архитектуре JAM stack.

git clone -o seed -b main --single-branch https://github.com/kriasoft/react-starter-kit.git project-name
cd project-name
npm install
npm start

# starts on port 3000

реагировать-шаблон

Масштабируемая автономная основа с лучшим опытом разработчиков и акцентом на производительность и лучшие практики.

git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git project-name
cd project-name
npm run setup
npm start

# starts on port 3000

"нейтрино"

Он использует Webpack для создания как веб-проектов, так и проектов Node.js, предоставляя полные предустановки сборки, которые можно использовать для целей и проектов.

npx @neutrinojs/create-project project-name
# pick react from the wizard
cd project-name
npm start

# starts on port 5000

разводить

Инструмент, который абстрагирует всю сложную конфигурацию, необходимую для создания приложений SPA и SSR. Это оставляет за вами архитектурные решения вашего приложения о фреймворках, маршрутизации и получении данных.

npx create-razzle-app project-name
cd project-name
npm start

# starts on port 3000

создать-реагировать-библиотеку

CLI для создания многоразовых современных библиотек React с помощью Rollup.

npx create-react-library 
# enter project-name as a title in wizard
cd project-name
npm start

# runs `rollup` with the watch flag to recompile your source on changes, no port used

в отдельном терминале запустите другой сервер для предварительного просмотра примера:

cd project-name/example
npm start

# starts on port 3000

tsdx

CLI с нулевой конфигурацией, который поможет вам с легкостью разрабатывать, тестировать и публиковать современные пакеты TypeScript, чтобы вы могли сосредоточиться на своей потрясающей новой библиотеке и не тратить еще один день на настройку.

npx tsdx create project-name 
# choose react as a template in the wizard
cd project-name
npm start

# runs in watch mode to recompile your source on changes, no port used

реагировать-pwa

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

git clone https://github.com/Atyantik/react-pwa.git project-name
cd project-name
npm install
npm start

# starts on port 9090

рекит

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

npm install -g rekit  # install rekit cli
npm install -g rekit-studio  # install rekit studio

rekit create project-name
cd project-name
npm install
rekit-studio -p 3000

# starts on port 3000

реагировать-firebase-стартер

Шаблонный проект для создания веб-приложений с React, GraphQL и Relay.

git clone https://github.com/kriasoft/react-firebase-starter.git project-name
cd project-name
npm setup
npm start

# starts on port 3000

электронно-реагировать-шаблон

Основа для масштабируемых кроссплатформенных приложений. Использует Электрон, React, React Router, Webpack и React Fast Refresh.

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git project-name
cd project-name
npm install
npm start

# starts on port 1212

создать-реагировать-нативное-приложение

Ориентирован на самый быстрый способ загрузить приложение React Native, которое работает на iOS, Android и в Интернете, не беспокоясь о нативных платформах или сборщиках, необходимых для разработки и доставки приложений.

npx create-react-native-app
# set the name to project-name in the wizard
cd project-name
npm run web

# starts on port 19006

создать следующее приложение

Самый простой способ начать работу — с Next.js. Вы можете создать новое приложение, используя стандартный шаблон Next.js или один из официальных примеров Next.js.

npx create-next-app project-name
cd project-name
npm run dev

# starts on port 3000

Гэтсби.js

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

npm install -g gatsby-cli # install gatsby cli

gatsby new
# set the name to project-name in the wizard
cd project-name
gatsby develop

# starts on port 8000

блиц

Платформа с включенными батареями, вдохновленная Ruby on Rails, построена на Next.js и имеет абстракцию уровня данных Zero-API, которая устраняет необходимость в REST/GraphQL.

npm install -g blitz --legacy-peer-deps # install blitz cli

blitz new project-name
cd project-name
blitz dev

# starts on port 3000

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

Писать всегда было моей страстью, и мне доставляет удовольствие помогать и вдохновлять людей. Если у вас есть какие-либо вопросы, не стесняйтесь обращаться!

Присоединяйтесь ко мне в Twitter, LinkedIn и GitHub!

Посетите мой Блог для большего количества статей, подобных этой.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.