Пошук уроків, статей та іншого контенту
Створите новий React-проєкт за допомогою Vite, запустите сервер розробки та виконаєте першу збірку.
Для створення React-проєкту потрібні:
встановлений Node.js;
менеджер пакетів npm, який встановлюється разом із Node.js;
термінал або командний рядок.
Перевірте встановлені версії:
node --version
npm --versionЯкщо команди не знайдено, встановіть актуальну LTS-версію Node.js.
Виконайте команду:
npm create vite@latest my-react-app -- --template reactУ цій команді:
npm create vite@latest запускає генератор нового Vite-проєкту;
my-react-app — назва папки та проєкту;
--template react вказує, що потрібно створити проєкт на React.
Після виконання команди Vite створить структуру проєкту в папці my-react-app.
Перейдіть до цієї папки:
cd my-react-appВстановіть залежності:
npm installКоманда npm install прочитає файл package.json і завантажить усі пакети, необхідні для роботи проєкту. Вони будуть збережені в папці node_modules.
Після створення проєкт матиме приблизно таку структуру:
my-react-app/
├── public/
├── src/
│ ├── assets/
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
└── vite.config.jsОсновні файли:
index.html — HTML-сторінка, у яку завантажується React-застосунок;
src/main.jsx — початкова точка React-застосунку;
src/App.jsx — компонент, який відображається на сторінці;
src/App.css — стилі компонента App;
package.json — опис проєкту, його залежностей і команд;
vite.config.js — конфігурація Vite.
Запустіть сервер розробки:
npm run devУ терміналі з’явиться адреса, зазвичай:
http://localhost:5173/Відкрийте цю адресу у браузері. Ви побачите стартову сторінку React-проєкту.
Сервер розробки стежить за змінами у файлах. Коли ви змінюєте код і зберігаєте файл, браузер автоматично оновлює сторінку.
Щоб зупинити сервер, натисніть Ctrl + C у терміналі.
Відкрийте файл src/App.jsx і замініть його вміст:
import { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
return (
<main className="app">
<h1>Мій перший React-проєкт</h1>
<p>Цей застосунок створено за допомогою Vite.</p>
<button onClick={() => setCount(count + 1)}>
Натиснуто: {count}
</button>
</main>
);
}
export default App;Тепер оновіть src/App.css:
.app {
max-width: 600px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}
button {
padding: 10px 16px;
border: 0;
border-radius: 6px;
background-color: #646cff;
color: white;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #535bf2;
}Після збереження файлів сторінка автоматично оновиться. Кнопка збільшуватиме лічильник під час натискання.
У цьому прикладі:
App — React-компонент;
useState(0) створює стан із початковим значенням 0;
setCount змінює значення стану;
{count} виводить значення в JSX;
onClick визначає дію після натискання кнопки.
package.jsonУ файлі package.json містяться команди проєкту:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
}
}Команда npm run dev запускає сервер розробки.
Команда npm run build створює оптимізовану версію застосунку для публікації.
Зупиняти сервер розробки перед збіркою не обов’язково. В іншому терміналі або після зупинки сервера виконайте:
npm run buildVite проаналізує проєкт і створить готові файли в папці dist:
dist/
├── assets/
└── index.htmlЦі файли містять оптимізований застосунок:
JavaScript і CSS стиснуті;
непотрібні частини коду вилучені;
файли підготовлені для розміщення на вебсервері.
Повідомлення про успішну збірку матиме приблизно такий вигляд:
✓ built in ...Щоб локально перевірити результат збірки, виконайте:
npm run previewVite запустить локальний сервер, який використовує файли з папки dist. У терміналі з’явиться адреса для перегляду застосунку.
npm run preview призначена для перевірки вже створеної збірки. Під час звичайної розробки використовуйте npm run dev.
Для нового проєкту послідовність команд виглядає так:
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run devКоли застосунок готовий до збірки:
npm run buildnpm installЯкщо після запуску проєкту з’являється помилка про відсутні модулі, виконайте:
npm installПісля цього повторіть:
npm run devКоманди npm run dev і npm run build потрібно виконувати в папці, де розташований файл package.json.
Перевірити поточну папку можна за допомогою команди:
pwdУ Windows PowerShell можна використати:
Get-LocationЯкщо порт 5173 використовується іншою програмою, Vite запропонує інший доступний порт. Відкрийте адресу, яку покаже термінал.
Переконайтеся, що:
файл збережено;
змінюється файл у папці потрібного проєкту;
сервер npm run dev досі працює;
у браузері відкрито адресу поточного сервера.
Vite швидко створює основу React-проєкту.
Новий проєкт можна створити командою npm create vite@latest.
Залежності встановлюються через npm install.
Сервер розробки запускається командою npm run dev.
Основний компонент проєкту розташований у src/App.jsx.
Оптимізована версія застосунку створюється командою npm run build.
Результат збірки зберігається в папці dist.