Tutorial ReactJS pentru începători: Învățați cu un exemplu pas cu pas

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 Facebook și de o comunitate de dezvoltatori individuali și companii. Este utilizat pe scară largă ca bază în construirea de site-uri web cu o singură pagină și aplicații mobile. Este foarte ușor de utilizat și le permite utilizatorilor să creeze componente reutilizabile UI.

Caracteristicile ReactJS

JSX: JSX este o extensie la javascript. Deși nu este obligatoriu să utilizați JSX în react, este una dintre caracteristicile bune și ușor de utilizat.

Componente: Componentele sunt ca niște funcții javascript pure care ajută la simplificarea codului prin împărțirea logicii în cod independent reutilizabil. Putem folosi componente ca funcții și componente ca clase. Componentele au, de asemenea, o stare, recuzită care ușurează viața. În interiorul unei clase se menține starea fiecărei recuzite.

DOM virtual: React creează un dom virtual, adică un cache cu structură de date în memorie. Doar modificările finale ale DOM au fost actualizate ulterior în browserele DOM.

Javascript Expresii: Expresiile JS pot fi folosite în fișierele jsx folosind paranteze, de exemplu {}.

Avantajele ReactJS

Iată avantajele/beneficiile importante ale utilizării ReactJS:

ReactJS folosește dom virtual care folosește memoria cache a structurii de date și numai modificările finale sunt actualizate în dom de browser. Acest lucru face aplicația mai rapidă.
Puteți crea componente la alegere utilizând caracteristica componentei reacționați. Componentele pot fi refolosite și, de asemenea, utile în întreținerea codului.
Reactjs este o bibliotecă javascript open-source, deci este ușor să începeți.
ReactJS a devenit foarte popular într-o perioadă scurtă de timp și întreținut de Facebook și Instagram. Este folosit de multe companii celebre precum Apple, Netflix, Etc
Facebook menține ReactJS, biblioteca, așa că este bine întreținută și ținută 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ă Javascript mai degrabă decât pe HTML.

Dezavantajele lui ReactJS

Iată dezavantajele / dezavantajele utilizării ReactJS:

Majoritatea codului este scris în JSX, adică Html și CSS fac parte din javascript, poate fi destul de confuz, deoarece majoritatea celorlalte cadre preferă să păstreze HTML separat de codul javascript.
Dimensiunea fișierului ReactJS este mare.

Folosind ReactJS de la CDN

Pentru a începe să lucrăm cu react, trebuie să instalăm mai întâi reactjs. Puteți începe cu ușurință să utilizați reactjs folosind fișierele javascript CDN, așa cum se arată mai jos.

Accesați site-ul oficial al reactjs pentru a obține link-urile CDN, adică, https://reactjs.org/docs/cdn-links.html și veți obține fișierele necesare pentru a explica următoarea imagine.

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 cea mai recentă versiune react atât pentru react-development.js, cât și pentru react-dom.developement.js. Puteți găzdui fișierele la sfârșitul dvs. pentru a începe să lucrați cu reactjs.

În cazul în care intenționați să utilizați fișierele CDN, asigurați-vă că păstrați atributul de origine încrucișată, pentru a evita problemele între domenii. Codul Reactjs nu poate fi executat direct în browser și trebuie transpirat folosind Babel în javascript înainte de a fi executat în browser.

