[MUSIC]

Hey everyone.

Gil here.

It's time for practice.

Practice helps make what you've learned stick but

also helps you become a faster and better developer.

In this workshop,

you're going to sharpen your React skills by practicing JSX, creating and

rendering components, passing down props, as well as iterating over data and more.

This practice exercise is a follow-up to the Introducing Props stage of

the React Basics course.

If you haven't watched that stage yet,

I suggest that you watch it before trying this practice challenge.

I've added the link to the course and the teacher's notes.

You've learned that React is a JavaScript library for building user interfaces.

It lets you build your application's UI by breaking it up into smaller,

usable pieces of code called components.

So you're going to build and

generate this awesome planet cards as components using React.

To get started launch the workspace with this video or

download the project files and open them in your favorite text editor.

I've included HTML, CSS, images and a JavaScript file for this exercise.

In index.html, I've provided the links to React, ReactDOM, and

the Babel transpiler at the bottom of the file.

You're going to write your React code inside the file app.js.

Now let's walk through what you'll need to do.

App.js currently contains an array of objects assigned to the constant planets.

Each object has properties that describe a planet, like name, diameter, moons,

description.

And it has a URL property that points to an image located in the image folder.

In index.html, I included a comment

that shows an example of the markup you'll need to use to create a planet card.

Just below the planet array in app.js, you will create two components,

a Planet component that renders a planet card, and

a container component, that iterates over the planet's array and

renders a planet component for each object in the array.

You will need to pass the planet's data to the main container,

then pass that data down to the planet card using props.

You should use the commented out markup in index.html as a reference for

how to display the data.

The only text that should not be dynamic is the h3 with the text,

Planet Profile, and the text between the strong tags.

Everything else needs to be displayed with props.

Finally, to display the planet cards,

you will need to render the main container component to the DOM.

This exercise is a great way to practice what you've learned so far about React.

So good luck, have fun.

And in the next video, I'll walk you through one solution.