Веб-разработка

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

1 min read Давити Чкоидзе
Как создать новое React-приложение

Многие из вас, вероятно, создавали приложение на React годами, используя следующий метод:


npx create-react-app my-app
cd my-app
npm start

К сожалению, этот метод теперь устарел. Если вы посетите официальный сайт React, вы прочитаете следующее: "Если вы хотите создать новое приложение или сайт с React, мы рекомендуем начать с фреймворка."

Но что, если вы не хотите использовать фреймворк? Что если вам нужно только React для рендеринга компонентов на клиентской стороне в вашем монолитном приложении? Или, возможно, вы предпочитаете строить всё с нуля и хотите избежать работы с инструментами, связанными с фреймворками (некоторые из которых могут быть дорогими и, возможно, кажется, что они подталкивают вас к использованию продуктов Next.js и Vercel)?

Решение простое: используйте инструмент сборки.

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

Шаги для создания приложения React с Vite:

 

1. Перейдите в директорию, где вы планируете хранить свои проекты:


cd ~/Projects

2. Начните создание вашего приложения React:


npm create vite@latest

3. Следуйте подсказкам. Сначала вам предложат ввести название приложения, и будет создана новая директория с тем же именем. Затем вам нужно будет выбрать фреймворк — в этом случае выберите React.

4. Далее вам нужно выбрать вариант. Доступные опции:

  • TypeScript
  • TypeScript + SWC
  • JavaScript
  • JavaScript + SWC
  • React Router v7

5. В конце вас спросят, хотите ли вы инициализировать репозиторий Git и выбрать npm в качестве менеджера зависимостей. После того, как зависимости будут установлены, вы сможете перейти в директорию проекта и запустить:


cd [your-app-dir]
npm run dev

Вот и всё! Ваше новое приложение на React готово к работе.


Share article