Getting To Know The Project

React apps have 2 primary directories, public and src.

• public contains index.html, which is the file that contains the "root" div that React will put your components in. You can also change the title and any meta tags in the head in this file.
• In this project, public also contains data and img directories. The data directory contains a JSON file with all of the Super Smash Bros. characters, and img contains an image we will use. (NOTE, some developers prefer to keep images in the src directory, but that tends to get a bit uglier).

Getting To Know The Project Cont.

The src directory is where the actual React code is stored and thus where we will do most of our work.

• The components directory in src contains all of our React components. Most developers prefer to use one file per component to keep things modular.
• styles contains our CSS file.
• index.js is the first file that will run when React starts. First it does some imports (including our CSS file), then it calls ReactDOM.render(), which puts our App component in the root div.

Getting To Know The Project Cont.

App.js has been completed for you. It renders the header, footer and the Rankings component without any props. You will need to complete the implementation of Character.js, Tier.js and Rankings.js.

• Character.js - represents one Character "card".
• Tier.js - represents all of the characters currently ranked in the same tier. Unranked will also be treated as its own tier.
• Rankings.js - the main component of our application. It manages all of the state related to the different cards and which tiers they are in.

More information on these in subsequent slides.

Approaching A Big React Problem

When building components in React, it is important to first think about how state and props will move through your components. This will drive the rest of our design decisions.

• In this case, the Rankings component contains the main state for our application, an array of tiers and of unranked characters. When the component is constructed, Rankings fetches all of the data from the JSON and appends it to the unranked state.

Example State

This is what the state of our application might look like mid run. Note that tiers will be an empty array to begin with and unranked will contain every character. Each array inside of the larger tiers array represents one tier. In this example, Mario and Pikachu are currently tier 1, Link is tier 2.

            {
              tiers: [
                [
                  {name: "mario", image: "mario.png"},
                  {name: "pikachu", image: "pikachu.png"}
                ],
                [
                  {name: "link", image: "link.png"},
                ]
              ],
              unranked: [
                {name: "fox", image: "fox.png"},
                {name: "Bowser", image: "bowser.png"}
              ]
            }
          

JavaScript

Part 1: Updating State

• We need the ability to update the tier of characters. updateLocation() has been defined for you, but you need to complete the method.
• If oldRank was 0, we will say the character was previously unranked. In this case, remove the character from the unranked array and add it to the tier at this.tiers[newRank - 1] (since we start at tier 1 not 0). Note that if this tier does not exist, you will need to create it!
• If oldRank was not 0, remove the character from this.tiers[oldRank - 1] and add it to the newRank tier in the same way as described above.

Remember to use this.setState() rather than updating state directly!

Debugging State

Debugging state can be really hard, especially since most of the code that will need it isn't implemented yet. To help with this, we have added a method genTester() that generates some extra JSX for interacting with the state. When you press the button, it will call your updateLocation() function and console.log the resulting state!

• Use this along with console.log statements to test if your updateLocation() method is working properly!

Note: If you are interested in how this tester works, whenever the input boxes are changed, they get added to state. Pressing the button then just calls your updateLocation() method with that information in state.

Part 2: Implementing Tier

Rankings renders one Tier for each tier in the state array. It passes the array of characters from state, a name and the updateLocation method as props. (this has been done for you)

• You will need to finish the render() method of Tier to use these props to render the correct characters! (details on slide below)

Note: We also pass the index in the array to the Tier as a prop called key. Whenever generating components in a loop, you need a key. This allows React to keep track of which component is which when it rerenders.

Note: When passing a method as props, we often have to use this.methodName.bind(this). All this does is tell it what "this" refers to (in this case it refers to the Rankings component).

Part 2: Implementing Tier Cont.

The render() method of Tier is mostly complete, but it doesn't generate any cards!

Instead of null, set the characterCards constant equal to an array of Character components. Create one component for each object in the characters props.

Each Character will take 4 props:

• character should be set to the character object from the characters array.
• move should be set to the move method from props (note we are not calling the method here).
• rank should be set to the rank prop.
• key should be set to the index in the array.