Галоўная / Артыкулы / Канал адаптавання React + Vite (2026): ваша першая працюючая аплікацыя, пояснена

ReactViteNode.jsnpmJavaScriptFrontend Development

Канал адаптавання React + Vite (2026): ваша першая працюючая аплікацыя, пояснена

Разберамся з установкай Node.js, npm, VS Code і Vite для стварэння шаблона дапрыгу React, адночасная выявляючы, каму на самай справе прызначаны кожны з эых інструментаў.

1601 слоў

«Правы момент для стварэння вашага першага компонента React — не ведац пасля перегледу вучбовых матэрыялаў, а тады, калі вы створылі належную среду і рэальна разумеете, чаму кожны элемент тут прысутны».

У паканальнай стацыі мы розглядзелі, што такое React, чаму ён быў створаны у Facebook і як ён змяніў падход разработчыкаў да стварэння веб-зялётаў.

Тепер мы пераходим ад тэорыі да практычных завад.

Перш чым пісаць будзь-які компонент, вам патрэбна рабочая среда, якая можа запускать React, мгновенна перзагружаць вашы змяны і падтрымліваць вас у меру росту вашага зялёта.

До канца гэтай стацыі у вас будзе працуючы зялёт на вашай сабе машыне, і вы разумеце, што на самай працэ выплывае кожны інструмент у налаштаваннях.

Чаму мы не можем проста напісаць React у файле HTML?

Пачатківцы практычна завжды спачатку ставяць гэты вопыт.

React — гэта «простае JavaScript», таму чы не павінна быць дастаткова звычайная HTML-файл?

Тэхнічна, гэта правда, але толькі ў дужа обмежаным сэнсе.

Але рэальныя React-праекты выкорыстоўваюць такія элементы, як:

  • JSX
  • ES Modules
  • Hot Module Replacement
  • Package Management
  • Build Optimization

Ні аднаго з гэтых элементаў браузеры не розумеюць натывна.

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

Гэта супанае з гатованнем ўжынку.

Сырыя інгредыенты не едзяць безпосередна з холадніка — спачатку іх падготавляюць.

Стварэнне React-проекта таксама практыкуецца за той жа прынцып.

Інструменты, якія мы установім

Існуе невялікі набор інструментаў, на якія павольваецца практычна кожны развіяўцы React, і мы установім усе яны ў гэтым кярыранты.

Кожны ўстаткуе рашае адзін конкрэтны прыблыдак у процесе роботы.

Калі все будзе на сваіх месцах, вы ледва зазначыце, што яны працуюць у фоне.

Розумэнне Node.js

Паўзучая хыбна думка — што сам React працуе на базе Node.js.

Этага няма.

React выкананы ў браузеры, а не ў Node.

Node.js падтрымлівае вас пад час стварэння прыкладнення, а не калі прыкладненне працуе для канечных корыстнікаў.

Ён дазваляе вам:

  • Інсталаваць бібліятэкі
  • Запускаць серверы разработкі
  • Ствараць оптымаізаваныя пакеты для роботы
  • Караць залежнасці проекту

Без Node.js інсталляцыя та працэўка React былі б набагато складнейшыя.

Што такое npm?

Пад час інсталляцыі Node.js автаматычна ўключаецца npm, які ёсць скраценнем для Node Package Manager.

Абразарт канцэпцы стварэння новаг сайту з нуля, калі патрэбны адразу калькі бібліятэкаў, напрыклад:

  • React
  • React Router
  • Axios
  • Tailwind CSS
  • Redux Toolkit

У замест на ручныя завантажэння кожной з іх, npm адбывае інсталляцыю за дапамою адной команды.

Напрыклад:

npm install axios

Дастатнька толькі запусціць гэта — npm завантажвае пакет, прыўязывае яго да вашаг проекту і стежыць за тым, каторую версію вы вжываеце.

Чаму сучасны React вжывае Vite

У старэйшых нарадчыках часта показваюць такую команду для стварэння шаблона проекту:

npx create-react-app my-app

Працоўнае время гэта была стандартная метода.

