React-dä ýagdaýlary ulanmak

Önümiň adyny öz içine alýan ýagdaý döretmek üçin useState funksiýasyny ulanýarys:

jsxconst state = useState('prod');

Netijede state konstantasy massiw bolup, onuň birinji elementinde önümiň ady saklanar, ikinjisinde bolsa ony üýtgetmek üçin funksiýa:

jsxconst state   = useState('prod');
const name    = state[0];
const setName = state[1];

Gysgaçylyk üçin, köplenç, massiw üçin aralyk konstantasyny ulanmaýarlar, ýöne destorlama ulanýarlar:

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

Indi, önümiň ady bilen ýagdaýymyzy käbir wersiýada çykarýarys:

jsxreturn <p>
  <span>{name}</span>
</p>;

Hemmesini bir ýere ýygnap, aşakdaky kody alýarys:

jsximport React, { useState } from 'react';

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

export default App;

Eger bu kody işletseňiz, başda divde ýagdaýyň başlangyç bahasy çykar, biziň ýagdaýymyzda 'prod'. Ýagdaýy setName funksiýasy arkaly üýtgetseňiz, wersiýada awtomatiki usulda ýagdaýyň täze bahasy peýda bolar.