Introducing the Practice

[MUSIC] 0:00 Hey everyone. 0:09 Gil here. 0:10 It's time for practice. 0:10 Practice helps make what you've learned stick but 0:12 also helps you become a faster and better developer. 0:14 In this workshop, 0:17 you're going to sharpen your React skills by practicing JSX, creating and 0:17 rendering components, passing down props, as well as iterating over data and more. 0:22 This practice exercise is a follow-up to the Introducing Props stage of 0:27 the React Basics course. 0:31 If you haven't watched that stage yet, 0:33 I suggest that you watch it before trying this practice challenge. 0:34 I've added the link to the course and the teacher's notes. 0:37 You've learned that React is a JavaScript library for building user interfaces. 0:40 It lets you build your application's UI by breaking it up into smaller, 0:44 usable pieces of code called components. 0:48 So you're going to build and 0:50 generate this awesome planet cards as components using React. 0:52 To get started launch the workspace with this video or 0:56 download the project files and open them in your favorite text editor. 0:59 I've included HTML, CSS, images and a JavaScript file for this exercise. 1:02 In index.html, I've provided the links to React, ReactDOM, and 1:08 the Babel transpiler at the bottom of the file. 1:13 You're going to write your React code inside the file app.js. 1:16 Now let's walk through what you'll need to do. 1:20 App.js currently contains an array of objects assigned to the constant planets. 1:21 Each object has properties that describe a planet, like name, diameter, moons, 1:29 description. 1:33 And it has a URL property that points to an image located in the image folder. 1:34 In index.html, I included a comment 1:40 that shows an example of the markup you'll need to use to create a planet card. 1:43 Just below the planet array in app.js, you will create two components, 1:49 a Planet component that renders a planet card, and 1:54 a container component, that iterates over the planet's array and 1:58 renders a planet component for each object in the array. 2:03 You will need to pass the planet's data to the main container, 2:07 then pass that data down to the planet card using props. 2:11 You should use the commented out markup in index.html as a reference for 2:15 how to display the data. 2:19 The only text that should not be dynamic is the h3 with the text, 2:21 Planet Profile, and the text between the strong tags. 2:26 Everything else needs to be displayed with props. 2:30 Finally, to display the planet cards, 2:32 you will need to render the main container component to the DOM. 2:34 This exercise is a great way to practice what you've learned so far about React. 2:39 So good luck, have fun. 2:44 And in the next video, I'll walk you through one solution. 2:45