Как да инсталирате React.js на Windows VPS

React.js е мощна библиотека на JavaScript, разработена от Facebook, за изграждане на потребителски интерфейси, особено за приложения от една страница. Тя позволява на разработчиците да създават големи уеб приложения, които могат да променят данни, без да презареждат страницата. Ако искате да започнете да работите с React.js на вашата машина с Windows, това ръководство ще ви помогне да се настроите за нула време.

Предварителни условия

Преди да инсталирате React.js, уверете се, че на вашата система Windows са инсталирани следните елементи:

• Node.js: React разчита на Node.js, който осигурява средата за изпълнение на JavaScript на сървъра и включва npm (Node Package Manager) за управление на зависимостите.
• Текстов редактор: Необходим ви е текстов редактор, например Visual Studio Code (VS Code), Sublime Text или друг предпочитан от вас IDE.

Да започнем!

Стъпка 1: Инсталиране на Node.js

1.1 Изтеглете Node.js

За да инсталирате Node.js, следвайте следните стъпки:

1. Посетете официалния уебсайт на Node.js: https://nodejs.org.
2. Изтеглете най-новата LTS (Long Term Support) версия на Node.js за Windows.
3. След като изтеглянето приключи, стартирайте инсталатора.

1.2 Инсталирайте Node.js

Следвайте инструкциите в инсталатора на Node.js:

1. Изберете Next (Напред) на приветстващия екран.
2. Приемете лицензионното споразумение и щракнете върху Next.
3. Изберете папката за местоназначение и щракнете върху Next.
4. Уверете се, че “Node.js runtime”, “npm package manager” и други инструменти са маркирани, и щракнете върху Next.
5. Завършете инсталацията.

1.3 Проверка на инсталацията на Node.js и npm

След като Node.js е инсталиран, можете да го проверите, като отворите терминал (Command Prompt или PowerShell) и изпълните следните команди:

Тази команда ще изведе инсталираната версия на Node.js.

Тази команда ще изведе версията на npm (Node Package Manager), инсталирана заедно с Node.js.

Ако и двете команди върнат номера на версията, Node.js и npm са успешно инсталирани.

Стъпка 2: Инсталиране на инструмента Create React App Tool

Приложенията React се създават с помощта на инструмента Create React App, който е официално поддържан начин за създаване на приложения React с една страница със стандартна структура и конфигурация за изграждане.

За да го инсталирате, следвайте следните стъпки:

2.1 Отворете командна прозореца или PowerShell

Отворете нов терминален прозорец (Command Prompt или PowerShell).

2.2 Инсталирайте глобално приложението Create React

За да инсталирате Create React App глобално в системата си, изпълнете следната команда npm:

Това инсталира пакета create-react-app глобално, така че да можете да създавате нови проекти React от всяка точка на вашата файлова система.

Стъпка 3: Създаване на ново приложение React

След като пакетът Create React App е инсталиран, можете да създадете нов проект React.js, като следвате следните стъпки:

3.1 Навигирайте в директорията на проекта си

Използвайте командата cd, за да преминете към папката, в която искате да създадете новото си приложение React. Например:

3.2 Създаване на нов проект React

В терминала изпълнете следната команда, за да създадете нов проект React:

Заменете my-react-app с името на вашия проект. Тази команда ще създаде нова директория с името на вашия проект и ще инсталира всички необходими файлове и зависимости за приложение React.

3.3 Навигирайте до вашия проект React

След като проектът е създаден, отидете в директорията на вашия проект:

3.4 Стартирайте сървъра за разработка

След като проектът React е създаден, можете да стартирате сървъра за разработка. Това ще отвори приложението ви в браузъра и ще активира функцията “горещо презареждане”, така че приложението ви да се обновява автоматично, когато правите промени в кода си.

За да стартирате сървъра за разработка, изпълнете:

След няколко мига в терминала трябва да се появи изходна информация, показваща, че сървърът за разработка е стартиран, а браузърът ви автоматично ще се отвори на адрес http://localhost:3000, показвайки страницата на приложението React по подразбиране.

Ако не се отвори автоматично, можете ръчно да отворите браузъра си и да отидете на http://localhost:3000.

Стъпка 4: Отворете проекта си в текстов редактор

На този етап вашият проект React е стартиран и можете да започнете да кодирате!

4.1 Инсталирайте текстов редактор (ако вече не е инсталиран)

Ще ви е необходим текстов редактор, за да напишете кода си. Някои популярни варианти включват:

• Visual Studio Code (VS Code): Олекотен, мощен и широко използван за разработка на React. Той има отлична поддръжка на JavaScript и React.js.
• Sublime Text (Sublime Text): Sublime: Бърз и лесен, с поддръжка на много езици за програмиране.
• Atom: Настройващ се и лесен за хакване текстов редактор.

4.2 Отворете проекта си в редактора

След като сте инсталирали текстов редактор, отворете папката на проекта React (my-react-app) в редактора.

Във Visual Studio Code например можете да отворите папката, като изберете File (Файл) > Open Folder (Отворена папка) и преминете към директорията на проекта React.

Сега можете да започнете да променяте файловете на папката src, за да започнете да изграждате своето приложение React.

Стъпка 5: Изграждане на приложението React за производство

Когато сте готови да разгърнете приложението си React, ще трябва да създадете производствена сглобка. По този начин се свежда до минимум размерът на файла и се оптимизира приложението за производителност.

За да създадете производствена компилация, изпълнете следната команда:

Това ще създаде оптимизирана версия на вашето приложение в папката за

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

Стъпка 6: Отстраняване на неизправности и често срещани проблеми

6.1 Командата не е разпозната

Ако се сблъскате с грешка “command not recognized” (командата не е разпозната) за npm, това може да се дължи на факта, че Node.js не е бил добавен към PATH на системата по време на инсталацията. За да поправите това, следвайте следните стъпки:

1. Отворете System Properties (Свойства на системата), като натиснете клавиша Windows R, въведете sysdm.cpl и натиснете Enter.
2. Щракнете върху Environment Variables (Променливи на средата) в раздела Advanced (Разширени).
3. Намерете променливата Path в System Variables (Системни променливи) и щракнете върху Edit (Редактиране).
4. Добавете пътя до инсталацията на Node.js (обикновено C:\Program Files\nodejs\) и щракнете върху OK.

6.2 Проблеми със създаването на приложение React

Ако имате проблеми със create-react-app, опитайте да изчистите кеша на npm и да го инсталирате отново:

Заключение

Поздравления! Успешно сте инсталирали React.js на вашата машина с Windows. Вече сте готови да започнете да изграждате своите приложения на React с помощта на JavaScript и богатата екосистема от библиотеки и инструменти, които React предоставя. Независимо дали изграждате уеб приложения или мобилни приложения, React предлага гъвкавост и възможности за създаване на динамични потребителски интерфейси.