Create a Reusable React Component
Components are at the core of building applications with React. In this lesson, we'll start with some static JSX markup and refactor it into a component that can be reused. We'll see how a React component is mostly "just JavaScript" when we use a JavaScript function to create that component. We'll also look at props in React and how we use props to configure specific instances of a component.
Andy Van Slaars: [0:00] I want to take this representation of one of our flashcards and turn that into a reusable component so that we can use that to represent each of the flashcards in our application. In source, I'm going to add a new folder. I'm going to call it "Components." In this Components folder, I'm going to add a new file. I'm going to call this, "cardPreview.js."
[0:25] The first thing I'm going to do in this file is I'm going to import React from react. This is because we need React to be in scope because our JSX is going to get transpiled in the function calls for React.createElement. We want to make sure React is in scope of this file once it's built.
[0:41] Then we're going to export our component, which is going to be a function called cardPreview. We want this function to return the JSX for our component. We're going to return. Then we're going to go back to app.js. I'm going to grab this entire div with the class name of tile. I'm going to cut it from app.js. I'm going to paste it right into the return for cardPreview. I'll save that.
[1:13] In app.js, I'm going to replace that markup that I just cut with a reference to cardPreview. We'll just use our function name in our JSX like this. In order for this to work, we just need to make sure we've imported it.
[1:28] I'm going to add an import statement at the top of the file. I'm going to grab cardPreview. It's in curly braces because this is a named export from...It's going to be the path to components/cardPreview. We'll save that.
[1:47] Now if we look in the browser, we should still see the card showing up. If I go back to app.js I can come down here and prove that this works by duplicating this a couple times. Now our HTML should output three of that same card. I'll take those duplicates out. Having multiple copies of a flashcard with a static term and definition isn't really going to do us much good.
[2:14] We need a way to pass data into our component. The way we do that in React is through props. On this cardPreview element, I'm going to pass in a term. The term is going to be the question for our flashcard. We'll do an easy one. I can save that.
[2:32] If we look in the browser, this is going to have no effect because this prop isn't doing anything in our component yet. When I go back over here, I'm going to open up cardPreview. In my cardPreview function, I'm going to accept a single argument called props.
[2:47] Props is going to be an object where this term attribute that we passed here, this prop, is going to be a key on this props object. We'll be able to come in here. Instead of this hard-coded term, we'll be able to switch from JSX to JavaScript expressions with curly braces.
[3:05] Then inside this curly brace, we'll be able to reference props.term. I'll save this. I'm going to come back over to the preview. You'll see that our question has now shown up in our component. I'm going to come back over to app.js. Now I'm going to create two more. We'll just switch out the animals here, save it.
[3:30] If I go back to the browser, we'll see that we have three instances of our component, each one with a different term based on the prop that's being passed into it.