ES6 classes in React

Linked Projects:

Calreact
 

Lesson links:

Lesson code - https://github.com/learnetto/calreact/tree/lesson-4.1-4.3

Now that we’ve had a glimpse of what ES6 looks like, we’re going to change all our app components code from ES5 to ES6. And we’ll do that one component at a time.

Let’s remove the label component from the form component.

Now let’s start off by changing the individual appointment component. We’re starting with the smallest component and will work upwards to bigger and bigger components. It’ll be easier because the small components don’t have any user input or state to deal with. 

Let’s make a new file for this component and save it as appointment.es6.jsx.

We need to make a class Appointment that extends React.Component. And then we can simply copy and paste the render method, without the :function bit.

Appointment component in ES6

This is known as a concise method in ES6.

Now let’s delete the old jsx file and make sure our ES6 version works in the browser.

Next, let’s do the appointments_list component.

Let’s edit the existing file directly. Change the var to a sub-class of React.Component.
AppointmentsList component in ES6


Again, let’s try out the form to make sure it still works.

Next, let’s do appointment_form. This component has a few more methods in addition to render, so it’s a bit more complicated.

Let’s start by changing the the var which calls React.createClass to a class that extends React.Component. What we’re doing is instead of creating a component by passing an object to React.createClass, we’re using a subclass of React.Component.

Now let’s remove the function keywords. Also, we don’t need the commas in between function definitions because these are not object properties or methods. They are just functions.
AppointmentForm in ES6


Now if we try the form in the browser, it fails with a bunch of warnings.

Warnings!

Let’s look at the first one:
Cannot read property ‘onUserInput’ of undefined.

The reason for this warning is that in ES6, when you pass a function to other components, the this keyword is not bound to the right context. 

So we need to bind it to the right outer context by adding a call to .bind(this) to the handleSubmit, handleChange and setApptTime functions:
Bind the form handling function calls to the right outer context


Now when we try submitting the form again, the warnings disappear and our form works again.

Now, let’s use another ES6 feature called constants, (also known as "immutable variables”). Constants are block-scoped and their value cannot change through re-assignment.

So, whenever we have a variable that we know we don’t need to change, we can use a constant. 

So, let’s change all the variable definitions in AppointmentForm to constants. We just need to replace the keyword var with const.

And finally, we have the Appointments container component, which is again a bit more complicated because it also manages the state of our app.

So let’s start by making it a class, change the functions to concise functions, and remove the commas between them.

Here we’ll see one big change with ES5 components. We don’t use getInitialstate in ES6 to initialise the component state.

Instead we use the constructor of the class and set the state inside that. It first calls super() with the props, which calls the constructor of the parent class.

Then we can initialise the state by just setting this.state to the value we used in getInitialState.
Use the class constructor to initialise component state in ES6

And finally, we’re also passing some functions - handleUserInput and handleFormSubmit - to other components. So let’s bind them to the right context by using .bind(this).

 Bind functions passed to other components to the right context

Now let's try the app in a browser and make sure we can still make an appointment and it appears in our appointments list in the correct order. So we’ve successfully converted our ES5 components into ES6 components.

Liked this tutorial? Get more like this in your inbox