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: Solution

7:18 with Laura Coronel

Let's go over one solution to the React challenge.

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>

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

    You can watch my solution, compare it to what you wrote and 0:00
    then try to recreate it yourself. 0:01
    First, let's create a new file named icon.js. 0:05
    We'll import react, at the top of the file, and 0:10
    create a function component named Icon. 0:13
    Our component will render the SVG element, 0:16
    that was provided in the teachers notes below. 0:19
    And at the bottom, we'll export our component. 0:23
    To apply the gold fill color and scaling animation to the crown, 0:27

    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