Поиск по сайту:

Как настроить проект React с помощью Vite

Автор выбрал программу Write for DOnations.

Введение

Как правило, вы можете создать новый проект, используя модули ECMAScript для связывания с файлами JavaScript, которые не перестраивают весь пакет после каждого изменения файла. Эти различия приводят к более быстрому созданию, обновлению и созданию приложения React с помощью Vite.

В этом руководстве будет создано новое приложение React с использованием инструмента Vite. Вы создадите базовое приложение с новым компонентом, CSS и файлом изображения и подготовите оптимизированный пакет для развертывания.

Предпосылки

Чтобы следовать этому руководству, вам понадобится следующее:

  • Как установить Node.js.
  • На вашем компьютере установлен менеджер пакетов Yarn версии 1.22.0 или выше. Вы можете установить Install Yarn, выполнив шаг 1 в разделе Установка и использование диспетчера пакетов Yarn для Node.js.
  • Знакомство с HTML, CSS и современным JS, используемым в React.
  • Основные знания о React, которые вы можете изучить из серии How To Code in React.
  • Мобильный телефон, подключенный к той же сети Wi-Fi, что и ваш компьютер, чтобы вы могли просматривать свое приложение с мобильного устройства.

Шаг 1 — Создание проекта Vite

На этом шаге вы создадите новый проект React с помощью инструмента Vite из командной строки. Вы будете использовать менеджер пакетов yarn для установки и запуска скриптов.

Запустите следующую команду в своем терминале, чтобы создать новый проект Vite:

  1. yarn create vite

Эта команда запустит исполняемый файл Vite из удаленного репозитория npm. Он настроит необходимые инструменты для создания локальной среды разработки React. Наконец, откроется меню командной строки для настроек проекта и типа языка.

После завершения скрипта вам будет предложено ввести имя проекта:

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
- create-vite
- cva
? Project name: » vite-project

Введите название вашего проекта (в этом руководстве в качестве примера имени будет использоваться digital-ocean-vite):

  1. digital-ocean-vite

После ввода имени вашего проекта Vite предложит вам выбрать фреймворк:

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Vite позволяет вам запускать различные типы проектов, а не только React. В настоящее время он поддерживает проекты React, vanilla JavaScript.

Используйте клавишу со стрелкой на клавиатуре, чтобы выбрать React.

После выбора платформы React Vite предложит вам выбрать тип языка. Вы можете использовать JavaScript или TypeScript для работы над своим проектом.

С помощью клавиш со стрелками выберите JavaScript:

Output
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

После настройки фреймворка вы увидите вывод о том, что проект создан. Затем Vite предложит вам установить зависимости с помощью Yarn:

Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

Перейдите в папку проекта, как указано:

  1. cd digital-ocean-vite

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

  1. yarn

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

Output
success Saved lockfile.
Done in 43.26s.

Теперь вы настроили новый проект React с помощью Vite и установили пакеты, необходимые для React и Vite.

Далее вы запустите сервер разработки для тестирования приложения.

Шаг 2 — Запуск сервера разработки

На этом шаге вы запустите сервер разработки, чтобы убедиться, что все работает.

Внутри папки digital-ocean-vite используйте следующую команду для запуска сервера разработки:

  1. yarn run dev

Эта команда является псевдонимом команды vite. Он запустит ваш проект в режиме разработки.

Вы получите следующий вывод:

Output
VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

Затем откройте браузер и посетите http://localhost:5173/. Проект React по умолчанию будет работать на порту 5173:

Когда вы видите, что это приложение работает, вы успешно установили React с Vite. Затем вы просмотрите свое приложение со своего мобильного телефона.

Шаг 3 — Предварительный просмотр вашего приложения с мобильного телефона

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

Чтобы запустить ваше приложение в вашей локальной сети, вы должны сначала остановить текущий сервер. В терминале используйте CTRL+C, чтобы завершить работающий в данный момент сервер разработки.

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

  1. yarn run dev --host

Флаг --host сообщает Vite, что ваше приложение должно быть доступно в локальной сети.

Вы получите этот вывод в своем терминале:

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

Это локальный IP-адрес, уникальный для вашей компьютерной сети или маршрутизатора.

