Un ghid pentru începători React Props [cu sintaxă]

React este o bibliotecă JavaScript open-source, cu licență MIT, care este utilizată pentru proiectarea interfeței de utilizare interactive pentru aplicații. Este o bibliotecă declarativă, flexibilă și eficientă bazată pe componente, care ușurează viața dezvoltatorilor. Deoarece este o bibliotecă bazată pe componente, împarte UI în mai multe piese individuale cunoscute sub numele de componente. Aceste componente trebuie să comunice între ele pentru a funcționa corespunzător și atunci intră în imagine elementele de recuzită React.

Ce sunt React Props?

Cuvântul „Props” este un cuvânt cheie din biblioteca React care înseamnă proprietăți. De asemenea, uneori sunt denumite variabile sau obiect global în componentele React. Elementele de recuzită React sunt similare cu argumentele din HTML. Unele lucruri care merită remarcate despre elementele de recuzită React sunt că acestea curg întotdeauna în unidirecție, iar datele din ele sunt doar pentru citire. Acest lucru le face imuabile, ceea ce înseamnă că datele care curg dintr-o componentă nu pot fi modificate în cealaltă. Putem înțelege acest lucru cu un exemplu de funcție pură și impură.

Aceasta este o funcție pură, deoarece va oferi întotdeauna aceeași ieșire pentru aceleași intrări:

funcția prod(a, b) {

returnează a * b;

}

Aceasta este o funcție impură, deoarece își manipulează propria intrare:

funcția depozit(cont, sumă){

cont.total += suma;

}

Deoarece elementele de recuzită React sunt imuabile, componentele trebuie să funcționeze ca funcții pure. Aceasta este singura regulă strictă din biblioteca flexibilă React.

Sintaxa pentru trecerea și accesarea React Props

După cum am menționat mai devreme, elementele de recuzită React sunt similare cu argumentele HTML și, prin urmare, pentru a transmite sau adăuga orice elemente de recuzită la o componentă, o putem face similar cu transmiterea atributelor HTML.

Sintaxă:

<component_name props_name = „valoare” />

În sintaxa de mai sus, „ nume_componentă ” este numele componentei căreia trebuie să îi transmitem props, props_name este numele props și value este valoarea props.

Putem accesa orice recuzită din clasa componentei.

Sintaxă:

this.props .props_name;

În sintaxa de mai sus, this.props este un obiect global care este folosit pentru a accesa orice props din clasa componentei, iar props_name este numele props-urilor React pe care dorim să le accesăm.

Citiți: JavaScript vs JQuery: Diferența dintre JavaScript și JQuery

Cum se utilizează React Props?

Există două moduri diferite de a utiliza datele imuabile de recuzită React în orice componentă. Aceste două moduri sunt prin adăugarea de elemente de recuzită la funcția reactDom.render() în fișierul principal sau prin adăugarea de date ca elemente de recuzită implicite în componenta însăși. Iată cum să utilizați recuzita React în ambele moduri:

Utilizarea React Props din funcția react.Dom.render().

Mai întâi trebuie să adăugăm elemente de recuzită în fișierul component.

import React din 'react'; //importul bibliotecii React

class Example extends React.component { /* exemplul este numele componentei care extinde proprietățile clasei componente React */

randa() {

întoarcere (

<div>

<h2>{this.props. firstProp } în h2</h2>

<h3>{acesta, recuzită. secondProp } în h3</h3>

</div>

);

}

}

export implicit Exemplu; //exportul componentei

Acum trebuie să adăugăm valoare elementelor de recuzită prin funcția reactDom.render() din fișierul principal și să-l accesăm de acolo.

import React din 'react';

import ReactDom din 'react-dom';

import Exemplu din „./Example.jsx”;

ReactDom.render(< Exemplu firstProp = „Acesta este primul prop ” secondProp = „Acesta este al doilea prop ”/>, document.getElementById('example'));

export implicit Exemplu;

Rezultate:

Acesta este primul prop în h2

Acesta este al doilea prop în h3

Utilizarea elementelor React cu elemente implicite în Component Constructor

Adăugați elemente de recuzită și valorile acestora în fișierul component.

import React din 'react'; //importul bibliotecii React

class Example extends React.component { /* exemplul este numele componentei care extinde proprietățile clasei componente React */

randa() {

întoarcere (

<div>

<h2>{this.props. firstProp }</h2>

<h3>{acesta, recuzită. secondProp }</h3>

</div>

);

}

}

