« Previous Tutorial Next Tutorial »

Welcome back, everyone. In the last tutorial, we built an extremely simple React test component, which is great, but it’s important that we understand how components work and connect with one another. React does a ton of stuff under the hood to make our lives easier, and understanding it will help us use it to our advantage.

If you’ve read up on React at all, one of the things you’ve probably heard mentioned is the concept of “props.” This word, which is derived from “properties” is React’s term for various values that are handed down from parent component to child component. What this looks like in practice is like you’re adding an attribute to your JSX component tag. For example, our test component tag, here on line 6 of /src/index.jsx. Let’s add a prop to that. Here’s how we do it. Take this line:

<TestComponent />,

and change it to this:

<TestComponent headline="Test Headline" />,

There you go, you’ve added a prop. This will get passed down to /src/testcomponent.jsx, and we can work with it there. Props can be all of the basic JavaScript types: strings and numbers, booleans, objects and arrays, etc. They are always passed down from parent to child (there are ways of communicating from a child component to the parent, but the practice is not generally encouraged). They should not be modified in the child components, only used … but we’ll get to that.

For now, let’s switch to /src/testcomponent.jsx and modify it to use the prop we’re now sending. Open up the file, and make two changes, first, find line 3:

export default function TestComponent() {

and change it to the following:

export default function TestComponent(props) {

The secret truth is that React has been passing a props object to our function even though we didn’t have any props defined (and hadn’t written our function to accept it). We’re just adding a function parameter so we can actually use the props in the component.

Now change line 6 from:

<h1>React Test Component</h1>

to:

<h1>{props.headline}</h1>

The curly braces are how you tell React that you want to do some JavaScripting in your return block. There are limits to what can be done here, and we’ll explore them later, but one thing that’s nice is you don’t have to bother with document.write or anything. If you’re just printing out a value, you can just wrap your variable in curly braces and it’ll output.

ESLint is going to complain here, because it wants us to be doing type-checking on our props in order to make sure that a prop that’s supposed to be a number is a number and not an array, or that a boolean is actually true or false instead of the words “true” or “false.” React used to have basic type-checking for props available by default, but as type-checking approaches like TypeScript and Flow have become more popular, it was moved to its own module. We're not going to worry about type checking in this course. Let’s turn it off in ESLint by opening .eslintrc, adding a comma at the end of line 10, and then just below it typing the following:

"react/prop-types": [0]

Save that file, switch back to /src/testcomponent.jsx, and do the old space, delete, save routine, and the error will go away. Cool. Now let’s add a second and third prop, and actually do more with it than just printing out a string. Switch back to /src/index.jsx and add a couple more props to our test component, so it looks like this:

<TestComponent headline="Test Headline" count={1234} showCount />,

As you can see, we’re using curly braces to pass a number because if we used quotes it’d show up as a string. We’re also passing showCount with no value since it’s a boolean – if it exists, it’s true. If not, it’s false. Switch back to /src/testcomponent.jsx.

Now … we could reference each prop as an object property in the same way we’re doing it with props.headline, but let’s use variable destructing instead. Just below your function declaration on line 3, add the following:

const { headline, count, showCount } = props;

Woo, destructuring! Now we have three variables available to us that we’ve pulled from our props without having to type props. every time we need them.

Now you can change the header line to:

<h1>{headline}</h1>

Below that, add the following:

{ showCount ? <p>{count}</p> : null }

What we have there is a ternary operator, which is a single-line JavaScript solution for “if a condition is met, do one thing, otherwise do another thing,” and which we’ll be using a lot in React because JavaScript inside return blocks can’t span more than a single line, so if / else routines aren’t available to us here (there are ways to get around this, and we’ll cover them later). In this case, our ternary operator is saying “if the showCount prop exists, produce some HTML with the count in it, otherwise do nothing.”

If you’re unfamiliar with ternary operators, Codecademy has a pretty great course that’ll get you started with them.

Now that we’re passing props from parent to child and using it, let’s take a look at localhost:3000, refresh it, and watch our text show up … or not so much. Remember, any time we make changes to our React app, we have to recompile it with Webpack. It’s very possible that at this moment you are staring, jaw agape, at your screen and thinking, I’m going to have to type something in the command line and watch it compile every single time I make any changes whatsoever to this app?

Well, no! Not in the long run, because we’re going to install a hot-reloader for Webpack in the next tutuorial. But bear with me for now. Hit your terminal window or command prompt and type:

yarn run build-dev

This’ll run our webpack build, which should run without errors. If you get any, check for typos! Once it’s done, flip back to localhost:3000 and refresh. Hey, look at that, we’re using our passed props. Nice.

Now let’s get Webpack to rebuild automatically when we make changes. Catch you in the next tutorial!

« Previous Tutorial Next Tutorial »