З підвищенням популярності бібліотек і фреймворків, зокрема React, створення готових до використання фронтенд-додатків стало простішим, ніж коли-небудь раніше.
React — популярна і широко використовувана бібліотека JavaScript, яка використовується для створення інтерфейсів вебсайтів або UI.
React є чудовим вибором для розробки односторінкових додатків (SPA), оскільки він дозволяє завантажити весь додаток на одну сторінку, що покращує досвід користувача. Він спрощує створення інтерактивних інтерфейсів користувача, даючи розробникам змогу легко будувати елементи, такі як кнопки, форми та відображення даних.
Продуктивність React покращується завдяки таким функціям, як Virtual DOM та різноманітні оптимізації, що гарантує ефективну роботу додатків. Крім того, React акцентує увагу на повторному використанні; компоненти можна використовувати в різних частинах додатка, що дозволяє заощаджувати час і зусилля під час розробки.
Необхідні умови
- Базові знання технологій веб-розробки, таких як HTML, CSS, JavaScript
- Редактор коду та веб-браузер: редактор коду, як VS Code, дозволяє вам легко писати та керувати вашим кодом, а веб-браузер дозволяє переглядати ваш додаток на локальному хості в реальному часі.
- Node.js та npm (Node Package Manager): ці інструменти допомагають керувати зовнішніми бібліотеками коду.
Встановлення Node.js та npm
Якщо Node.js і npm не встановлені на вашому пристрої, ви не зможете використовувати React, оскільки він залежить від багатьох менших частин коду (пакетів), щоб працювати. npm допомагає вам легко встановлювати, оновлювати та керувати цими пакетами. Node.js надає середовище для роботи цих інструментів. Ось покрокова інструкція по установці Node.js та npm.
- Відкрийте ваш веб-браузер, переважно Chrome або Edge, і перейдіть на офіційний сайт Node.js. https://nodejs.org/
- На офіційному сайті Node.js є 2 варіанти завантаження: LTS (Long Term Support) та поточна версія з новими функціями. Найкраще завантажити Node.js з довгостроковою підтримкою.
- Після завантаження інсталятора ви можете успішно запустити його, слідуючи інструкціям. Примітка: не забудьте вибрати опцію “ADD TO PATH”, щоб мати змогу запускати Node.js через термінал або командний рядок.
- Для перевірки, чи встановлені Node і npm на вашому пристрої, ви можете ввести наступні команди в терміналі або командному рядку.
node -v & npm -v: Ці команди покажуть, чи встановлені Node і npm, а також які версії ви маєте. Результат буде виглядати приблизно так.
Створення нового додатка React локально за допомогою Vite
Vite — це інструмент для збірки, створений для того, щоб спростити та пришвидшити розробку, особливо для JavaScript фреймворків, таких як React, Vue та Svelte тощо. На відміну від Create React App (CRA), Vite підтримує кілька фреймворків і пропонує набагато швидший і ефективніший спосіб пакувати ваш код для браузера.
Тепер, коли у вас встановлені Node.js та npm, ми використаємо Vite для налаштування нашого робочого середовища.
- Перейдіть на офіційний сайт Vite (https://vite.dev/guide/), трохи прокрутіть вниз, і ви побачите список команд для створення вашого першого проекту на Vite.
- У терміналі введіть команду, надану на сайті, як показано нижче.
- Після виконання цієї команди в терміналі, система запропонує вам відповісти на кілька питань, зокрема:
Назва проекту
Вибір фреймворка, в даному випадку React
Вибір варіанту, це може бути JavaScript або TypeScript, залежно від того, який ви хочете використовувати.
- Ваш проект тепер створений, і вам надаються нові команди для виконання в терміналі:
cd [Project Name]: Ця команда змінює директорію на створену вами папку проекту.
npm install: Ця команда встановлює необхідні пакети npm.
_npm run dev: Ця команда дозволяє вам переглядати ваш додаток в реальному часі на локальному хості за допомогою посилання.
Якщо ви використовуєте Visual Studio Code (VSCode), рекомендується виконати цю команду в терміналі VSCode для кращої точності.
- Після встановлення пакетів npm, ви можете відкрити свою папку безпосередньо в VSCode за допомогою команди code . у вашому терміналі.
Тепер ви можете використовувати команду npm run dev, щоб запустити ваш додаток у веб-браузері. Це дозволить вам бачити будь-які зміни, які ви вносите в код, в реальному часі.
Якщо ви читаєте це, ймовірно, ви тільки починаєте працювати з React. Разом з цим посібником, вам може бути цікаво ознайомитися з курсом React від Боба Зірролла і FreeCodeCamp на платформі Scrimba. https://scrimba.com/learn-react-c0e.
Перекладено з: SETTING UP REACT ON YOUR LOCAL MACHINE