Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The React Challenge

2:47 with Guil Hernandez

This challenge will give you a great opportunity to practice what you've learned so far about React.

Teacher's Notes
Video Transcript
Downloads

SVG crown icon

<svg viewBox="0 0 44 35">
  <path d="M26.7616 10.6207L21.8192 0L16.9973 10.5603C15.3699 14.1207 10.9096 15.2672 7.77534 12.9741L0 7.24138L6.56986 28.8448H37.0685L43.5781 7.72414L35.7425 13.0948C32.6685 15.2672 28.3288 14.0603 26.7616 10.6207Z" transform="translate(0 0.301727)"/>
  <rect width="30.4986" height="3.07759" transform="translate(6.56987 31.5603)"/>
</svg>

Challenge instructions

When the app loads and all player scores are 0, there is no highest score, so all icons should be light grey.
The change should happen only when a player takes the highest score, or when they are tied for the highest score.
If the player with the highest score is removed from the scoreboard, then the player (or players) with the next highest score gets the gold crown.
All the information you need to determine the highest score is in the players state.
You'll need to figure out how to get and update the highest score with each score change, then pass that information to a player, and eventually the SVG.

Resources

What good is a scoreboard app without a little friendly competition? 0:00

Now that we've reached the end of the course, 0:03

I have a special challenge for you. 0:05

This challenge is going to give you a great opportunity to practice some of what 0:07

you've learned so far about React. 0:10

Let's go over what you're going to build. 0:12

You're going to make the scoreboard app a little more interactive and 0:14

competitive, by building a highest score feature. 0:17

You'll add a crown icon next to the player name inside the player component. 0:20

When a player on the scoreboard has the highest score, 0:25

the icon changes from light gray to gold, and displays a short scaling animation. 0:28

There are a few things that should happen. 0:33

When the app loads, and all players scores are zero, there is no highest score, so 0:35

all icons should be light gray. 0:40

We should see the change only when a player takes the highest score, or 0:41

when they are tied for the highest score. 0:45

Now, if the player with the highest score is removed from the scoreboard, 0:47

then the player or players with the next highest score gets the gold crown. 0:51

You can copy the SVG to display the crown icon from the teacher's notes with 0:56

this video. 1:00

In the file index.css I've included styling for the SVG, and 1:01

a class named is is-high-score that changes the SVG fill color to gold, 1:06

and triggers the scaling animation. 1:12

As you can see here in div tools, if a player has the highest score, 1:15

the class is high score gets added to the SVG element. 1:20

Otherwise, the svg does not get a high score class. 1:25

That should have given you a hint. 1:29

You have all the information you need to determine the highest score 1:31

in the players state. 1:35

You'll need to figure out how to get an update, 1:36

the highest score, with each score change. 1:39

Then parse that information to a player, and eventually the SVG element. 1:43

When working with React, 1:47

you'll find that most of the time you're just writing plain JavaScript. 1:49

So like with JavaScript, 1:53

there might be several different ways to build the exact same thing. 1:54

In React there's likely many ways you can build a highest score feature. 1:57

So I encourage you to experiment with different approaches, and 2:01

don't forget to share your solutions with the Treehouse community. 2:04

You can see my solution in the next step. 2:07

Hopefully this course helped you React at a deeper level, but 2:10

we've only just scratched the surface of the power React can provide when 2:13

building applications of any size. 2:18

There's a lot more to learn about in React. 2:20

It has a vibrant, helpful community, and new features and 2:22

improvements to React's API are released frequently. 2:25

So be sure to check the teacher's notes to see a list of what you might learn next, 2:28

as well as up to date information and links to other Treehouse courses and 2:32

workshops on React. 2:36

And if you have any questions about anything covered in this course, 2:37

feel free to reach out to the Treehouse staff, or other students in the community. 2:41

Thanks everyone, and happy reacting. 2:44

You need to sign up for Treehouse in order to download course files.

Sign up