Tutorial ReactJS pentru începători

Ce este ReactJS?

ReactJS este un front-end open-source JavaBibliotecă de scripturi pentru construirea de interfețe cu utilizatorul. ReactJS este întreținut de Meta (fostul Facebook) și de o comunitate de dezvoltatori individuali și companii. Este utilizat pe scară largă ca bază în construirea de aplicații cu o singură pagină și aplicații mobile. Este foarte ușor de utilizat și permite utilizatorilor să creeze componente reutilizabile pentru interfața utilizator.

Înainte de a scrie prima linie de cod React, este util să știi ce diferențiază biblioteca de codul simplu. JavaScript. Următoarea secțiune prezintă caracteristicile sale principale.

Caracteristicile ReactJS

JSX: JSX este o extensie a JavaScript. Deși nu este obligatoriu să folosești JSX în React, este una dintre caracteristicile bune și ușor de utilizat.

Componente: Componentele sunt ca pure JavaFuncții de script care ajută la simplificarea codului prin divizarea logicii în cod independent reutilizabil. Putem folosi componentele ca funcții și componentele ca clase. Componentele au, de asemenea, stare și elemente de recuzită, ceea ce simplifică viața. În interiorul unei componente de clasă, starea și elementele de recuzită sunt menținute.

DOM virtual: React creează un DOM virtual, adică o memorie cache a structurii de date în memorie. Doar modificările finale sunt actualizate ulterior în DOM-ul browserului, care continuă să fie randat rapid.

JavaExpresii de script: Expresiile JS pot fi utilizate în fișierele JSX folosind acolade spiralate, de exemplu {}.

Avantajele ReactJS

Iată câteva avantaje/beneficii importante ale utilizării ReactJS:

• ReactJS folosește un DOM virtual care utilizează o memorie cache a structurii de date în memorie, iar doar modificările finale sunt actualizate în DOM-ul browserului. Acest lucru face aplicația mai rapidă.
• Puteți crea componente la alegere folosind funcția de componente React. Componentele pot fi reutilizate și sunt utile și în întreținerea codului.
• ReactJS este open-source JavaBibliotecă de scripturi, deci este ușor să începeți cu ea.
• ReactJS a devenit foarte popular într-o perioadă scurtă de timp și susține produse precum Facebook și InstagramEste folosit de multe companii celebre precum Apple, Netflix, Etc
• Meta întreține biblioteca ReactJS, deci aceasta este bine întreținută și actualizată.
• ReactJS poate fi folosit pentru a dezvolta o interfață de utilizare bogată atât pentru desktop, cât și pentru aplicații mobile.
• Ușor de depanat și testat, deoarece cea mai mare parte a codării este realizată JavaScenariu mai degrabă decât în ​​HTML.

Dezavantajele lui ReactJS

Iată dezavantajele/dezavantajele utilizării ReactJS:

• Cea mai mare parte a codului este scrisă în JSX, adică HTML și CSS fac parte din JavaScript. Poate fi destul de confuz, deoarece majoritatea celorlalte framework-uri preferă keeping HTML separat de JavaCod script.
• Dimensiunea fișierului ReactJS este relativ mare.

Cunoscând compromisurile, ești gata să configurezi React. Cea mai rapidă modalitate de a încerca acest lucru este direct dintr-o CDN, lucru pe care îl vom aborda mai întâi; după aceea urmează configurările bazate pe npm pentru proiecte reale.

Folosind ReactJS de la CDN

Pentru a începe să lucrăm cu React, trebuie mai întâi să adăugăm ReactJS la pagina noastră. Puteți începe cu ușurință să utilizați ReactJS cu CDN-ul. JavaFișiere script, așa cum se arată mai jos.

Accesați site-ul de documentație React existent pentru a obține linkurile CDN, de exemplu, https://legacy.reactjs.org/docs/cdn-links.htmlși veți obține fișierele necesare explicate în imaginea următoare.

Pentru dev

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Pentru prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Înlocui versiune cu versiunea de React dorită atât pentru react.development.js, cât și pentru react-dom.development.js. Folosim versiunea 16 pe această pagină, așa că exemplele de mai jos rulează neschimbate.

În cazul în care intenționați să utilizați fișierele CDN, asigurați-vă că păstrați atributul crossorigin pentru a evita problemele cross-domain. Codul ReactJS nu poate fi executat direct în browser și trebuie transpilat folosind Babel pentru a fi simplificat. JavaScript înainte de executarea în browser.

