React Componente

Componentele sunt ca funcții care elemente de returnare HTML.

React Componente

Componentele sunt biți independente și reutilizabile de cod. Ele servesc în același scop ca

și funcțiile JavaScript, dar lucrează în mod izolat și se întoarce HTML printr-o funcție de
randare.

Componentele vin în două tipuri, componente de clasă și componente funcționale, în

acest tutorial ne vom concentra asupra componentelor de clasă.

Creați o componentă de clasă

Când creați o componentă React, numele componentei trebuie să înceapă cu o literă

majusculă.

Componenta trebuie să includă extends React.Componentdeclarația, această afirmație

creează o moștenire React.Component, și oferă accesul la funcțiile componente
React.Component lui.

Componenta necesită , de asemenea , o render()metodă, această metodă se întoarce

HTML.

Exemplu

Creați o componentă de clasă numită Car

class Car extends React.Component {

render() {
return <h2>Hi, I am a Car!</h2>;
}
}

Acum , aplicația React are o componentă numită Car, care returnează un <h2>element
de .

Pentru a utiliza această componentă în aplicația dvs, utilizați sintaxa similară ca HTML normal:<Car
/>

Exemplu

Afișarea Carcomponentei în elementul „rădăcină“:

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

Run Exemplu »
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {

render() {
 return <h2>Hi, I am a Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById('root'));

Crearea unei funcții Componentă

Aici este același exemplu ca mai sus, dar a creat folosind o componentă funcție în loc.

O componentă Funcția returnează, de asemenea, HTML, și se comportă destul de mult în

același mod ca și o componentă de clasă, dar componentele de clasă au unele
completări, și vor fi preferați în acest tutorial.

Exemplu

Crearea unei componente de funcții numite Car

function Car() {
return <h2>Hi, I am also a Car!</h2>;
}

Încă o dată aplicația React are o componentă auto.

Consultați componenta auto ca HTML normal ( cu excepția React, componentele trebuie

să înceapă cu o literă majusculă):

Exemplu

Afișarea Carcomponentei în elementul „rădăcină“:

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

Run Exemplu »
import React from 'react';
import ReactDOM from 'react-dom';

function Car() {
return <h2>Hi, I am also a Car!</h2>;
}
ReactDOM.render(<Car />, document.getElementById('root'));

Componenta Constructor

Dacă există o constructor()funcție în componenta dumneavoastră, această funcție va fi

numit atunci când devine inițiat componenta.

Funcția de constructor este de la care inițiați proprietățile componentei.

În React, proprietăți a componentelor trebuie să fie păstrate într - un obiect numit state.

Vei afla mai multe despre statemai târziu în acest tutorial.

Funcția de constructor este , de asemenea , în cazul în care vă onorăm moștenirea

componentei părinte prin includerea super() declarație, care execută funcția
de constructor a componentei părinte, și componenta are acces la toate funcțiile
componentei părinte ( React.Component).
Exemplu

Creați o funcție de constructor în componenta de mașini, și se adaugă o proprietate de

culoare:

class Car extends React.Component {

constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a Car!</h2>;
}
}

Utilizați proprietatea de culoare în funcția render ():

Exemplu
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}

Run Exemplu »
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {

constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById('root'));

Proprietati

O altă modalitate de manipulare de proprietăți a componentelor este prin

utilizarea props.

Recuzita sunt ca argumente funcționale, și le trimite în componenta ca atribute.

Vei afla mai multe despre propsîn capitolul următor.

Exemplu

Utilizați un atribut pentru a trece o culoare la componenta de mașini, și utilizați-l în

funcția de randare ():
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Run Exemplu »
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {

render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Componentele din componente

Ne putem referi la componentele din interiorul altor componente:

Exemplu

Utilizați componenta auto în interiorul componentei Garaj:

class Car extends React.Component {

render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));

Run Exemplu »
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {

render() {
return <h2>I am a Car!</h2>;
}
}

class Garage extends React.Component {

render() {
return (
<div>
 <h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}

Componentele din fișiere

React este totul despre codul re-utilizarea, și poate fi inteligent pentru a insera unele
dintre componentele în fișiere separate.

Pentru a face acest lucru, creați un nou fișier cu o .js extensie de fișier și a pus codul
în interiorul acestuia:

Rețineți că fișierul trebuie să înceapă prin importarea React (ca mai înainte), și trebuie să
se încheie cu declarația export default Car;.

Exemplu

Acesta este noul fișier, l-am numit „App.js“:

import React from 'react';

import ReactDOM from 'react-dom';

class Car extends React.Component {

render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;

Pentru a putea utiliza componenta auto, trebuie să importați fișierul în aplicația

dumneavoastră.

Exemplu

Acum vom importa „App.js“ fișier în cerere, și putem folosi componenta mașini ca și în
cazul în care a fost creat aici.

import React from 'react';

import ReactDOM from 'react-dom';
import Car from './App.js';
ReactDOM.render(<Car />, document.getElementById('root'));

Run Exemplu »
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {

render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;
/*
Notice that you now have three files in your project:
"App.js", "index.js", and "index.html".
*/