Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Components

Well done!

You have completed React Components!

Sign up for Treehouse Back to Library

The React Challenge

3:21 with Laura Coronel

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>

Challenge instructions

  • When the app loads and all player scores are 0 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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    What good is a scoreboard app without a little friendly competition? 0:00
    Now that we've reached the end of this course, 0:04
    I have a special challenge for you. 0:07
    This challenge is gonna give you a great opportunity to practice some of 0:09
    what you've learned so far about React. 0:13
    Let's go over what you're gonna build. 0:16
    You're gonna make the scoreboard app a little more interactive and 0:18
    competitive by building a highest score feature. 0:22
    You'll add a crown icon next to the player name inside the player component. 0:27
    When a player on the scoreboard has the highest score, 0:32
    the icon changes from a light gray to gold and displays a short scaling animation. 0:36
    There are a few things that should happen. 0:44
    When the app loads and all player scores are 0, there is no highest score. 0:46
    So all the icon should be a light gray. 0:51
    We should see the change only when a player takes the highest score or 0:55
    when they're tied for the highest score. 0:59
    Now if the player with the highest score is removed from the scoreboard, 1:03
    then the player or players with the next highest score gets the gold crown. 1:08
    You can copy the SVG to display the crown icon from the teacher's notes 1:14
    with this video. 1:18
    In the file index.css, I've included styling for 1:21
    the SVG in a class named is-high-score that changes the SVG 1:25
    fill color to gold and triggers the scaling animation. 1:30
    As you can see here in DevTools, if a player has the highest score, 1:38
    the class is-high-score gets added to the SVG element. 1:43
    Otherwise, the SVG doesn't get a high score class. 1:48
    That should give you a hint. 1:51
    You have all the information you need to determine the highest score 1:53
    in the player state. 1:57
    You'll need to figure out how to get and 1:59
    update the highest score with each score change. 2:02
    Then pass that information to a player, and eventually the SVG element. 2:07
    When working with React, you'll find that most of the time, 2:12
    you're just writing plain JavaScript. 2:16
    So like with JavaScript, 2:18
    there might be a few different ways to build the exact same thing in React. 2:20
    There's likely many ways you can build the highest score feature. 2:24
    So I encourage you to experiment with different approaches. 2:28
    And don't forget to share your solution with the Treehouse community. 2:32
    You can see my solution in the next step. 2:37
    Hopefully, this course helped you understand React at a deeper level. 2:40
    We've only scratched the surface of the power React can provide when building 2:45
    applications of any size. 2:49
    There's a lot more to learn about React. 2:51
    It has a vibrant helpful community, and new features and 2:55
    improvements to React's API are released frequently. 2:58
    Check the teacher's notes to see a list of what you might learn next and 3:02
    links to more Treehouse courses and workshops on React. 3:06
    If you have questions about anything in this course, 3:10
    feel free to reach out to the Treehouse staff or other students in the community. 3:13
    Thanks, everyone, and happy reacting. 3:18

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

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up