Как создать локальную среду React с помощью Vite

Вы усердно работали над изучением JavaScript. Готовы ли вы начать изучение React? В этой статье рассказывается, как создать локальную среду с помощью Vite, предлагая практический подход к практике React!

Введение

Если вы хотите поднять свои навыки JavaScript на новый уровень, изучение React — отличный способ. Но с чего начать? Что ж, создание локальной среды — это практический подход к получению практического опыта в практике React!

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

В этой статье рассматриваются:

Пошаговые инструкции по созданию проекта Vite
Удаление шаблона по умолчанию
Создание простых компонентов React
Добавление основных стилей CSS.
Развертывание проекта с помощью Netlify (необязательно)

К концу этого руководства у вас будет четкое представление о создании локальной среды React с помощью Vite!

Что такое Вите?

Vite — это инструмент сборки и сервер разработки, который разработан, чтобы быть быстрым и эффективным. Он обычно используется для разработки современных веб-приложений с такими фреймворками, как React, Vue и Svelte.

Vite предоставляет быстрый и простой способ создания локальной среды разработки, позволяя разработчикам тестировать и экспериментировать со своим кодом в безопасных и контролируемых условиях.

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

Предпосылки

Мы будем использовать редактор кода VS с установленными Node.js и менеджер пакетов узла для создания локальной среды разработки.

Командная строка (терминал bash)

Затем мы создадим проект Vite с помощью командной строки, выбрав JavaScript и React.

(Необязательно)

Наконец, мы развернем проект React из командной строки в Netlify.

Создание проекта Vite

В коде VS, используя терминал bash, введите следующую команду:

КОПИРОВАТЬ

npm create vite@latest

В случае успеха вам будет предложено назвать проект (имя по умолчанию — vite-project).

КОПИРОВАТЬ

? Project name: vite-project

Далее вам будет предложено выбрать фреймворк с помощью клавиш со стрелками. Мы выберем React, нажав клавишу ввода, чтобы отправить.

КОПИРОВАТЬ

Select a framework:
     Vanilla
     Vue
     React
     Preact
     Lit
     Svelte
     Others

Затем вам будет предложено выбрать вариант. Мы выберем JavaScript и нажмем клавишу ввода, чтобы отправить.

КОПИРОВАТЬ

Select a variant:
     JavaScript
     TypeScript
     JavaScript + SWC
     TypeScript + SWC

Теперь у вас будет проект Scaffolding, и отобразится путь (у меня это C:\Users\larocca\vite-project).

Наконец, нас просят изменить наш каталог на наш проект, а затем запустить npm install и npm run dev.

КОПИРОВАТЬ

Done. Now run:
     cd vite-project
     npm install
     npm run dev

После выполнения этих инструкций ваша локальная среда разработки React настроена!

Наведите указатель мыши на локальный адрес в вашем терминале bash, используйте «ctrl + щелчок», чтобы просмотреть проект.

КОПИРОВАТЬ

VITE v4.1.4  ready in 495 ms
     ➜  Local:   https://127.0.0.1:5173/
     ➜  Network: use --host to expose
     ➜  press h to show help

Чтобы отредактировать проект и приступить к практике написания кода React, в редакторе кода VS:

Файл
Открыть папку
Используя путь к созданному проекту строительных лесов, выберите папку вашего проекта (у меня это C:\Users\larocca\vite-project)

Редактирование проекта

Открыв папку проекта, вы должны увидеть следующие файлы:

Мы начнем с замены текста «Vite + React» на «Hello World!»

Перейдите к следующему файлу для обновления:

скр
App.jsx

Теперь найдите элемент <h1> (вы можете использовать поиск ctrl + f) и замените текст на «Hello World!».

Как только вы заменили текст, сохраните проект (ctrl + s). Теперь вы увидите изменения в браузере! Когда вы вносите изменения в свой код, каждый раз, когда вы сохраняете свою работу, она будет автоматически обновляться в браузере (аналогично Live Server).

Ярлыки терминала Vite

Ниже приведен список сочетаний клавиш Vite, которые вы можете использовать в терминале bash. После выхода из приложения используйте npm run dev, чтобы запустить его снова.

КОПИРОВАТЬ

Shortcuts
  press r to restart the server
  press u to show server url   
  press o to open in browser   
  press c to clear console     
  press q to quit

Удаление шаблона по умолчанию

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

App.css и index.css

В чем разница между App.css и index.css?

В React App.css — это файл, в котором вы можете писать стили для определенного компонента приложения, например, для верхнего или нижнего колонтитула.

С другой стороны, index.css используется для стилей, влияющих на все приложение, таких как цвет фона или размер шрифта.

Итак, если вы хотите стилизовать определенный компонент, вы можете использовать App.css; если вы хотите стилизовать все приложение, вы можете использовать index.css.

Не стесняйтесь комментировать или удалять контент в файлах App.css и index.css.

Затем в index.css мы добавим следующий код форматирования:

КОПИРОВАТЬ

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

App.jsx и main.jsx

В файле App.jsx мы удалим часть кода функции App.

Файл App.jsx теперь должен выглядеть так:

КОПИРОВАТЬ

import './App.css'
function App() {
  return (
    <div className="App">
    </div>
  )
}
export default App

Реагировать компоненты

Мы собираемся создать несколько простых компонентов React. Компоненты React, которые мы создадим, — это функции JavaScript, которые возвращают блоки HTML-кода.

Затем мы импортируем созданные компоненты React в файл main.jsx для рендеринга.

Настройка нашей среды React

После удаления шаблона по умолчанию мы создадим папку компонентов внутри папки src.

