Ghid introductiv React: Construiește-ți prima interfață de utilizator de la zero

React este o bibliotecă JavaScript pentru construirea interfețelor de utilizator. Este dezvoltat și întreținut de Facebook și a devenit unul dintre cele mai populare instrumente în dezvoltarea front-end. Acest ghid te va ajuta să înțelegi conceptele de bază ale React de la zero, pas cu pas, și să construiești o interfață de utilizator simplă.

De ce să alegi React?

React are următoarele avantaje:

• Componentizare: React descompune interfața de utilizator în componente independente, reutilizabile. Acest lucru face codul mai ușor de întreținut și de înțeles.
• Declarativ: React folosește un stil de programare declarativ, ceea ce înseamnă că trebuie doar să descrii ceea ce vrei să afișezi, iar React se va ocupa automat de actualizări și randare.
• Eficient: React folosește DOM virtual și un algoritm inteligent de diff, care poate actualiza eficient interfața de utilizator, reducând randările inutile.
• Suport vast din partea comunității: React are o comunitate vastă și un ecosistem bogat, poți găsi o mulțime de tutoriale, biblioteci și instrumente care să te ajute să dezvolți.
• Capacitate multiplatformă: React Native îți permite să folosești React pentru a dezvolta aplicații mobile native (iOS și Android).

Pregătirea

Înainte de a începe, trebuie să te asiguri că ai instalate următoarele instrumente pe computer:

• Node.js: Node.js este un mediu de execuție JavaScript, folosit pentru a rula instrumentele de dezvoltare React. Îl poți descărca și instala de la https://nodejs.org/.
• npm sau yarn: npm (Node Package Manager) și yarn sunt manageri de pachete JavaScript, folosiți pentru a instala și gestiona dependențele React. De obicei, npm este instalat odată cu Node.js. yarn poate fi instalat de la https://yarnpkg.com/.

Crearea primei tale aplicații React

Vom folosi create-react-app pentru a crea rapid un proiect React.

1. Creare folosind npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Creare folosind yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

După executarea comenzilor de mai sus, create-react-app va crea automat un director numit my-first-react-app și va inițializa un proiect React în acel director. Comanda npm start sau yarn start va porni serverul de dezvoltare, iar tu poți accesa http://localhost:3000 în browser pentru a vedea aplicația ta React.

Structura directorului

Structura directorului proiectului creat de create-react-app este următoarea:

my-first-react-app/
├── node_modules/         # Bibliotecile de care depinde proiectul
├── public/               # Resurse statice (de exemplu, fișiere HTML)
│   ├── index.html        # Fișierul HTML de intrare al aplicației
│   └── ...
├── src/                  # Codul sursă React
│   ├── App.css           # Stilurile CSS ale componentei App
│   ├── App.js            # Componenta App
│   ├── App.test.js       # Fișierul de testare al componentei App
│   ├── index.css         # Stiluri CSS globale
│   ├── index.js          # Fișierul JavaScript de intrare al aplicației
│   ├── logo.svg          # Logo-ul React
│   └── ...
├── .gitignore            # Fișierul Git de ignorare
├── package.json          # Metadatele și dependențele proiectului
├── README.md             # Documentația proiectului
└── yarn.lock             # Fișierul de blocare a versiunilor dependențelor (dacă se utilizează yarn)

Înțelegerea Componentelor React

Aplicațiile React sunt construite din componente. Componentele sunt blocuri de cod independente, reutilizabile, utilizate pentru a reda o anumită parte a interfeței cu utilizatorul.

În fișierul src/App.js, puteți vedea o componentă App implicită:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Explicația codului:

• import React from 'react'; Importă biblioteca React.
• function App() { ... } Definește o componentă funcțională numită App.
• return ( ... ) Returnează o expresie JSX, care descrie conținutul pe care ar trebui să-l redea componenta.
• export default App; Exportă componenta App, astfel încât să poată fi utilizată în alte fișiere.

JSX (JavaScript XML)

JSX este o extensie de sintaxă JavaScript care vă permite să scrieți cod similar cu HTML în codul JavaScript. În exemplul de mai sus, ... este o expresie JSX. Codul JSX va fi transformat de Babel în cod JavaScript standard, astfel încât browserul să îl poată înțelege.

Modificarea Componentei App

Să modificăm componenta App pentru a crea un simplu contor.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Contor

      Numărul curent: {count}

      +
      -
    
  );
}

export default App;

Modificări:

• import React, { useState } from 'react'; Importă Hook-ul useState. useState este un Hook React, folosit pentru a adăuga stări în componentele funcționale.
• const [count, setCount] = useState(0); Folosește Hook-ul useState pentru a crea o variabilă de stare numită count și o inițializează cu 0. setCount este o funcție folosită pentru a actualiza starea count.
• const increment = () => { setCount(count + 1); }; Definește o funcție numită increment, folosită pentru a incrementa starea count cu 1.
• const decrement = () => { setCount(count - 1); }; Definește o funcție numită decrement, folosită pentru a decrementa starea count cu 1.
• Numărul curent: {count} Afișează valoarea stării count în pagină. {count} este o expresie JSX, folosită pentru a insera variabile JavaScript în codul JSX.
• + și - Creează două butoane, legând funcțiile increment și decrement respectiv. onClick este un handler de eveniment, folosit pentru a executa funcția specificată atunci când butonul este apăsat.

După salvarea fișierului src/App.js, browserul se va reîmprospăta automat și vei vedea un contor simplu. Apăsarea butonului "+" va crește numărul, iar apăsarea butonului "-" va reduce numărul.

Utilizarea stilurilor CSS

Poți folosi CSS pentru a înfrumuseța aplicația ta React. create-react-app suportă CSS Modules și fișiere CSS obișnuite.

Utilizarea CSS Modules:

CSS Modules îți permite să creezi stiluri CSS independente pentru fiecare componentă, evitând conflictele de stiluri. Pentru a folosi CSS Modules într-o componentă, trebuie să creezi un fișier care se termină cu .module.css.

De exemplu, creează un fișier numit App.module.css și adaugă următoarele stiluri CSS în el:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Apoi, importă CSS Modules în fișierul src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importă CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Folosește obiectul styles pentru a referi clasele CSS */}
      

# Contor

      Numărul curent: {count}

      +
      -
    
  );
}

export default App;

Utilizarea unui fișier CSS obișnuit:

Poți utiliza, de asemenea, un fișier CSS obișnuit pentru a defini stiluri globale. În fișierul src/index.css, poți defini stiluri globale.

De exemplu, adaugă următoarele stiluri CSS:

body {
  font-family: sans-serif;
}

Acest stil va fi aplicat elementului body al întregii aplicații.

Următorul pas

Felicitări, ai finalizat prima ta aplicație React! În continuare, poți învăța mai multe despre React, cum ar fi:

• Comunicarea între componente: Învață cum să faci componentele diferite să comunice între ele.
• Procesarea formularelor: Învață cum să creezi și să procesezi formulare.
• Rutare: Învață cum să utilizezi React Router pentru a crea o aplicație cu mai multe pagini.
• Redux sau Context API: Învață cum să gestionezi starea aplicației.
• Hooks: Aprofundează-ți cunoștințele despre React Hooks, cum ar fi useEffect, useContext etc.

Amintește-ți, React este o tehnologie care necesită practică și învățare continuă. Îți urez învățare plăcută!