What's With All the Props Anyway?
Tags: react, webdev, javascript, beginners
Published: 2019-05-07 12:09:11

---
title: What's With All the Props Anyway?
published: true
description: Another day, another piece of boilerplate code that we should explore!
tags: react, webdev, javascript, beginners
cover_image: https://www.tvinsider.com/wp-content/uploads/2018/10/WL512a_0002.jpg
series: Boilerplate Basics
---
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.
```jsx
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. {% link https://dev.to/laurieontech/the-layers-of-javascript-15op %}

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

```jsx
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.

```jsx
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.
{% link https://dev.to/laurieontech/exports-and-imports-and-defaults-oh-my-fa3 %}

# 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. 

```jsx
  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.

```jsx
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!