Але сённяя спільнатэка React большасцю перайшла на Vite.

Што стало прычыной такога перашыку?

Галоўная прычына — жаданне швэйцарскай розвіткавай супрацоўкі ў кожны дзень.

Vite прыносіць:

  • Мгновэнны запуск проекта
  • Дужа шырока падтрымка замены модуляў у рэальны час (HMR)
  • Меньшыя размеры выконваных версій для працы
  • Простэйшая настройка ў цэлым
  • Лепшая загальная працёздатнась

Для тых, хто зараз вучыцца React, пачатак з Vite — граматычны выбар.

Крок 1: Установіце Node.js

Заўяжыце апошню версію Node.js з дугга-тэрміновай падтрымкай (LTS) з яе афіцыйнага сайту.

Пасля установкі ачыніце тэрмінал, каб пераканацца, што установка працавала.

node -v

Рэзультат должен выглядаць так:

v24.x.x

Потым пераканайцеся таксама з npm:

npm -v

Якщо обе команды пакажуць номеры версій, ваш комп’ютер правильна настроўаны.

Крок 2: Установіце Visual Studio Code

Тэхнічна адзінства, вы можете пісаць код на React у будзь-яму редактары, але VS Code стаў стандартным выборам завдзяк сваймым швальнасці, екосыстэме расширэнняў і моцным інструментам для JavaScript.

Расширэнняя VS Code, якія кожны разработчык React должен установіць

Установка невялікага комплекту дадатковых прыбамбэтак з самага пачатку справляе рэальны эфект на ўдобнасць працы ў павсякдзеннай дзеяльнасці. Цікаўа адзінства да вашай налады:

  • ESLint – для выяўлення проблем у вашам кодзе
  • Prettier – для аднаковага форматавання
  • Error Lens – для показу прычын бягучых аднойчынаў
  • Auto Rename Tag – для сінхронізацыі падходжучых тэгоў
  • Path Intellisense – для автодаполнення шляхоў да файлоў
  • GitLens – для болей дакладных вясёбаў пра Git унутрь редактара
  • ES7+ React Snippets – для шыранага кастомнага коду на React

Разам гэтыя расширэнняя пакрываюць форматаванне, раннее выяўлення бягучых аднойчынаў, автодаполнення і падвышэнне загальной продуктыўнасці.

Шаг 3: Створыце свой першы проект React

Ачынце вікно тэрміналу і запусціце:

npm create vite@latest

Вас папрасяць адпавесці на калькі запытанняў па наладзе:

Project Name:
react-beginners

Framework:
React

Variant:
JavaScript

Калі завершыцца стварэнне каркаса, перайдзіце ў папку новага проекту:

cd react-beginners

Потым установіце залежнасці проекту:

npm install

І нарэшце, запусціце сервер разработкі:

npm run dev

Раслідчы тэрміналу будзе выглядаць працоўна так:

Local: http://localhost:5173

Ачынце гэты адрес у своем браузеры. Першая програма на React тепер запускаецца.

Ваш першы проект на React вучоўся і працюе.

Розумэнне структуры проекту

Няшто што ўжо створыўся проект React можа здавацца стрэльным на першы погляд, але на практыцы існуе толькі калькі файлаў, з якімі вы будете рэгулярна працаваць.

react-beginners/
│
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── main.jsx
│
├── package.json
├── vite.config.js
└── node_modules/

src

Практычна весь код, які вы пісаеце ўжо кожны дзень, знаходзіцца ўнутрь гэтай папкі.

App.jsx

Уважайце гэты элемент як корневы компонент вашага прыемку.

Кожная функцыя, якую вы ствараеце далей, будзе запускацца звярнуўшыся да гэтага компонента.

main.jsx

Гэты файл паў’язвае ваш прыемак на React з рэальным веб-сторанкам.

У ём указваецца, дзе самэўчына React должна атрымліць ваш прыемак для відобразэння.

package.json

Хутчэй тут вы знайдзеце метаданы вашага проекту, а таксама яго залежнасці і скрыпты, якія викорыстоўваюцца для ўработкі чы скачывання проекту.

node_modules