Iată scriptul BabelJS care poate fi folosit:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Iată exemplul funcțional ReactJS folosind fișiere CDN și scriptul BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

ieșire:

Vom intra în detaliile codului în capitolul următor; haideți să vedem cum se lucrează aici cu fișiere CDN. Utilizarea directă a scriptului Babel nu este o practică bună, iar începătorii ar trebui să îl folosească doar pentru a învăța ReactJS deocamdată. În producție, va trebui să instalați React folosind pachetul npm.

Utilizarea pachetelor NPM

Asigurați-vă că aveți Node.js instalat. Dacă nu este instalat, parcurgeți acest tutorial pentru Node.js (https://www.guru99.com/node-js-tutorial.html) instalare.

După ce ați instalat Node.js, creați un folder reactproj/.

Pentru a începe cu configurarea proiectului, executați comanda npm init.

Iată cum va arăta structura folderelor:

reactproj\
package.json

Acum vom instala pachetele de care avem nevoie.

Iată lista de pachete pentru ReactJS. Am adăugat React la versiunea 16, astfel încât ReactDOM.render Exemplele de pe această pagină funcționează exact așa cum se arată:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Deschideți promptul de comandă și executați comenzile de mai sus în folderul reactproj/.

Creați un folder src / unde va merge tot codul JS. Tot codul pentru proiectul ReactJS va fi disponibil în folderul src/. Creați un fișier index.js și importați react și react-dom, așa cum se arată mai jos.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Am scris codul de bază pentru ReactJS. Vom explica detaliile acestuia în capitolul următor. Dorim să afișăm Salut, de la Guru99 tutoriale, iar același lucru este atribuit elementului DOM cu ID-ul „root”. Este preluat din fișierul index.html, care este fișierul de pornire, așa cum se arată mai jos.

Creați un folder public/ și adăugați index.html în el, așa cum se arată mai jos.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Pachetul react-scripts se va ocupa de compilarea codului și de pornirea serverului pentru a afișa fișierul HTML, adică index.html. Trebuie să adăugați comanda în package.json care se va ocupa de utilizarea react-scripts pentru a compila codul și a porni serverul, așa cum se arată mai jos:

 "scripts": {
    "start": "react-scripts start"
  }

După instalarea tuturor pachetelor și adăugarea comenzii de mai sus, pachetul final.json este următorul:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Pentru a începe testarea ReactJS, executați comanda:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Va deschide browserul cu URL http://localhost:3000/ după cum se arată mai jos:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Vom folosi același proces pentru a executa JavaFișiere script și în următoarele capitole. Adăugați toate fișierele .js și .jsx în folderul src/. Structura fișierelor va fi următoarea:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Cum să vă creați primul proiect React

Iată un ghid pas cu pas în acest Tutorial ReactJS pentru a începe cu prima aplicație React.

Pas 1) Importați pachetele react.
1. Pentru a începe cu ReactJS, trebuie să importam mai întâi pachetele react după cum urmează.

import React from 'react';
import ReactDOM from 'react-dom';

2. Salvați fișierul ca index.js în folderul src/.

Pas 2) Scrie simplu Code.
Vom scrie un cod simplu în acest tutorial React JS, în care vom afișa mesajul „Bună ziua, de la Guru99 de tutoriale!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render va adăuga etichetă la elementul cu id-ul root. Iată fișierul HTML pe care îl avem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Pas 3) Compilați Code.

În continuare, în acest tutorial React.js, trebuie să compilam codul pentru a obține rezultatul în browser.

Iată structura folderului:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Am adăugat comenzile pentru a compila fișierul final în package.json, după cum urmează:

"scripts": {
    "start": "react-scripts start"
  },

Pentru a compila fișierul final, executați următoarea comandă:

npm run start

Când executați comanda de mai sus, fișierele vor fi compilate și vă vor notifica dacă există vreo eroare. Dacă totul pare în regulă, va deschide browserul și va rula pagina la adresa http://localhost:3000/

Comanda: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Pas 4) Verificați ieșirea.
URL http://localhost:3000 se va deschide în browser odată ce codul este compilat, așa cum se arată mai jos:

Cum se configurează React cu Vite (abordare modernă)

Configurația react-scripts de mai sus provine de la Create React App (CRA), care a fost instrumentul standard de pornire timp de ani de zile. Echipa React a dezaprobat oficial Create React App în februarie 2025, așa că proiectele noi ar trebui să utilizeze în schimb un instrument de construire modern. Cea mai populară alegere astăzi este Vieți, care pornește mai repede și produce construcții mai mici.