Откройте браузер на своем мобильном телефоне, затем введите указанный выше IP-адрес и порт, чтобы получить доступ к предварительному просмотру вашего приложения Vite со своего мобильного телефона:

Теперь вы запустили свое приложение в среде разработки и убедились, что оно работает. На следующем шаге вы удалите шаблонный код, поставляемый с Vite.

Шаг 4 — Удаление шаблона по умолчанию

На этом шаге вы удалите шаблонные файлы проекта Vite из каталога src/, что позволит вам настроить новое приложение. Вы также ознакомитесь со структурой проекта по умолчанию для текущего приложения.

Используйте следующую команду для просмотра содержимого каталога src/:

  1. ls src/

На выходе будут перечислены все доступные файлы:

Output
App.css
App.jsx
assets
index.css
main.jsx

Используйте команду rm для удаления файла или каталога. Используйте следующие команды, чтобы удалить файлы по умолчанию из проекта:

  1. rm src/App.css

  2. rm src/App.jsx

  3. rm src/index.css

Удалите каталог assets с помощью следующей команды:

  1. rm -r src/assets

Флаг -r — это рекурсивная операция, необходимая при удалении каталога вместе с его содержимым.

После удаления этих файлов в каталоге src/ остается только main.jsx. Запустите команду ls src/ еще раз, чтобы увидеть оставшиеся файлы:

  1. ls src/

Теперь каталог будет содержать только файл main.jsx:

Output
main.jsx

Поскольку вы удалили все остальные файлы, теперь вам нужно удалить ссылку в main.jsx на удаленный файл CSS.

Откройте main.jsx для редактирования с помощью следующей команды:

  1. nano src/main.jsx

Удалите выделенную строку, чтобы отменить ссылку на файл CSS:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

Сохраните и закройте файл main.jsx.

Создайте новый файл с именем App.jsx в каталоге src/ с помощью следующей команды:

  1. nano src/App.jsx

Добавьте следующий код в файл App.jsx:

export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

Этот код создает новый функциональный компонент React с именем App. Префикс export default указывает JavaScript экспортировать эту функцию как экспорт по умолчанию. Тело функции содержит <div> с текстом Hello World.

Сохраните и закройте файл App.jsx.

Используйте следующую команду, чтобы снова запустить сервер разработки:

  1. yarn run dev --host

Теперь откройте или обновите http://localhost:3000 в своем браузере, чтобы получить доступ к пустой странице с текстом Hello World:

На этом шаге вы удалили некоторые файлы по умолчанию из проекта Vite. Далее вы создадите базовое приложение с новыми компонентами, файлами CSS и файлами изображений.

Шаг 5 — Создание базового приложения

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

В следующем подразделе вы создадите новый компонент для своего приложения React.

Создание компонента

Создание нового компонента добавляет модульности вашему проекту. Вы добавите все компоненты в каталог components, чтобы все было организовано.

Используйте следующую команду, чтобы создать новый каталог с именем components внутри src/:

  1. mkdir src/components

Затем создайте новый файл с именем Welcome.jsx внутри каталога src/components/ с помощью команды:

  1. nano src/components/Welcome.jsx

Добавьте следующий код в файл Welcome.jsx:

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

Приведенный выше код создаст новый функциональный компонент React с именем Welcome. Префикс export default указывает JavaScript экспортировать эту функцию как экспорт по умолчанию.

Тег div с именем класса wrapper позволяет настроить таргетинг на этот раздел в CSS. Теги h1 и p будут отображать сообщение на экране.

Сохраните и закройте файл.

Затем вы добавите ссылку на этот новый компонент в файл App.jsx.

Откройте App.jsx с помощью следующей команды:

  1. nano src/App.jsx

Обновите содержимое App.jsx выделенным кодом:

import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

Эта строка кода импортирует Welcome.jsx в приложение и связывает новый компонент с телом функции. Когда закончите, сохраните и закройте файл.

В следующем подразделе вы добавите изображение в свое приложение.

Добавление изображения

Добавление изображений в React — распространенный вариант использования в разработке приложений.

Создайте новый каталог с именем img в каталоге src/ с помощью следующей команды:

  1. mkdir src/img

Перейдите в каталог src/img с помощью этой команды:

  1. cd src/img

Вы загрузите это изображение Сэмми в src/img.