Создание простых компонентов React

Теперь мы создадим два простых компонента React, панель навигации и основной раздел.

Сначала синтаксис может показаться немного странным (мне так показалось), но концепция кода довольно проста. Мы разбиваем страницу сайта на части и пишем HTML-код на JavaScript.

Навбар

Мы создаем новый файл jsx под названием «Navbar» в папке компонентов. Затем мы пишем функцию с именем Navbar, которая перенастраивает блок HTML-кода. Наконец, мы включаем код JavaScript для экспорта функции.

КОПИРОВАТЬ

export default function Navbar() {
    return (
            <nav>
                <div>My React website</div>
                <ul>
                    <li>Page 1</li>
                    <li>Page 2</li>
                    <li>Page 3</li>
                </ul>
            </nav>
    )
}

Основной

По аналогии с функцией Navbar, которую мы написали, мы будем:

Мы создаем новый файл jsx под названием «Main» в папке компонентов.
Затем мы пишем функцию с именем Main, которая перенастраивает блок HTML-кода.
Включите код JavaScript для экспорта функции

КОПИРОВАТЬ

export default function Main() {
    return (
            <main>
                <h1>Let's practice some React!</h1>
                <h3>Paragraph 1</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores pariatur officiis magnam, optio reprehenderit labore culpa repudiandae voluptates, quos et assumenda placeat maxime non nam.</p>
                <h3>Paragraph 2</h3>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores, sed accusantium nobis vero ut laborum.</p>
            </main>
    )
}

App.jsx

В файле App.jsx мы сначала импортируем созданные нами компоненты React, добавив в файл следующий код:

КОПИРОВАТЬ

import './App.css'
import Navbar from './components/Navbar'
import Main from './components/Main'

Функция приложения

Теперь мы напишем функцию приложения, которая будет возвращать компоненты Navbar и Main. Обратите внимание на синтаксис. Компоненты записываются в функциях как HTML-элементы с произвольными именами и заглавными буквами.

КОПИРОВАТЬ

function App() {
  return (
    <div className="App">
      <Navbar />
      <Main />
    </div>
  )
}
export default App

Поскольку App.jsx уже содержит «экспорт приложения по умолчанию» в нижней части файла, мы можем исключить его из начала функции.

main.jsx

Шаблонный код в основном файле jsx уже включает в себя все необходимое. Он включает в себя все необходимые операции импорта, а затем отображает нашу созданную функцию приложения на веб-странице.

КОПИРОВАТЬ

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>,
)

Визуализированная веб-страница должна выглядеть следующим образом:

Основные стили CSS

Теперь давайте добавим некоторые базовые стили CSS.

Мы уже добавили следующий код в index.css:

КОПИРОВАТЬ

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Теперь давайте добавим следующий базовый стиль CSS в файл CSS приложения:

КОПИРОВАТЬ

nav, nav ul {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
nav li {
  list-style-type:none;
  margin: 0 15px;
}
nav li:hover {
  color: lightgreen;
  cursor: pointer;
}
main {
  border: 1px solid red;
  padding: 0 15px;
}

После применения стилей CSS визуализированная веб-страница должна выглядеть следующим образом:

Примечание. Красный цвет границы добавлен для визуальных элементов HTML. Вы можете отметить их или удалить.

Поздравляем!

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

Разверните проект с помощью Netlify (необязательно)

На веб-сайте Vite я использовал инструкции руководство по развертыванию статического веб-сайта для развертывания моего практического веб-сайта React с использованием Netlify.

Всего за несколько шагов вы можете развернуть свой веб-сайт практики:

Нетлайф

Установите интерфейс командной строки Netlify.
Создайте новый сайт с помощью ntl init.
Разверните с помощью ntl deploy.

Примечание. Для упрощения мы выберем создание и развертывание сайта вручную.

КОПИРОВАТЬ

# Install the Netlify CLI
$ npm install -g netlify-cli
# Create a new site in Netlify
$ ntl init

Ваша командная строка должна выглядеть примерно так:

Теперь нам говорят сначала запустить нашу команду сборки:

КОПИРОВАТЬ

$ npm run build

Теперь мы можем просмотреть наш сайт, запустив ntl deploy.

Примечание. Выберите dist для каталога публикации.

КОПИРОВАТЬ

# Deploy to a unique preview URL
$ ntl deploy

Как только ваше развертывание будет запущено, просмотрите его, нажав «Ctrl + щелчок», наведя указатель мыши на черновик URL-адреса веб-сайта.

Netlify CLI предоставит вам URL-адрес предварительного просмотра для проверки. Когда вы будете готовы приступить к работе, используйте флаг prod.

Примечание. Выберите dist для каталога публикации.

КОПИРОВАТЬ

# Deploy the site into production
$ ntl deploy --prod

Теперь ваш сайт развернут! Ваш терминал должен выглядеть примерно так, как показано на скриншоте ниже. Вы можете перейти на свой веб-сайт, используя «ctrl + щелчок», наведя указатель мыши на URL-адрес веб-сайта.

Заключение

Создание локальной среды React с помощью Vite — это практичный способ получить практический опыт работы с React и улучшить свои навыки. Следуя пошаговым инструкциям в этой учебной статье, вы сможете легко создать проект Vite, удалить шаблон по умолчанию, создать простые компоненты React и добавить базовые стили CSS.

Эта учебная статья также предлагает дополнительные инструкции по развертыванию вашего проекта с помощью Netlify, что позволит вам поделиться своим прогрессом в изучении React с другими!

смотрите также:

Новые материалы

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

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

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js

Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!

Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning