Автор выбрал Code.org для получения пожертвования в рамках программы Write for DOnations.
Введение
Обычно вы можете создать новый проект, используя Create React App, но установка более 140 МБ зависимостей может занять много времени. Vite – это легковесный инструмент, который требует всего 31 МБ зависимостей, что сэкономит время при создании нового проекта. Vite также использует браузерные модули ES (ECMAScript) для ссылок на файлы JavaScript, что не требует полной пересборки пакета после каждого изменения файла. Эти различия обеспечивают более быстрый опыт создания, обновления и сборки приложения React с использованием Vite.
В этом руководстве будет создано новое приложение React с использованием инструмента Vite. Вы создадите базовое приложение с новым компонентом, CSS и файлом изображения, и подготовите оптимизированный пакет для развертывания.
Упростите развертывание приложений React с помощью DigitalOcean App Platform. Развертывайте React напрямую из GitHub за несколько минут.
Предварительные требования
Для выполнения этого учебного пособия вам понадобятся следующие компоненты:
- Node.js версии 12.2.0 или выше, установленный на вашем компьютере. Вы можете установить последнюю версию Node.js, следуя нашему учебнику по Установке Node.js.
- Менеджер пакетов Yarn версии 1.22.0 или выше, установленный на вашем компьютере. Вы можете установить Yarn, следуя Шагу 1 в учебнике Как установить и использовать менеджер пакетов Yarn для Node.js.
- Знакомство с HTML, CSS и современным JavaScript. Также полезно знать современный JS, используемый в React.
- A foundational knowledge of React, which you can learn with the How To Code in React series.
- A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.
Шаг 1 — Создание проекта Vite
На этом этапе вы создадите новый проект React, используя инструмент Vite из командной строки. Вы будете использовать менеджер пакетов yarn для установки и запуска скриптов.
Выполните следующую команду в вашем терминале, чтобы создать новый проект Vite:
- yarn create vite
Эта команда выполнит исполняемый файл Vite из удаленного репозитория npm. Она настроит необходимые инструменты для создания локальной среды разработки React. Наконец, она откроет меню командной строки для настроек проекта и выбора языка.
После завершения скрипта вам будет предложено ввести имя проекта:
Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project
Введите имя вашего проекта (в этом руководстве будет использоваться digital-ocean-vite в качестве примера):
- digital-ocean-vite
После ввода имени проекта Vite предложит вам выбрать фреймворк:
Output? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others
Vite позволяет создавать различные типы проектов, не только React. В настоящее время поддерживаются React, Preact, Vue, Lit, Svelte, и 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:
OutputDone:
Scaffolding project in path\to\digital-ocean-vite...
Done. Now run:
cd digital-ocean-vite
yarn
yarn dev
Done in 129.89s.
Перейдите в папку вашего проекта, как указано:
- cd digital-ocean-vite
Затем используйте команду yarn для установки зависимостей проекта.
- yarn
По завершении установки зависимостей будет возвращен результат с указанием времени, затраченного на установку зависимостей:
Outputsuccess Saved lockfile.
Done in 43.26s.
Теперь вы настроили новый проект React с использованием Vite и установили необходимые пакеты для React и Vite.
Далее вы запустите сервер разработки, чтобы протестировать приложение.
Шаг 2 — Запуск сервера разработки
На этом этапе вы запустите сервер разработки, чтобы убедиться, что все работает правильно.
Из папки digital-ocean-vite выполните следующую команду для запуска сервера разработки:
- yarn run dev
Эта команда является псевдонимом команды vite. Она запустит ваш проект в режиме разработки.
Вы получите следующий результат:
OutputVITE 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, чтобы остановить запущенный сервер разработки.
Затем используйте следующую команду для запуска вашего проекта:
- yarn run dev --host
Флаг --host указывает Vite на открытие вашего приложения в локальной сети.
Вы получите следующий вывод в вашем терминале:
OutputVITE 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/:
- ls src/
Список всех доступных файлов:
OutputApp.css
App.jsx
assets
index.css
main.jsx
Используйте команду rm для удаления файла или каталога. Используйте следующие команды для удаления файлов по умолчанию из проекта:
- rm src/App.css
- rm src/App.jsx
- rm src/index.css
Удалите каталог assets с помощью следующей команды:
- rm -r src/assets
Флаг -r – это рекурсивная операция, необходимая при удалении каталога вместе с его содержимым.
После удаления этих файлов в каталоге src/ останется только файл main.jsx. Запустите команду ls src/ снова, чтобы увидеть оставшиеся файлы:
- ls src/
Теперь в каталоге будет содержаться только файл main.jsx:
Outputmain.jsx
Поскольку вы удалили все остальные файлы, вам теперь нужно удалить ссылку в файле main.jsx на удаленный CSS-файл.
Откройте файл main.jsx для редактирования с помощью следующей команды:
- 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/ с помощью следующей команды:
- 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.
Используйте следующую команду, чтобы снова запустить сервер разработки:
- yarn run dev --host
Теперь откройте или обновите http://localhost:3000 в вашем браузере, чтобы получить доступ к пустой странице, на которой будет отображен текст Hello World:
На этом шаге вы удалили некоторые из файлов по умолчанию из проекта Vite. Далее вы создадите базовое приложение с новыми компонентами, файлами CSS и файлами изображений.
Шаг 5 – Создание базового приложения
На этом шаге вы создадите компоненты, добавите файлы CSS и ссылку на изображения, создав базовое приложение. Начните с выхода из сервера разработки.
В следующем подразделе вы создадите новый компонент для вашего приложения React.
Создание компонента
Создание нового компонента добавляет модульность в ваш проект. Вы добавите все компоненты в каталог components, чтобы сохранить порядок.
Используйте следующую команду, чтобы создать новый каталог с именем components внутри src/:
- mkdir src/components
Затем создайте новый файл с именем Welcome.jsx внутри каталога src/components/ с помощью команды:
- 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 с помощью следующей команды:
- nano src/App.jsx
Обновите содержимое App.jsx с выделенным кодом:
import Welcome from "./components/Welcome"
export default function App() {
return (
<>
<Welcome />
</>
)
}
Эта строка кода импортирует Welcome.jsx в приложение и связывает новый компонент с телом функции. После завершения сохраните и закройте файл.
В следующем подразделе вы добавите изображение в свое приложение.
Добавление изображения
Добавление изображений в React является распространенным случаем использования в разработке приложений.
Создайте новый каталог с именем img в каталоге src/ с помощью следующей команды:
- mkdir src/img
Перейдите в каталог src/img с помощью этой команды:
- cd src/img
Вы загрузите это изображение Сэмми в src/img.
Загрузите изображение с помощью wget:
- wget https://html.sammy-codes.com/images/small-profile.jpeg
Переименуйте изображение с помощью следующей команды:
- mv small-profile.jpeg sammy.jpeg
Эта команда переименовывает файл изображения с small-profile.jpeg на sammy.jpeg, что позже будет проще ссылаться.
Вернитесь в корневой каталог с этой командой:
- cd ../../
Затем вы обновите файл Welcome.jsx, чтобы он ссылался на это изображение. Откройте файл:
- 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/ с помощью следующей команды:
- mkdir src/css
Теперь создайте новый файл CSS под названием main.css в src/css:
- 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:
- 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 в корневом каталоге:
- 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.
Если вам нужно перезапустить сервер разработки, выполните эту команду:
- yarn run dev --host
После всех этих изменений посетите http://localhost:5173, чтобы увидеть ваше приложение. Вы увидите новую версию вашего приложения.
Вы можете закрыть сервер разработки, когда будете готовы к продолжению работы.
Теперь вы добавили изображение, изменили стили и создали полированный пользовательский интерфейс. В следующем и последнем шаге вы создадите оптимизированный пакет приложения для развертывания.
Шаг 6 — Создание для Продакшна
На этом шаге вы создадите оптимизированный пакет приложения, готовый к развертыванию на сервере. Чтобы создать сборку, выполните следующую команду в терминале:
- yarn run build
Эта команда создает новую папку dist с минимизированными исходными файлами, которые вы можете развернуть на своем сервере для продакшна.
Вы получите вывод, аналогичный следующему:
Outputvite 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 на сервере в интернете. Если у вас есть сервер Apache или Nginx, вы можете загрузить содержимое вручную. Вы также можете использовать платформу приложений для выполнения сценария сборки и автоматической генерации файлов сборки. Чтобы развернуть ваше React-приложение на платформе приложений DigitalOcean, следуйте нашему руководству по Как развернуть приложение React на платформе приложений DigitalOcean.
Заключение
В этом руководстве вы создали новое React-приложение с использованием инструмента Vite. Вы создали свежее React-приложение с помощью команды yarn create vite. После удаления шаблонного кода вы создали свои компоненты, добавив пользовательское изображение, файл CSS и изменив заголовок. Наконец, вы создали оптимизированный пакет с помощью команды yarn run build, готовый к развертыванию.
Теперь, когда у вас есть React-приложение, построенное с помощью Vite, посмотрите, что еще вы можете сделать с React в серии Как программировать в React.js и изучите другие учебники по React.
Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite