Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
The React Challenge2:47 with Guil Hernandez
This challenge will give you a great opportunity to practice what you've learned so far about React.
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>
- 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
- 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.
What good is a scoreboard app without a little friendly competition?
Now that we've reached the end of the course,
I have a special challenge for you.
This challenge is going to give you a great opportunity to practice some of what
you've learned so far about React.
Let's go over what you're going to build.
You're going to make the scoreboard app a little more interactive and
competitive, by building a highest score feature.
You'll add a crown icon next to the player name inside the player component.
When a player on the scoreboard has the highest score,
the icon changes from light gray to gold, and displays a short scaling animation.
There are a few things that should happen.
When the app loads, and all players scores are zero, there is no highest score, so
all icons should be light gray.
We should see the change only when a player takes the highest score, or
when they are tied for the highest score.
Now, 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.
You can copy the SVG to display the crown icon from the teacher's notes with
In the file index.css I've included styling for the SVG, and
a class named is is-high-score that changes the SVG fill color to gold,
and triggers the scaling animation.
As you can see here in div tools, if a player has the highest score,
the class is high score gets added to the SVG element.
Otherwise, the svg does not get a high score class.
That should have given you a hint.
You have all the information you need to determine the highest score
in the players state.
You'll need to figure out how to get an update,
the highest score, with each score change.
Then parse that information to a player, and eventually the SVG element.
When working with React,
there might be several different ways to build the exact same thing.
In React there's likely many ways you can build a highest score feature.
So I encourage you to experiment with different approaches, and
don't forget to share your solutions with the Treehouse community.
You can see my solution in the next step.
Hopefully this course helped you React at a deeper level, but
we've only just scratched the surface of the power React can provide when
building applications of any size.
There's a lot more to learn about in React.
It has a vibrant, helpful community, and new features and
improvements to React's API are released frequently.
So be sure to check the teacher's notes to see a list of what you might learn next,
as well as up to date information and links to other Treehouse courses and
workshops on React.
And if you have any questions about anything covered in this course,
feel free to reach out to the Treehouse staff, or other students in the community.
Thanks everyone, and happy reacting.
You need to sign up for Treehouse in order to download course files.Sign up