React'ta State Reactivite

Şimdi reactivitenin nasıl çalıştığına bakalım. Reactivite, state değiştiğinde bu değişikliklerin anında ekrana yansımasını sağlar.

Bir örnekle inceleyelim. Ürün adı için bir state'imiz olsun:

const [name, setName] = useState('prod');

Ürün adını HTML çıktısında gösterelim:

return <div>
	<span>{name}</span>
</div>;

Şimdi, tıklandığında state'imizi değiştirecek bir buton yapalım:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Tıklama işleyicisinde, ürüne yeni bir ad vermek için setName fonksiyonunu kullanacağız:

function clickHandler() {
	setName('xxxx');
}

Tüm kodumuzu bir araya getirelim. Butona tıklandıktan sonra metnin anında yeni değere değiştiğini göreceğiz:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

Ayrı işleyici fonksiyonlar kullanmak zorunlu değildir. Anonim bir ok fonksiyonu da kullanılabilir:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Kullanıcının adı ve soyadı için state'ler verilmiştir. Bunları HTML çıktısında gösterin. Bu state'leri değiştirmek için butonlar yapın.