Johdatus React-komponentteihin

Katsotaanpa mitä tahansa verkkosivustoa. Se koostuu joukosta riippumattomia lohkoja: ylätunniste, sivupalkit, alatunniste, sisältö. Voidaan sanoa, että nämä lohkot ovat komponentteja siinä mielessä, kuin Reactissa tarkoitetaan.

Jos katsotaan samaa ylätunnistetta, mitä siinä voi erottaa logon lohkon, yhteystietolohkon, valikkolohkon ja niin edelleen. Eli komponentit voivat koostua muista alikomponenteista.

Samalla tavalla asiat ovat Reactissa - sivusto rakennetaan joukosta komponentteja, jotka puolestaan voivat sisältää muita komponentteja.

Reactissa jokainen komponentti on erillinen moduuli. Yleensä kehitys alkaa pääkomponentista App, joka sisältää muut.

Harjoitellaan uusien komponenttien luomista.

Oletetaan esimerkiksi, että tarvitsemme komponentin, joka tulostaa tuotteen tiedot. Tätä varten meidän on työkansioon luotava tiedosto Product.js ja lisättävä siihin seuraava koodi:

import React from 'react';

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

export default Product;

Kuten näette, komponenttimme palauttaa tällä hetkellä kappaleen tekstillä. Seuraavissa oppitunneissa tarkennamme tätä koodia niin, että se palauttaa tuotteen tiedot. Mutta toistaiseksi jätetään vain kappale jollain alkuperäisellä tekstillä.

Nyt tulostetaan luomamme komponentti App-komponenttiin. Oletetaan, että App sisältää tällä hetkellä seuraavan koodin:

import React from 'react';

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

export default App;

Ensin meidän on tuotava luomamme Product-komponentti:

import React from 'react';
import Product from './Product'; // tuodaan tuote

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

export default App;

Tällaisen tuonnin jälkeen App-komponentin sisällä voidaan käyttää Product-komponenttia.