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.
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.
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)
Just want to mention that not every time we need to pass props. That's why functional components exist, like this one:
Great article btw!
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!
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 😁🖖
Always leave the comment! Extra content in commens is what I live for :)
I'm certainly guilty of writing this part of a React component many times without understanding it myself 💧
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!
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.
I don't know anything about JavaScript/web-stuff, but I approve of "Whose Line is it Anyway"!
That is all.
Why thank you!