Iată cum se creează un proiect React nou cu Vite:

Pas 1) Executați comanda scaffolding în terminal:

npm create vite@latest my-react-app -- --template react

Pas 2) Mută-te în folder și instalează dependențele:

cd my-react-app
npm install

Pas 3) Porniți serverul de dezvoltare:

npm run dev

Vite difuzează aplicația la http://localhost:5173/ în mod implicit și se reîncarcă instantaneu când salvați un fișier.

Diferențe cheie față de configurația mai veche de pe această pagină:

• Fișierul de intrare este src/main.jsx în loc de src/index.js.
• Instalează cea mai recentă versiune de React, care folosește creațiRădăcină în loc de ReactDOM.render.
• index.html se află în rădăcina proiectului, nu în public/.
• Construcțiile sunt produse cu npm run build într-un folder dist/.

Pentru nevoi full-stack, cum ar fi rutarea și randarea serverului, echipa React recomandă și framework-uri precum Next.jsTot ce înveți în capitolele de mai jos — JSX, componente, stare și elemente de recuzită — se aplică neschimbat într-un proiect Vite sau Next.js.

Ce este JSX?

JSX este o extensie a JavaScript. Este un script șablon în care veți avea puterea de a utiliza HTML și JavaScrieți scenariul împreună.

Iată un exemplu simplu de cod JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

De ce avem nevoie de JSX în React?

Pentru o interfață utilizator, avem nevoie de HTML, iar fiecare element din DOM va avea evenimente de gestionat, schimbări de stare etc.

În cazul React, ne permite să folosim HTML și JavaScrieți scriptul în același fișier și gestionați schimbările de stare din DOM într-un mod eficient.

Expresii în JSX

Iată un exemplu simplu de utilizare a expresiilor în JSX.

În exemplele anterioare de ReactJS, am scris ceva de genul:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Acum vom modifica codul de mai sus pentru a adăuga expresii. Expresiile sunt folosite între acolade {} și sunt extinse în timpul execuției. Expresiile din React sunt aceleași ca JavaExpresii de script.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Să testăm acum același lucru în browser.

În captura de ecran de mai sus puteți vedea că expresia {display} nu este înlocuită. React nu știe ce să facă atunci când o expresie este utilizată într-un fișier .js.

Să adăugăm acum modificări și să creăm un fișier .jsx, după cum se arată mai jos:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Am adăugat codul necesar și vom folosi fișierul test.jsx în index.js. Vrem ca h1tag variabilă care va fi utilizată în index.js, deci aceasta este exportată așa cum se arată mai sus în test.jsx.

Iată codul modificat în index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Pentru a utiliza fișierul test.jsx în index.js, trebuie să îl importăm mai întâi, așa cum se arată mai jos:

import h1tag from './test.jsx';

Putem folosi h1tag acum în ReactDOM.render așa cum se arată mai jos:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Iată rezultatul când verificăm același lucru în browser:

Ce sunt componentele în ReactJS?

Componentele sunt ca pure JavaFuncții de script care ajută la simplificarea codului prin divizarea logicii în cod independent reutilizabil.

Componentele ca funcții

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Am creat o funcție numită Hei care returnează o etichetă h1, așa cum se arată mai sus. Numele funcției acționează ca un element, așa cum se arată mai jos:

const Hello_comp = <Hello />;
export default Hello_comp;

Componenta Hei este folosit ca etichetă HTML, adică , atribuit Hello_comp variabilă, iar aceasta este exportată folosind export.

Să folosim acum această componentă în fișierul index.js, așa cum se arată mai jos:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Iată rezultatul din browser:

Clasă ca componentă

Iată un exemplu ReactJS care utilizează o clasă ca componentă.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Putem folosi componenta Hello din fișierul index.js după cum urmează:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Componenta Hello este utilizată ca etichetă HTML, adică .

Aici este rezultatul aceluiași.

Componente de clasă vs. componente de funcție și cârlige

Ați văzut acum ambele modalități de a scrie o componentă, așa că pe care ar trebui să o utilizați? Această pagină prezintă componentele clasei deoarece acestea explică conceptele de stare și ciclu de viață, ceea ce este valoros pentru începători și apare încă în bazele de cod vechi. Cu toate acestea, de când React 16.8 a introdus Hook-urile, componentele funcțiilor pot deține și starea, iar acestea sunt stilul recomandat pentru tot codul nou.

