Today I finished my first beginner tutorial on React.js from Pluralsight. It was a pretty simple app, where you have the numbers 1-9, and you have to choose the proper numbers that add up to the number of stars that show up. The game ends when you use all your numbers or there are no more moves left. It's right here if you want to check it out. Anyway, what the app does doesn't really matter. The point is that I walked through a basic app and saw what it takes to build a React app, with multiple components, lots of state to keep track of, many functions that control the app, etc. Not really all that complex but it was a nice place to start.

One of the things that jumped out to me was hiding and showing components based on a certain condition. In this case, it was toggling the container with the available numbers to choose and the container that displays the message at the end of the game (whether you one or lost). Below is a small snippet of the code that shows what I did to accomplish this:

var Game = React.createClass({
  getInitialState: function() {
    return {
      //other state variables to keep track of
      ...
      doneStatus: null
    };
  },
  render: function() {
    var doneStatus = this.state.doneStatus,
        bottomFrame;

    if( doneStatus ) {
      //bottomFrame = the frame that shows when you've finished the game
    } else {
      //bottomFrame = the container that holds the numbers you can show
    }

  }
});

So basically, when the game is over (you've won or lost), doneStatus is set to a string message. That makes it so that the bottomFrame element that's output is changed immediately. To put it in Angular terms, it's similar to having two elements on the page and having the ng-hide or ng-show directive on the element. There may be other ways in React to show and hide Components, but this way worked really well for this simple example.

The other thing that I thought a lot about while going through the app is making sure to put variables that I would need in different Components on the Main component, where I could share them across all children. It seems to make more sense to only add a variable to the parent component if you need it in two or more components, including the parent. In this case, basically everything was needed mainly in the top level component and then shared to one or more children, but that will be something to keep in mind for future and more complex apps.

The other thing that I didn't love about this example was just how big my script.jsx file was getting. I already checked to make sure, but pulling out each component to its own file and then using them in the main component's file worked, so that's good to be able to keep each file as simple as possible. I don't know yet what industry standard is as far as how many components per file, etc. but I'm sure I'll figure that out as I continue.

So far, I've liked everything about React, and am excited to learn more about it. There are two more tutorials I found in Pluralsight that I'm going to do, in addition to Tyler McGinnis's tutorial that he has up on his blog.