3 valuable things I learned when building my first React game.

When I say game its not the most complicated one, but its still a game and a very good way to learn and explore react.

The game is simple, you have a button and when you click on the button a text is randomly selected and shown and also a AD is randomly selected and shown. Quite simple but enough to start to learn react.

Try it out here, the text is in Swedish but just press the button and the AD should be matched for you. Hope you find something fun ;)

Lets get straight to it…

1. Divide and conquer

What I mean with this is that at first you might have everything in the same function you create, but the bigger the game or app gets the more messy it gets. I ended up with many small functions that handled just functionality and then one function that collected all the other functions. Lets call it the mother function.

function Mother() {
  const [textNumber, setTextNumber] = useState(utils.random(1, 9));
  const [adNumber, setAdNumber] = useState(utils.random(1, 3));
return (         
    <article className="game">
        
        <PressButton sendTextNumber={setTextNumber} 
                     sendAdNumber={setAdNumber} />
        <RandomText numberIn={textNumber} />
        <div className="game__ad">
          <RandomAd numberIn={adNumber} />
        </div>