Загрузите образ с помощью wget:

  1. wget https://html.sammy-codes.com/images/small-profile.jpeg

Переименуйте изображение с помощью следующей команды:

  1. mv small-profile.jpeg sammy.jpeg

Эта команда переименовывает файл изображения из small-profile.jpeg в sammy.jpeg, на который позже будет легче ссылаться.

Вернитесь в свой корневой каталог с помощью этой команды:

  1. cd ../../

Затем вы обновите файл Welcome.jsx, добавив ссылку на это изображение. Откройте файл:

  1. nano src/components/Welcome.jsx

Обновите файл Welcome.jsx, добавив выделенные строки:

import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Первая строка импортирует изображение в React как модуль.

Другая строка внутри тела функции создаст новый тег <img> и свяжет атрибут src с только что импортированным компонентом изображения. Свойства width и height установят соответствующие атрибуты изображения на 200 пикселей.

Сохраните и закройте файл Welcome.jsx.

Далее вы добавите CSS в свой проект.

Добавление CSS

В этом подразделе вы добавите в свой проект пользовательский файл CSS для стилизации своего приложения.

Создайте новый каталог с именем css в каталоге src/ с помощью следующей команды:

  1. mkdir src/css

Теперь создайте новый файл CSS с именем main.css в src/css:

  1. nano src/css/main.css

Добавьте следующий код в файл main.css:

body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

В приведенном выше CSS вы устанавливаете отображение сетки и размещаете элементы в центре body. Вы также устанавливаете семейство шрифтов и цвет фона.

Класс .wrapper выберет div-оболочку в вашем файле Welcome.jsx. Стили для этого класса будут делать следующее:

  • Установите цвет фона.
  • Добавить отступ 20 пикселей.
  • Добавьте закругленные углы на 10 пикселей.

Селектор h1 нацелится на тег в HTML, установив его цвет на оттенок фиолетового.

По завершении сохраните и закройте файл main.css.

Далее вы сошлетесь на новый файл CSS из компонента Welcome.jsx. Откройте файл Welcome.jsx:

  1. nano src/components/Welcome.jsx

Обновите содержимое файла выделенной строкой:

import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Эта строка импортирует файл CSS как модуль в ваш компонент. Возможно, вам потребуется обновить строку, указав правильный путь к папке вашего проекта.

По завершении сохраните и закройте файл Welcome.jsx.

В следующем подразделе вы измените строку заголовка вашего приложения.

Изменение строки заголовка приложения

По умолчанию приложение Vite отображает текст Vite + React в строке заголовка окна браузера. На этом шаге вы измените его на описательный заголовок.

Откройте index.html в корневом каталоге:

  1. nano index.html

Обновите тег <title>, указав выделенный текст:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

Этот текст заменяет строку заголовка приложения Vite по умолчанию названием вашего собственного приложения.

Сохраните и закройте файл index.html.

Если вам нужно перезапустить сервер разработки, выполните эту команду:

  1. yarn run dev --host

После всех этих изменений посетите http://localhost:5173, чтобы просмотреть свое приложение. Вы увидите новую версию вашего приложения.

Вы можете закрыть сервер разработки, когда будете готовы перейти к сборке.

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

Шаг 6 — Создание для производства

На этом шаге вы создадите оптимизированный пакет приложений, готовый к развертыванию на сервере. Чтобы создать сборку, выполните в терминале следующую команду:

  1. yarn run build

Эта команда создает новую папку dist с уменьшенными исходными файлами, которые вы можете развернуть на своем сервере для производства.

Вы получите вывод, подобный этому:

Output
vite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

Теперь вы можете развернуть содержимое папки dist на сервер онлайн. Если у вас есть руководство по развертыванию приложения React на платформе приложений DigitalOcean.

Заключение

В этом руководстве вы создали новое приложение React с помощью инструмента Vite. Вы создали новое приложение React с помощью команды yarn create vite. После удаления стандартного кода вы создали свои компоненты, добавив пользовательское изображение, файл CSS и изменив строку заголовка. Наконец, вы создали оптимизированный пакет с помощью команды yarn run build, готовый к развертыванию.

Теперь, когда у вас есть приложение React, созданное с помощью Vite, посмотрите, что еще вы можете сделать с помощью React, в учебных пособиях по React.