Ievads React komponentēs

Paskatīsimies uz jebkuru mājaslapu. Tā sastāv no neatkarīgu bloku kopas: galvene, sānjoslas, kājene, saturs. Var teikt, ka šie bloki ir komponentes tādā nozīmē, kādā to saprot React.

Ja paskatās uz to pašu galveni, ko tajā var izdalīt: bloku ar logotipu, kontaktu bloku, bloku ar izvēlni un tā tālāk. Tas nozīmē, ka komponentes var sastāvēt no citām apakškomponentēm.

Līdzīgā veidā tas ir ar React - mājaslapa tiek veidota no komponenšu kopas, kas savukārt var saturēt citas komponentes.

React katrs komponents ir atsevišķs modulis. Parasti izstrāde sākas ar galveno komponenti App, kas satur sevī pārējos.

Praktizēsimies veidot jaunas komponentes.

Piemēram, pieņemsim, ka mums ir nepieciešams komponents, kas izvada produkta datus. Lai to izdarītu, mums darba mapē jāizveido fails Product.js un jāpievieno tam šāds kods:

import React from 'react';

function Product() {
	return <p>
		produkts
	</p>;
}

export default Product;

Kā redzat, šobrīd mūsu komponents atgriež rindkopu ar tekstu. Nākamajās nodarbībās mēs uzlabosim šo kodu tā, lai atgrieztos produkta dati. Bet pagaidām sākumā atstāsim vienkārši rindkopu ar kādu sākotnējo tekstu.

Tagad parādīsim mūsu izveidoto komponentu komponentē App. Pieņemsim, ka šobrīd mūsu App ir šāds kods:

import React from 'react';

function App() {
	return <div>
		teksts
	</div>;
}

export default App;

Sākumā mums ir jāimportē mūsu izveidotais produkta komponents:

import React from 'react';
import Product from './Product'; // importējam produktu

function App() {
	return <div>
		teksts
	</div>;
}

export default App;

Pēc šāda importēšanas komponenta App iekšienē var izmantot komponentu Product.