Aspect	Componenta clasei	Componentă funcțională cu cârlige
Stat	this.state și this.setState()	useState() Hook
Ciclul Vietii	componentDidMount, componentDidActualizare, componentWillDemontare	Funcția Hook useEffect() acoperă toate cele trei
Sintaxă	Mai multe exemple standard (constructor, bind, this)	Mai scurt, fără acest cuvânt cheie
Stare	Stil moștenit, acceptat	Recomandat pentru cod nou

Iată exemplul de stare de pe această pagină rescris cu ajutorul hook-ului useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Ambele versiuni redau aceeași ieșire. Învățați sintaxa clasei utilizată în capitolele de mai jos, apoi exersați convertirea fiecărui exemplu în Hook-uri.

Ce este o stare în ReactJS?

Un stat este un JavaObiect script, similar cu props-urile, care conține date ce vor fi utilizate cu randarea ReactJS. Datele de stare sunt un obiect privat și sunt utilizate în componentele dintr-o clasă.

Exemplu de stat

Iată un exemplu practic despre cum se utilizează starea în interiorul unei clase.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Iată ce obținem când îl testăm în browser:

Ce sunt elementele de recuzită în ReactJS?

Propurile sunt proprietăți care pot fi utilizate în interiorul unei componente. Ele acționează ca obiecte sau variabile globale care pot fi utilizate în interiorul componentei.

Recuzită pentru Componenta Funcțională

Iată un exemplu de transmitere a elementelor de recuzită către o componentă de funcție.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

După cum s-a arătat mai sus, am adăugat msg atribuie componentă. Aceeași componentă poate fi accesată ca recuzită în interiorul funcției Hello, care este un obiect care va avea msg detalii de atribut și același lucru este folosit ca expresie.

Componenta este utilizată în index.js după cum urmează:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Iată rezultatul din browser:

Recuzită pentru Componenta de clasă

Pentru a accesa recuzitele dintr-o clasă, putem face acest lucru în felul următor:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

msg atributul este transmis componentului din index.js, după cum urmează:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Aceasta este rezultatul din browser:

Verificați și: - Tutorial AngularJS pentru începători: Învață AngularJS pas cu pas

Ciclul de viață al unei componente

Odată ce componentele, starea și prop-urile au fost acoperite, următorul pas este să înțelegem când React apelează metodele componentei. Ciclul de viață al unei componente este împărțit în etapele de Inițializare, Montare, Actualizare și Demontare.

Iată o explicație detaliată a fiecărei etape.

O componentă în ReactJS are următoarele etape:

Inițializarea: Aceasta este prima etapă a ciclului de viață al componentei.

Aici va avea recuzita implicită și starea la nivelul inițial.

MontareÎn această fază, componenta este randată în interiorul DOM-ului. Suntem expuși la următoarele metode în starea de montare:

• render(): Aveți această metodă pentru toate componentele create. Returnează nodul HTML.
• componentDidMount(): Aceasta este apelată imediat după ce componenta este adăugată în DOM.

ActualizeazăÎn această stare, utilizatorul interacționează cu DOM-ul și acesta este actualizat. De exemplu, dacă introduceți ceva în caseta de text, proprietățile stării sunt actualizate.

Următoarele sunt metodele disponibile în starea de actualizare:

• shouldComponentUpdate(): apelat înainte de re-randare; vă permite să decideți dacă componenta ar trebui să se actualizeze. Returnarea valorii true re-randează componenta.
• componentDidUpdate(): apelată după actualizarea componentei.

Demontare: Această stare apare atunci când componenta nu este necesară sau este îndepărtată.

Următoarea este metoda disponibilă în starea de demontare:

• componentWillUnmount(): apelată chiar înainte ca componenta să fie eliminată sau distrusă.

Exemplu de lucru al metodelor ciclului de viață

Iată un exemplu funcțional care prezintă metodele apelate în fiecare etapă.

Exemplu: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Când verificați rezultatul în browser:

În consola browserului primești:

Când utilizatorul introduce în caseta text:

În consolă, sunt afișate următoarele mesaje:

Acum că știți când o componentă se randează și se actualizează, haideți să aplicăm starea și evenimentele unui caz practic de utilizare: gestionarea datelor introduse de utilizator prin intermediul formularelor.

Lucrul cu Formulare

