What's With All the Props Anyway?

#react #webdev #javascript #beginners

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>
    )
  }
}

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.

The Layers of Javascript

Laurie ・ Mar 26 '19

#javascript #learning #react

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>;
  }
});

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 {
    ....
}

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.

Exports and Imports and Defaults, Oh My!

Laurie ・ Apr 29 '19

#javascript #react #webdev #beginners

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)
  }

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)

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)

Florian Rand • May 7 '19

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;

Great article btw!

Laurie • May 7 '19

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!