useContext Kontekst Huk u React-u

U ovoj lekciji ćemo nastaviti rad sa kontekstom. Sada ćemo izgraditi stablo komponenti. Za početak u posebnom fajlu kreiraćemo React komponentu BigBox:

function BigBox() {
	return (
		<p>bigbox</p>
	);
}

Uvešćemo je i smestiti u našu glavnu komponentu App:

import BigBox from './BigBox';

function App() {
	return (
		<BigBox />
	);
}

Za veću preglednost malo stilizujemo div-ove. Za to kreiraćemo fajl styles.css:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

Nećemo zaboraviti da ga uvezemo u App.js:

import './styles.css';

Sada u posebnom fajlu kreiraćemo komponentu MiddleBox:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

I stavićemo je u veliku kutiju BigBox:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

Ponovićemo sve isto sa malom kutijom SmallBox:

function SmallBox() {
	return (
		<p>Ja sam ... </p>
	);
}

Smeštaćemo dve takve kutije u MiddleBox:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

Stablo smo izgradili. A sada mi želimo da iz našeg App prosledimo, recimo, u SmallBox string vrednost 'small box :)', ne koristeći props-e, već koristeći se kontekstom (u slučaju da se naša kutijasta aplikacija razroše do ogromnih razmera).

Fajl sa kontekstom MyContext.js mi već kreirasmo i povezali na prošloj lekciji.

Sledeći korak, koji ćemo uraditi - obmotati BigBox u provider konteksta, koji je svojstvo našeg objekta konteksta MyContext. Sada sve komponente, obuhvaćene ovom konstrukcijom (a to su i sve kutije, ugnježdene u BigBox) moći će da pristupe i pretplate se na promene konteksta. Kao vrednost konteksta prosleđujemo željenu 'small box :)':

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
		</MyContext.Provider>
	);
}

A sada ostaje da se pročita vrednost konteksta. Želeli smo da ga koristimo u SmallBox, znači uvezimo tamo fajl konteksta MyContext.js i huk useContext:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

Pročitaćemo pomoću useContext vrednost konteksta u promenljivu name:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Ja sam ... </p>
		</div>
	);
}

Pretplatili smo SmallBox na dati kontekst i, ako se on promeni, ova komponenta će takođe biti ažurirana.

I, konačno, zamenjujemo vrednost promenljive name umesto tri tačke:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Ja sam {name} </p>
		</div>
	);
}

U praznoj komponenti App kreirajte komponentu Parent, a u njoj komponentu Daughter, a u Daughter komponentu Grandson. Koristeći kontekst, prosledite iz App vrednost godina 42, a pomoću useContext prikažite je u komponenti Daughter.

A sada u komponenti Grandson prikažite vrednost godina, ali podeljenu sa 2.