Cum să instalați React.js pe VPS Windows

React.js este o bibliotecă JavaScript puternică dezvoltată de Facebook pentru construirea de interfețe utilizator, în special pentru aplicații cu o singură pagină. Aceasta permite dezvoltatorilor să creeze aplicații web de mari dimensiuni care pot modifica datele, fără a reîncărca pagina. Dacă doriți să începeți să lucrați cu React.js pe computerul Windows, acest ghid vă va ajuta să vă configurați în cel mai scurt timp.

Condiții prealabile

Înainte de a instala React.js, asigurați-vă că aveți următoarele instalate pe sistemul dvs. Windows:

• Node.js: React se bazează pe Node.js, care oferă mediul de execuție pentru a executa JavaScript pe server și include npm (Node Package Manager) pentru a gestiona dependențele.
• Editor de text: Veți avea nevoie de un editor de text precum Visual Studio Code (VS Code), Sublime Text sau orice IDE pe care îl preferați.

Să începem!

Pasul 1: Instalați Node.js

1.1 Descărcați Node.js

Pentru a instala Node.js, urmați acești pași:

1. Vizitați site-ul web oficial Node.js: https://nodejs.org.
2. Descărcați cea mai recentă versiune LTS (Long Term Support) a Node.js pentru Windows.
3. După finalizarea descărcării, rulați programul de instalare.

1.2 Instalați Node.js

Urmați instrucțiunile din programul de instalare Node.js:

1. Selectați Next pe ecranul de întâmpinare.
2. Acceptați acordul de licență și faceți clic pe Next.
3. Selectați folderul de destinație și faceți clic pe Next.
4. Asigurați-vă că “Node.js runtime”, “npm package manager” și alte instrumente sunt bifate și faceți clic pe Next.
5. Finalizați instalarea.

1.3 Verificarea instalării Node.js și npm

Odată ce Node.js este instalat, îl puteți verifica prin deschiderea unui terminal (Command Prompt sau PowerShell) și rularea următoarelor comenzi:

Această comandă va afișa versiunea instalată a Node.js.

Această comandă va afișa versiunea de npm (Node Package Manager) instalată împreună cu Node.js.

Dacă ambele comenzi returnează numere de versiune, Node.js și npm sunt instalate cu succes.

Pasul 2: Instalarea instrumentului Create React App

Aplicațiile React sunt construite utilizând instrumentul Create React App, care este un mod acceptat oficial de a crea aplicații React cu o singură pagină, cu o structură standard și o configurație de construire.

Pentru a o instala, urmați acești pași:

2.1 Deschideți un Prompt de comandă sau PowerShell

Deschideți o nouă fereastră de terminal (Command Prompt sau PowerShell).

2.2 Instalați Create React App la nivel global

Pentru a instala Create React App la nivel global pe sistemul dvs., executați următoarea comandă npm:

Acest lucru instalează pachetul create-react-app la nivel global, astfel încât să puteți crea noi proiecte React de oriunde din sistemul dvs. de fișiere.

Pasul 3: Crearea unei noi aplicații React

Odată ce Create React App este instalat, puteți crea un nou proiect React.js urmând acești pași:

3.1 Navigați la directorul proiectului dvs

Utilizați comanda cd pentru a naviga către folderul în care doriți să creați noua aplicație React. De exemplu:

3.2 Creați un nou proiect React

În terminal, executați următoarea comandă pentru a crea un nou proiect React:

Înlocuiți my-react-app cu numele proiectului dvs. Această comandă va crea un nou director cu numele proiectului dvs. și va instala toate fișierele și dependențele necesare pentru o aplicație React.

3.3 Navigați către proiectul dvs. React

Odată ce proiectul a fost creat, navigați la directorul proiectului dvs:

3.4 Porniți serverul de dezvoltare

Acum că proiectul React este configurat, puteți porni serverul de dezvoltare. Acesta va deschide aplicația dvs. în browser și va activa reîncărcarea la cald, astfel încât aplicația dvs. se actualizează automat ori de câte ori efectuați modificări ale codului.

Pentru a porni serverul de dezvoltare, executați:

După câteva momente, ar trebui să vedeți un rezultat în terminal care indică faptul că serverul de dezvoltare rulează, iar browserul dvs. se va deschide automat la http://localhost:3000, afișând pagina implicită a aplicației React.

Dacă nu se deschide automat, puteți deschide manual browserul și merge la http://localhost:3000.

Pasul 4: Deschideți proiectul într-un editor de text

În acest moment, proiectul dvs. React rulează și puteți începe să codificați!

4.1 Instalați un editor de text (dacă nu este deja instalat)

Veți avea nevoie de un editor de text pentru a vă scrie codul. Unele alegeri populare includ:

• Visual Studio Code (VS Code): Ușor, puternic și utilizat pe scară largă pentru dezvoltarea React. Are un suport excelent pentru JavaScript și React.js.
• Sublime Text: Rapid și simplu, cu suport pentru multe limbaje de programare.
• Atom: Un editor de text personalizabil și hackabil.

4.2 Deschideți proiectul în editor

După ce ați instalat un editor de text, deschideți folderul proiectului React (my-react-app) în editor.

În Visual Studio Code, de exemplu, puteți deschide folderul selectând File > Open Folder și navigând la directorul proiectului React.

Acum puteți începe să modificați fișierele din folderul src pentru a începe să vă construiți aplicația React.

Pasul 5: Construiți aplicația React pentru producție

Când sunteți gata să vă implementați aplicația React, va trebui să creați o versiune de producție. Acest lucru minimizează dimensiunea fișierului și optimizează aplicația pentru performanță.

Pentru a crea un build de producție, executați următoarea comandă:

Aceasta va crea o versiune optimizată a aplicației dvs. în folderul

, pe care o puteți implementa pe un server web.

Pasul 6: Depanarea și problemele comune

6.1 Comandă nerecunoscută

Dacă întâmpinați o eroare “command not recognized” pentru npm, poate fi din cauză că Node.js nu a fost adăugat la PATH-ul sistemului în timpul instalării. Pentru a remedia acest lucru, urmați acești pași:

1. Deschideți System Properties apăsând tasta Windows R, tastând sysdm.cpl și apăsând Enter.
2. Faceți clic pe Variabile de mediu sub fila Avansat.
3. Găsiți variabila Path sub System Variables și faceți clic pe Edit.
4. Adăugați calea către instalarea Node.js (de obicei C:\Program Files\nodejs\) și faceți clic pe OK.

6.2 Probleme cu crearea aplicației React

Dacă întâmpinați probleme cu create-react-app, încercați să curățați cache-ul npm și să îl reinstalați:

Concluzii

Felicitări! Ați instalat cu succes React.js pe computerul Windows. Acum sunteți gata să începeți să vă construiți aplicațiile React utilizând JavaScript și ecosistemul bogat de biblioteci și instrumente pe care le oferă React. Indiferent dacă construiți aplicații web sau aplicații mobile, React oferă flexibilitatea și puterea de a crea interfețe utilizator dinamice.