Создали проект через: npm i react
Как запустить проект?
Как лучше создавать проект на React?
В официальной документации reactjs есть отдельный раздел в котором описываются способы создания нового React-приложения (Create React App, Next.js, Gatsby, другие наборы инструментов и даже создание с нуля).
Для создания и дальнейшей разработки приложения обычно используют Create React App.
Create React App — удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.
Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки.
Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.
Для создания проекта выполните команды:
npx create-react-app my-app
cd my-app
npm start
Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build
создаст оптимизированную сборку вашего приложения в папке build.
Заходите в директорию (свою папку), открываете консоль и указываете путь до этой папки (или в редакторе через терминал) и вводите туда npx create-react-app my-app
консоль будет спрашивать Вас, как назвать проект и т.п., все пропускаете нажав enter,
вводите в ту же консоль после установки cd my-app
и там же вводите npm start - сервер и приложение запустится
Если не хочется пользоваться create-react-app
, то для простейшей интеграции React-a можно обойтись и без проекта. Просто подключить на сайте:
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
(без jsx
)
Чтобы создать React JS проект нужно установить последнюю LTS версию Node.js (https://nodejs.org/en) на данный момент это v.20.12. Далее есть два варианта создания React проекта:
Классический вариант: https://create-react-app.dev - работает на webpack, для создания нового проекта выполняем команду
npx create-react-app folder-name
получаем React проект в папке folder-name, переходим в папку, устанавливаем зависимости
npm install
запускаем проект в dev режиме
npm run start
собираем проект командой
npm run build
Еще один вариант, на мой взгляд более интересный - https://vitejs.dev/guide работает на собственном движке, для создания нового проекта выполняем команду
npm create vite@latest my-vue-app -- --template react
здесь также получаем React проект в папке folder-name, переходим в папку, устанавливаем зависимости
npm install
запускаем проект в dev режиме
npm run dev
собираем проект командой
npm run build
npm i react
не создает проект, а только устанавливает пакет, погуглитеcreate-react-app