The Road to React Mastery — Components and Props

Components and props are powerful tools that you’ll learn to carry in your React toolbelt. They begin to introduce customisable, repeatable and smart elements into your React site.

React Toolbelt

Ok great! Now, what are they?

We’ll start with components. In their simplest form, React components just look like a javascript function, that returns a string of JSX, and incorporates a random parameter called props (we’ll get to that later).

They can look something like this.

function RandomReactFunction(props) {
  return <p>{props.message}</p>;
}

Pretty simple right? Even in this form, React components are pretty damn powerful, especially once we begin to develop their props. However, you’ll often find components written in another form.

Just Rick. No explanation needed.

class RandomReactComponent extends React.Component {
  render() {
    return <p>{this.props.message}</h1>;
  }
}

This format looks way more complex, don’t be scared, it does the exact same thing as our function above, but it gives us a little more room to play with Reacts’ functionality.

How do we use components?

Following on from our RandomReactComponent class from before, to call and render a component, we use a new bit of syntax.

ReactDOM.render(
  <RandomReactComponent message="Hey there :)" />,
  document.getElementById('root')
);

The above snippet renders our message into the root of the HTML.

What about those prop things?

If you haven’t guessed already, props are essentially parameters, that are used as dynamic values for our React components. They’re pretty simple, but seeing as this is a ground-up tutorial, we’ll go over how to add multiple props to one component.

Let’s create a new component.

class Profile extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.name}</h1>
        <h3>{this.props.bio}</h3>
      </div>
    );
  }
}

Here we have a component that has two values in its’ props, name and bio. Assigning both of them can be done in multiple ways, but I’m a fan of the following method.

let props = {
  name:"Ethan Hansen",
  bio:"I'm a seventeen year old software developer!"
};
ReactDOM.render(
  <Profile {...props} />,
  document.getElementById('root')
);

However, you can also just use the normal syntax and separate the prop values by a space.

ReactDOM.render(
  <Profile name="Ethan" bio="I'm a seventeen year old software
  developer!" />,
  document.getElementById('root')
);

Both do the exact same thing, so choose whichever you best prefer.

Nested Components

Say you wanted to have a list of three top profiles. With props, you can do that easily, and encapsulate it into one big component.

function FeaturedProfiles() {
  return (
    <Profile name="Ethan" bio="17 Year Old Software Developer" />
    <Profile name="Adam" bio="18 Year Old Software Developer" />
    <Profile name="Rick" bio="Yes, I'm THAT Rick." />
  );
}
ReactDOM.render(
  <FeaturedProfiles />,
  document.getElementById('root')
);

Now all three profiles are nested within one big component. Simple clean, and intuitive.

So there you have it! A rundown of components and props in React. If you enjoyed this, make sure to stay tuned for more of my stuff. I’m posting every day!

Instagram — @ethosdevelopment

Twitter — @ethoshansen