DEV Community

Cover image for What's With All the Props Anyway?
Laurie
Laurie

Posted on

What's With All the Props Anyway?

Welcome back to Boilerplate Basics! Today I'm going to dive into component creation in React.

In React, our pages are made up of components. These are self-contained reusable pieces of code that we can include throughout our application.

This is an example of the syntax used to define a component.

class App extends Component {
  constructor(props) {
    super(props)
  }
  render() { `
    return (
      <h1>My fun post!</h1>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

ES6 and Classes

To start, it's important to know that React has always operated using a class concept. This is interesting because prior to ES6 the ECMAScript standard did not support the concept of classes.

If you're not familiar with the relationship between ECMAScript, JavaScript and Frameworks check out this post.


At that time, React used a workaround to define classes. Something like this.

const MyComponent = React.createClass({
  render() {
    return <p>I am a component!</p>;
  }
});
Enter fullscreen mode Exit fullscreen mode

However, when ES6 came along it introduced a class concept that was native to Javascript. Now, components can be defined by building on top of it.

import {Component} from "react"

class App extends Component {
    ....
}
Enter fullscreen mode Exit fullscreen mode

What this code is doing is taking the class concept in ES6 and extending it using another class defined by the React library, Component. The Component class is imported up top.

If you want more information about this import syntax you can find it here.


Quick aside about Render

As it turns out, the only thing a React class component needs to include is a render method. This is the method that tells your application what this component is actually meant to display on screen. Everything else defined in a component is extra.

However, for many components, just a render function does not support the level of functionality the developer is seeking. That's where the constructor (and additional user-defined functions) comes in.

Constructor? Props?

Inside our Component, we have the ability to write a constructor.

  constructor(props) {
    super(props)
  }
Enter fullscreen mode Exit fullscreen mode

This code snippet can be found in React tutorials, it will not be generated by the cli itself.

  • constructor is the function that defines what happens upon creation of this component. In more detail, this is a special function given to us by an ES6 class and it will be the first piece of code invoked when the class is initialized.

  • props is passed into the constructor so that its content can be referenced inside the class. In React this is how components are able to pass information around.

This super stuff is a bit weird

Ok, now inside our constructor we have this line of code.

super(props)
Enter fullscreen mode Exit fullscreen mode

There are a few things happening here. The first is that when we invoke the constructor function we'll call super. This executes setup code for our component that is stored in the constructor function of the Component class that we're extending!

Now, if we pass props into super() we're able to use this to reference props inside the constructor function. React recommends doing this as a default best practice. Technically, if you never reference this.props in the constructor you don't have to. However, it is the recommendation.

Component Constructed!

And that's everything. We have defined a new React component and provided the boilerplate code we need for it to initialize correctly. We can now pass props, write rendering code, etc.

As I'm fond of saying, too often we see throwaway lines of code inside frameworks and projects that we don't take the time to understand. I encourage you to curiously explore everything you see! It'll make you a better programmer.

Keep an eye out for upcoming Boilerplate Basics posts!

Top comments (9)

Collapse
 
flrnd profile image
Florian Rand

Just want to mention that not every time we need to pass props. That's why functional components exist, like this one:

import React from 'react';

const Card = ({ id, name, email }) => (
  <div className="card-container">
    <img alt="Robot" src={`https://robohash.org/${id}?200x200`} />
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  </div>
);

export default Card;
Enter fullscreen mode Exit fullscreen mode

Great article btw!

Collapse
 
laurieontech profile image
Laurie

Absolutely! And a great thing to point out. I wanted to focus on the boilerplate code in the cli and tutorials, but you're 100% correct that it can be overkill, and it's good to know about the alternatives!

Collapse
 
flrnd profile image
Florian Rand

I wasn't sure to leave the coment precisely because I thought about that too! But then I thought it's a good adition to your article 😁🖖

Thread Thread
 
laurieontech profile image
Laurie

Always leave the comment! Extra content in commens is what I live for :)

Collapse
 
maxwell_dev profile image
Max Antonucci

I'm certainly guilty of writing this part of a React component many times without understanding it myself 💧

Collapse
 
laurieontech profile image
Laurie

We all are. We listen to the tutorials that say "use this line". There were definitely things I looked up to write about this too!

Collapse
 
jfreal profile image
John Farrell

Thanks for this explanation. I've been learning react and having the same concepts explained a variety of is great. Loved your take on it.

Collapse
 
jeikabu profile image
jeikabu

I don't know anything about JavaScript/web-stuff, but I approve of "Whose Line is it Anyway"!
That is all.

Collapse
 
laurieontech profile image
Laurie

Why thank you!