Iată scriptul BabelJS care poate fi folosit:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Iată exemplul de lucru ReactJS folosind fișiere cdn și script-ul 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/[email protected]/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, să vedem cum se lucrează aici cu fișierele CDN. Se spune că folosirea directă a scriptului babel nu este o practică bună, iar noii veniți o pot folosi 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 nodejs instalat. Dacă nu este instalat, parcurgeți acest tutorial pentru nodejs (https://www.guru99.com/node-js-tutorial.html) instalare.

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

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

Iată cum va arăta structura folderului:

reactproj\
package.json

Acum vom instala pachetele de care avem nevoie.

Iată lista pachetelor pentru reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

Creați un folder src / unde tot codul js va veni în acel folder. Tot codul pentru proiectul reactjs va fi disponibil în folderul src/. Creați un fișier index.js și adăugați import 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 returnat codul de bază pentru reactjs. Vom explica detaliile acestuia în capitolul următor. Vrem să afișăm Bună, de la Guru99 Tutorials și același lucru este dat și elementului dom cu id-ul „root”. Acesta 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 acesta, 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 afișarea fișierului html, adică index.html. Trebuie să adăugați comanda în package.json care se va ocupa de utilizarea react-script-urilor 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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Pentru a începe testarea reactjs, rulați comanda

npm run start

C:\reactproj>npm run start		
> [email protected] start C:\reactproj		
> react-scripts start

Se 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 fișierele javascript și în capitolele următoare. Adăugați toate fișierele js și .jsx în folderul src/ . Structura fișierului va fi următoarea:

reatproj/
	 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 cod simplu.
Vom scrie un cod simplu în acest tutorial React JS, în care vom afișa mesajul „Bună ziua, de la Guru99 Tutorials!”

ReactDOM.render(

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

ReactDOM.render va adăuga etichetați elementul cu id-rădăcină. 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 Codul.

Î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, va compila fișierele și vă va anunța dacă există vreo eroare, dacă totul arată bine, va deschide browserul și va rula fișierul index.html la http://localhost:3000/index.html

Comanda: npm run start:

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

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

Ce este JSX?

JSX este o extensie la javascript. Este un script șablon în care veți avea puterea de a folosi HTML și Javascript î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ță de utilizare, avem nevoie de Html, iar fiecare element din dom va avea evenimente de gestionat, modificări de stare etc.

În cazul React, ne permite să folosim Html și javascript în același fișier și să ne ocupăm de 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 schimba codul de mai sus pentru a adăuga expresii. Expresiile sunt folosite în paranteze {} și sunt extinse în timpul rulării. Expresiile din react sunt aceleași cu expresiile javascript.

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.

Puteți vedea că expresia {display} nu este înlocuită. React nu știe ce să facă atunci când o expresie este utilizată în fișierul .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 text.jsx din index.js.Dorim ca h1tag variabilă care va fi utilizată în interiorul script.js, deci aceeași 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 folosi test.jsx în index.js, trebuie să îl importam 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 niște funcții javascript pure care ajută la simplificarea codului prin împărțirea 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 a returnat eticheta h1 așa cum se arată mai sus. Numele funcției acționează ca un element, după cum se arată mai jos:

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

Componenta Hei este folosit ca etichetă HTML, adică și atribuit la Hello_comp variabilă și același lucru 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 în 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 folosită ca etichetă HTML, adică, .

Aici este rezultatul aceluiași.

Ce este o stare în ReactJS?

O stare este un obiect javascript similar cu elementele de recuzită care au date pentru a fi utilizate cu randarea reactjs. Datele de stare sunt un obiect privat și sunt utilizate în cadrul componentelor din interiorul unei clase.

Exemplu de stat

Iată un exemplu de lucru despre cum să utilizați 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?

Recuzitele sunt proprietăți care trebuie utilizate în interiorul unei componente. Acţionează ca obiect global sau variabile 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 se arată mai sus, am adăugat msg atribuit lui Componentă. Același lucru 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 recuzita într-o clasă, o putem face după cum urmează:

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

Ciclul de viață al unei componente este împărțit în etape de inițializare, montare, actualizare și demontare.

Iată o explicație detaliată despre fiecare componentă.

O componentă din 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 redată în interiorul domului. Avem expunere la următoarele metode în starea de montare.

componentDidMount(): Acesta este, de asemenea, numit atunci când Componenta este doar adăugată la dom.

render(): Aveți această metodă pentru toate componentele create. Returnează nodul HTML.

Actualizează: În această stare, dom-ul este interacționat de către un utilizator și actualizat. De exemplu, introduceți ceva în caseta text, astfel încât proprietățile stării sunt actualizate.

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

shouldComponentUpdate() : apelat când componenta este actualizată.

componentDidUpdate() : după ce componenta este actualizată.

Demontare: această stare intră în imagine atunci când Componenta nu este necesară sau eliminată.

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

Componenta willUnmount(): apelată când Componenta este eliminată sau distrusă.

Exemplu de lucru

Iată un exemplu de lucru care arată metodele apelate în fiecare stare.

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 obțineți:

Când utilizatorul introduce în caseta text:

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

Lucrul cu Formulare

În reactjs, elementele de intrare HTML, cum ar fi , și <select /> are propria lor stare și trebuie actualizat atunci când utilizatorul interacționează folosind metoda setState().

În acest capitol, vom vedea cum să lucrați 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 aceasta react oferă o metodă specială numită setState, care ajută la menținerea stării ori de câte ori are loc o schimbare.

Am folosit evenimente onChange și onClick pe caseta de text și butonul de trimitere. Când utilizatorul intră în caseta de text, evenimentul onChange este apelat, iar câmpul de nume din starea obiectului de stat este actualizat după 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ă:

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

Faceți clic pe butonul de trimitere

Lucrul cu evenimente în ReactJS

Lucrul cu evenimente în reactjs este la fel ca în javascript. Puteți utiliza toți gestionatorii de evenimente care sunt utilizați în javascript. Metoda setState() este folosită pentru a actualiza starea când utilizatorul interacționează cu orice element HTML.

Iată un exemplu de lucru despre cum să utilizați 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;

Am folosit evenimente noi schimbăm si onClick pe caseta de text și butonul. Când utilizatorul introduce în caseta de text noi schimbăm evenimentul este apelat și câmpul de nume din starea obiectului de stare este actualizat după 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

Vom arunca o privire la un exemplu de lucru pentru a înțelege funcționarea CSS 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 culoare: stil „roșu” etichetei 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 de stil pe care îl doriți pe element și puteți utiliza o expresie pentru a adăuga stil, așa cum se arată în exemplul de mai sus.

Lucrul cu CSS extern în ReactJS

Să creăm un css extern, pentru asta să creăm un folder css/ și să 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>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Acum să adăugăm clasa la eticheta h1 în 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')
);

Atributului className i se oferă detaliile clasei. Acum haideți să testăm în browser.

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

Puteți vedea că clasa=" h1tag" este adăugată cu succes la eticheta h1.

Rezumat

ReactJS este un front-end open-source JavaBibliotecă de scripturi pentru a construi interfața cu utilizatorul. Este întreținut de Facebook și folosit astăzi de multe companii pentru dezvoltarea UI.
Caracteristicile de bază ale ReactJS includ JSX, componente (componente funcționale și componente bazate pe clasă), ciclul de viață al unei componente, elemente de recuzită și suport de stat pentru o componentă, care lucrează cu expresii javascript.
Configurarea proiectului ReactJS este explicată folosind fișiere CDN și, de asemenea, folosind pachete npm pentru a construi proiectul.
JSX este o extensie la javascript. Este un script șablon în care veți avea puterea de a utiliza HTML și javascript împreună.
Componentele sunt ca niște funcții javascript pure care ajută la simplificarea codului prin împărțirea logicii în cod independent reutilizabil.
O stare este un obiect javascript similar cu elementele de recuzită care au date pentru a fi utilizate cu randarea reactjs. Datele de stare sunt un obiect privat și sunt utilizate în cadrul componentelor din interiorul unei clase.
Recuzitele sunt proprietăți care trebuie utilizate în interiorul unei componente.
Ciclul de viață al unei componente este împărțit în etape de inițializare, montare, actualizare și demontare.
În reactjs elemente de intrare HTML, cum ar fi , și <select /> are propria lor stare și trebuie actualizat când utilizatorul interacționează folosind metoda setState().
Lucrul cu evenimente în reactjs este la fel ca în javascript. Puteți utiliza toți gestionatorii de evenimente care sunt utilizați în javascript. Metoda setState() este folosită pentru a actualiza starea când utilizatorul interacționează cu orice element HTML.
ReactJS vă permite să lucrați cu CSS extern, precum și CSS inline folosind expresia javascript.

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

S-ar putea sa-ti placa:

5 cele mai bune cursuri React cu...

Ce este ReactJS?

Caracteristicile ReactJS

Avantajele ReactJS

Dezavantajele lui ReactJS

Folosind ReactJS de la CDN

Pentru dev

Pentru prod

ARTICOLE SIMILARE

Utilizarea pachetelor NPM

Cum să vă creați primul proiect React

Ce este JSX?

De ce avem nevoie de JSX în React?

Expresii în JSX

Ce sunt componentele în ReactJS?

Componentele ca funcții

Clasă ca componentă

Ce este o stare în ReactJS?

Exemplu de stat

Ce sunt elementele de recuzită în ReactJS?

Recuzită pentru Componenta Funcțională

Recuzită pentru Componenta de clasă

Ciclul de viață al unei componente

Exemplu de lucru

Lucrul cu Formulare

Lucrul cu evenimente în ReactJS

Lucrul cu CSS inline în ReactJS

Lucrul cu CSS extern în ReactJS

Rezumat