În ReactJS, elementele de intrare HTML precum , și <select /> au propria stare și trebuie actualizate atunci când utilizatorul interacționează, folosind metoda setState().

În acest capitol, vom vedea cum se lucrează cu formulare în ReactJS.

Iată un exemplu de lucru:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Pentru câmpurile de intrare, trebuie să menținem starea, așa că pentru asta React oferă o metodă specială numită setState, care ajută la menținerea stării ori de câte ori există o modificare. Într-o aplicație reală, apelați și event.preventDefault() în interiorul formSubmit pentru a împiedica browserul să reîncarce pagina la trimitere.

Am folosit evenimentele onChange și onClick pe caseta de text și butonul de trimitere. Când utilizatorul tastează în interiorul casetei de text, evenimentul onChange este apelat, iar câmpul name din obiectul de stare este actualizat, așa cum se arată mai jos:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Ieșirea în browser este după cum urmează:

Pas 1) Introduceți numele dvs. în caseta de text:

Pas 2) Faceți clic pe butonul de trimitere:

Lucrul cu evenimente în ReactJS

Formularele sunt doar o sursă de interacțiune cu utilizatorul. Lucrul cu evenimente în ReactJS este la fel ca în JavaScript. Puteți utiliza toate rutinele de gestionare a evenimentelor care sunt utilizate în JavaScript. Metoda setState() este utilizată pentru a actualiza starea atunci când utilizatorul interacționează cu orice element HTML.

Iată un exemplu practic despre cum se utilizează evenimentele în ReactJS.

evenimente.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Pentru câmpurile de intrare, trebuie să menținem starea, așa că React oferă setState metodă, care ajută la menținerea stării ori de câte ori există o schimbare.

Am folosit evenimentele noi schimbăm și onClick pe caseta de text și pe buton. Când utilizatorul tastează în interiorul casetei de text, noi schimbăm evenimentul este apelat, iar câmpul name din interiorul obiectului state este actualizat, așa cum se arată mai jos:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Iată rezultatul din browser:

Când un utilizator introduce numele:

Când utilizatorul face clic pe butonul Click aici:

Lucrul cu CSS inline în ReactJS

Odată ce componentele tale gestionează datele și evenimentele, pasul final este stilizarea lor. Vom analiza un exemplu funcțional pentru a înțelege CSS-ul inline în ReactJS.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Am adăugat culoarea „roșu” la eticheta h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ieșirea în browser este după cum urmează:

Puteți crea un obiect cu stilul dorit pentru element și puteți utiliza o expresie pentru a adăuga stilul, așa cum se arată în exemplul de mai sus.

Lucrul cu CSS extern în ReactJS

Să creăm un fișier CSS extern. Pentru asta, creăm un folder css/ și adăugăm style.css în el.

style.css

.h1tag {
color:red;
}

Adăugați style.css în fișierul dvs. index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Acum să adăugăm clasa la eticheta h1 din fișierul .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Atributul className primește detaliile clasei. Rețineți că JSX folosește numele clasei în loc de atributul HTML class, deoarece class este un cuvânt cheie rezervat în JavaScript. Acum haideți să-l testăm în browser.

Iată ce vedeți când inspectați eticheta h1 în browser:

Puteți vedea că class="h1tag" a fost adăugat cu succes la eticheta h1.

De ce a fost înlocuit ReactDOM.render de createRoot

Fiecare exemplu de pe această pagină montează aplicația cu ReactDOM.render, ceea ce este corect pentru React 16 și 17, versiunile vizate de acest curs. React 18, lansat în martie 2022, a înlocuit acel punct de intrare cu API-ul createRoot, iar React 19 a eliminat complet ReactDOM.render. Motivul este concurența: createRoot permite React să pregătească mai multe versiuni ale interfeței utilizator în același timp, să întrerupă randarea cu prioritate scăzută și să mențină typing și animații fluide. Funcții precum procesarea automată în loturi, useTransition și streamingul bazat pe suspans depind toate de acesta.

Echivalentul modern al fișierului index.js folosit pe această pagină arată astfel:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Tot ce ați învățat aici — componente, JSX, stare, elemente de recuzită și evenimente — funcționează la fel după această modificare dintr-o singură linie la punctul de intrare. Diferențele de versiune, cum ar fi aceasta, apar des în Întrebări de interviu React JS, așa că merită să înțelegeți ambele API-uri.

Întrebări frecvente

Verificați și: - Top 70 de întrebări și răspunsuri la interviu React (Actualizat)