У гэтым каталозе знаходзяцца всі пакеты, на якіх базуецца ваш проект.

Не трэба яго змянюваць — нема прычыны ручна правіць калі-небудзь усё, што там знаходзится.

Зрабіце першую змяну

Ачыніце App.jsx і заменіце стандартны контэнт на:

function App() {
  return (
    <div>
      <h1>Hello React 👋</h1>
      <p>My first React application is running!</p>
    </div>
  );
}

export default App;

Зявіце файл і старайцеся за роботай браузера.

Чы гэта з’явілася? Старонка сама апдэйтавалася, не было патрэбы ручнаа апдзейнавання.

Такое падчыненне называецца Hot Module Replacement, або HMR.

Такія маленькія зручнасці разам заўсёды дапамагаюць заўсходзіць значны час працы над проектам.

Разрабоўцы Angular: гэта як разлічваецца

Якщо вы працавалі з Angular, вам будзе знайомы загальны працоўны процес, толькі без столькіх формальнасцей.

React спяржаецца з гнучкасцю, дазволяючы ствараць рашэння на свой спосаб, тады калі Angular вже з самага пачатку мае большую структуру.

Ніякі з гэтых падходаў не є об’екtyвальна лепшым — яны проста рашаюць задачу адначасова разнымі спосабамі.

Пашытковыя памылкі

Калі вы прывыкаеце да React, верагодна станете сустрэчацца з калькамя часта павтараючыхся проблем.

  • Забываць запускаць npm install
  • Выкананне каманд з неправильнага дырэктарыя, за межамі папкі проекта
  • Ведзенне змян у папцы node_modules
  • Работа з застарэлай версіяй Node.js
  • Закрыцьце вікна тэрміналу, калі сервер развіцця ўсё яшчэ працуе

    • Калі вы пазнаёте гэтыя моделі, іх легка ўтрымаць.

    Што вы навучыліся

    Працюючы над гэтым артыкулам, вы розглянулі:

    • Прычыны, чаму для React патрэбна спецыяльная среда развіцця
    • Што на самай працы ведуць Node.js і npm
    • Чаму Vite стаў стандартным інструментам для стварэння проектаў на React
    • Этапы стварэння шаблона і запуску вашага першага дапрацоўванага проекта на React
    • Дзеянне кожнага з основных файлаў проекта
    • Як тэхніка Hot Module Replacement зменяе спосаб роботы з кодам

    У гэты момент у вас ёсць всё неабяжнае, каб пачаць стварэнне справжніх прыемлень на React.

    Завдання для практыкі

    Перш чым перейść да наступнай часткі, спробуйце адрабатаваць гэтыя завданні:

    • Створыце абсалютна новы проект на React за дапамою Vite.
    • Зменіце тэкст загалоўка ў файле App.jsx.
    • Дадзіце короткую адмову, у якой будзе ваша імя.
    • Зменіце колер тэкста за дапамою CSS.
    • Зупініцеся і самі ручная перызачыце сервер развіцця.

    Практыка гэтых крокаў — гэта шырокі шлях да таго, каб стаць упэўненым у викорыстоўванні ціх інструментаў.

    Што далей?

    Колі ваша среда готовая, наступны крок — пазнанне адной з основных ідэй, якія лежачы за React.

    У трэцьйай частцы мы будзем розглядаць JSX — синтаксіс, які дазволяе безпосередна адчыніць маркап, сэродзеўны HTML, у ваш код на JavaScript.

    Вы павінны з’ясаваць:

    • Што на самай працэ ёсць JSX
  • Прычыны вжывання JSX у React
  • Правіла, якія дотрымваецца JSX
  • Як працююць выразы ўнутры JSX
  • Разлікі межа HTML і JSX
  • Тыповыя памылкі, у якіх падаюць новачкі
  • Практыкі для таго, каб ваш JSX быў чыстым і зрозумелым

    • Калі вы дачытайце тую статэю, вы будете готавы з адной упэўненасцю пісаць своі сабственныя рэальныя компоненты React.

    Спадні матэрыялы

    Усе артыкулыДаслаць брыф