Exemplu .deafultProps = {

firstProp : „Acesta este primul prop ”,

secondProp : „Acesta este al doilea prop ”

}

export implicit Exemplu; //exportul componentei

Accesarea elementelor de recuzită React din fișierul principal.

import React din 'react';

import ReactDom din 'react-dom';

import Exemplu din „./Example.jsx”;

ReactDom.render(< Exemplu />, document.getElementById('exemplu'));

Ieșirile pentru aceasta vor fi similare cu utilizarea funcției reactDom.render(), cu excepția faptului că de data aceasta se face cu ajutorul elementelor implicite.

Verificați: Vue vs React: Diferența dintre Vue și React

Cum să treceți elementele de recuzită React de la o componentă la alta

Utilizarea majoră a elementelor de recuzită React este transmiterea datelor între componente în React. Următorul exemplu ne va ajuta să înțelegem cum sunt transmise datele.

import React din 'react';

clasa Fructul se extinde React.Component {

randa() {

return <h4>Eu sunt {this.props. nume } în h4</h4>

}

}

clasa Întrebare se extinde React.Component {

randa() {

întoarcere (

<div>

<h3>Ce fruct ești? În h3</h3>

< Nume fructe = „Mango” / > //Crearea elementelor de recuzită și atribuirea unei valori

</div>

);

}

}

ReactDom.render(<Întrebare />, document.getElementById('fructe'));

Aceasta va da următoarea ieșire:

Ce fruct esti? În h3

Eu sunt Mango in h4

Folosind State și Props împreună

După cum știm cu toții, React este un limbaj dinamic, iar flexibilitatea sa este USP. Prin urmare, utilizarea elementelor de recuzită React nu este suficientă în dezvoltarea aplicațiilor. Această problemă este rezolvată cu ajutorul statului. Starea este o altă caracteristică React care este utilizată pentru gestionarea datelor. Să vedem cum putem combina elementele de recuzită React și starea pentru a face aplicația noastră mai interactivă și mai dinamică.

import React din 'react';

clasa Car se extinde React.Component {

constructor(recuzită) {

super(recuzită);

this.state = {

firstCar: „Acesta este un Mercedes-Benz! În h2”, //se atribuie valoare stării

secondCar: „Acesta este un BMW! În h3” //atribuirea valorii stării

}

}

randa() {

întoarcere (

<div>

<FirstCar firstProp = {this.state.firstCar}/> //atribuirea valorii elementelor de recuzită

<SecondCar secondProp = {this.state.secondCar}/> //se atribuie valoare elementelor de recuzită

</div>

);

}

}

clasa FirstCar extinde React.Component {

randa() {

întoarcere (

<div>

<h2>{this.props.firstProp}</h2>

</div>

);

}

}

clasa SecondCar extinde React.Component {

randa() {

întoarcere (

<div>

<h3>{this.props.secondProp}</h3>

</div>

);

}

}

export implicit mașină;

Acum, trebuie să accesăm datele din fișierul principal.

import React din 'react';

import ReactDOM din 'react-dom';

import Car from './Car.jsx';

ReactDOM.render(<Mașină />, document.getElementById('mașină'));

Rezultatul:

Acesta este un Mercedes-Benz! În h2

Acesta este un BMW! În h3

Citiți și: Diferența dintre Node JS și React JS

Rezumând

Combinația dintre elementele de recuzită React și starea de gestionare a datelor în React îl face una dintre cele mai utile biblioteci JavaScript. Există o mulțime de idei de proiecte React și numai dezvoltatorii le pot da viață. Prin urmare, există o cerere excelentă pentru dezvoltatorii ReactJS și o creștere a salariului lor .

Dacă te entuziasmează ideea de a ajuta companiile să creeze aplicații și să lucrezi la numeroase proiecte React pentru a obține un venit uriaș, atunci este timpul să acționezi înainte să fie prea târziu. Puteți urma cursuri online oferite de upGrad pentru a afla totul despre React și pentru a deveni un dezvoltator de software complet.

Dacă sunteți interesat să aflați mai multe despre reacționare, dezvoltarea full-stack, consultați PG Diploma în dezvoltare software full-stack de la upGrad și IIIT-B, care este concepută pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, peste 9 proiecte, și misiuni, statutul de absolvenți IIIT-B, proiecte practice practice și asistență la locul de muncă cu firme de top.