Tutorial despre crearea unei aplicații web folosind React.js

React.js este o bibliotecă populară de dezvoltare front-end, utilizată pentru a construi interfețe utilizator (UI) interactive. Dezvoltată de Facebook, React.js a fost utilizată de multe companii importante, inclusiv Instagram, Airbnb și WhatsApp. Dacă doriți să construiți aplicații web eficiente, rapide și responsive, React.js ar putea fi alegerea potrivită pentru dvs.

Introducere

Înainte de a începe, asigură-te că ai instalate Node.js și npm (Node Package Manager) pe computer. Node.js și npm sunt esențiale deoarece oferă mediul și instrumentele necesare pentru dezvoltarea aplicațiilor web folosind React.js.

Pasul 1: Inițializarea proiectului React

Pentru a crea o nouă aplicație React.js, putem folosi Create React App, un instrument de creare a aplicațiilor care minimizează configurația inițială. Rulați următoarea comandă în terminal sau în promptul de comandă:

„`bash
npx create-react-app aplicația mea
cd aplicația mea
npm începe
„`

Această comandă va crea un director nou numit `my-app`, va descărca și instala toate dependențele necesare și va porni serverul de dezvoltare. Acum puteți deschide un browser și accesa `http://localhost:3000` pentru a vedea aplicația React.js implicită.

Pasul 2: Structura folderelor

Să aruncăm o privire la structura de foldere creată de aplicația Create React App:

„`
aplicația-mea/
├── node_modules/
public/
│ └── index.html
└── sursă/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
„`

– `node_modules/`: Conține toate dependențele proiectului tău.
– `public/`: Conține fișiere statice, inclusiv `index.html` care este punctul de intrare al aplicației.
– `src/`: Unde îți vei petrece cea mai mare parte a timpului. Conține componente React, fișiere CSS și alte resurse.

Pasul 3: Ștergerea fișierelor inutile

Pentru a începe cu o foaie de stil curată, haideți să ștergem câteva fișiere inutile. Ștergeți `logo.svg` și `App.test.js` din folderul `src/`. Apoi, deschideți `App.css` și `index.css`, ștergând tot codul CSS din interiorul lor pentru a începe cu o foaie de stil curată.

Pasul 4: Crearea primei componente

React.js este bazat pe componente. Componentele sunt elementele constitutive ale aplicației web. Să modificăm `App.js` pentru a crea prima noastră componentă.

Deschideți fișierul `src/App.js` și înlocuiți-l cu următorul cod:

„`jsx
import React din 'react';
import './App.css';

function App() {
întoarcere (

);
}

exportați aplicația implicită;
„`

Inițializează codul React din `App.js` folosind JSX (JavaScript XML), care ne permite să scriem o sintaxă asemănătoare HTML-ului în JavaScript. Salvează modificările și vizualizează rezultatele în browser.

Pasul 5: Adăugarea de noi componente

Acum haideți să adăugăm niște componente noi. Creați un nou folder numit `components` în folderul `src`. Apoi creați un nou fișier `HelloWorld.js` în folderul `components`.

„`jsx
import React din 'react';

funcția SalutLume() {
întoarcere (

);
}

export implicit HelloWorld;
„`

Deschideți `App.js` și importați componenta `HelloWorld` pe care tocmai am creat-o:

„`jsx
import React din 'react';
import './App.css';
importă HelloWorld din './components/HelloWorld';

function App() {
întoarcere (

);
}

exportați aplicația implicită;
„`

Acum, `App.js` afișează componenta `HelloWorld` pe pagina principală.

Pasul 6: Adăugarea funcției „State Management” cu ajutorul funcției useState

React are hook-uri foarte puternice pentru gestionarea stării. Să adăugăm niște stări aplicației noastre. De exemplu, să adăugăm un contor care crește de fiecare dată când se apasă un buton.

Deschide `HelloWorld.js` și adaugă `state` și hook-ul `useState`:

„`jsx
import React, { useState } din 'react';

funcția SalutLume() {
const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(număr + 1);
}

întoarcere (

);
}

export implicit HelloWorld;
„`

Starea `count` este inițializată cu valoarea 0 și, de fiecare dată când se face clic pe buton, funcția `incrementCount` va crește această valoare.

Pasul 7: Adăugarea stilului

Pentru a adăuga stiluri, putem folosi CSS în fișierul `App.css` sau putem folosi o bibliotecă CSS-in-JS, cum ar fi styled-components. Să rămânem deocamdată la CSS-ul standard.

Deschide `App.css` și adaugă câteva stiluri:

„`css
.Aplicație {
text-align: centru;
}

.Antet aplicație {
culoare-de-fundal: 282c34;
înălțime minimă: 100vh;
afișare: flex;
direcție flexibilă: coloană;
align-items: centru;
justificare-conținut: centru;
dimensiunea fontului: calc(10px + 2vmin);
culoare albă;
}

butonul {
umplutură: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
„`

Pasul 8: Adăugarea rutării cu React Router

Pentru a adăuga navigare între diferite pagini din aplicația noastră, putem folosi React Router. Instalați React Router rulând următoarea comandă:

„`bash
npm instalează react-router-dom
„`

Apoi, creați două componente noi: `Home.js` și `About.js` în folderul `components`.

`Home.js`:
„`jsx
import React din 'react';

function Home() {
întoarcere (

);
}

export implicit Home;
„`

`About.js`:
„`jsx
import React din 'react';

function About() {
întoarcere (

);
}

export implicit Despre;
„`

Apoi, deschideți `App.js` și configurați rutarea:

„`jsx
import React din 'react';
import { BrowserRouter ca Router, Rută, Legătură, Comutator } din 'react-router-dom';
import './App.css';
importă HelloWorld din './components/HelloWorld';
import Home din './components/Home';
import Despre din './components/Despre';

function App() {
întoarcere (

);
}

exportați aplicația implicită;
„`

Prin aceasta, am adăugat o navigare de bază între diferite pagini din aplicația noastră.

Închidere

Acesta este un tutorial de bază pentru crearea unei aplicații web folosind React.js. Am acoperit configurarea proiectului, crearea componentelor, gestionarea stării, stilizarea și rutarea. React.js are un ecosistem bogat, cu numeroase biblioteci și instrumente care te pot ajuta să construiești aplicații web mai complexe.

Mult succes și sper că acest tutorial te va ajuta să începi călătoria ta cu React.js!