Samer Buna is a polyglot coder with years of practical experience in designing, implementing, and testing software, including web and mobile applications development, API design, functional programming, optimization, system administration, databases, and scalability. Samer worked in several industries including real estate, government, education, and publications
Working with Data We've seen simple components, we've worked with multiple components, and we've seen how and when to use state and properties of components. However, we haven't really worked with any real data yet, so we're going to be doing exactly that in this module, and we'll use the GitHub public REST API for it. We're going to build a simple GitHub card component that displays information about a GitHub user. Once we have a card component, we're going to explore how to render multiple cards for different users and have that driven from an array of objects. Then we'll add a simple input form to add a new GitHub card to the UI for a username that we read from the input using the GitHub API. Before we begin, if you don't have the react-devtools extension installed already, find it now and add it to your browser. It adds a tab in your Dev Tools console, which gives us a screen that is super helpful. It allows us to inspect and interact with the React application. You can actually go to any site that uses React and see how they structure their components here with this tool. For example, the netflix. com app can be inspected here, you can see their components and you can see every component's props and state, you can even change the state of any component directly here. For example, let's see what would happen if we change this showDisclosure state element to true. React re-rendered this component and showed a component that was not previously part of the app. Familiarize yourself with this react-devtools extension. It's going to be your best friend when you start writing React applications.
Numbers Selection We're going to implement the numbers selection in this module, which is the core of how a user would start playing the game. They're going to see the random numbers of stars, and select one or more numbers that would sum up to that number of stars, and they will do that by clicking on the circles in the bottom Numbers component. When a player selects a number, we want that number to show up in the Answer component, and we want it to be disabled in the Numbers component so that the player can't select it again. When they accept an answer, we will reset this Answer component. We will be managing a state of selected numbers for that, and we're going to write a function to add a number to that state, and also remove a number from that state. This state element is going to be a regular array, and resetting that is as easy as reinitializing it with an empty array.
Game State We're going to finish the game in this module, and to do so we need a few important features. We need a way for the users to check an answer, accept an answer, and figure out if there are no more possible solutions left. We're going to also implement a way for the player to redraw the numbers of random stars, and we'll see how many redraws we should give the players. The final component that we want to add to the game is the one that would display the done status, and give the players a way to play again.