bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/React/React Core
React•React Core

React ES6 Classes

Classes

ES6 introduced classes.

A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class , and the properties are assigned inside a constructor() method.

A simple class constructor

class Car {
 constructor(name) {
 this.brand = name;
 }
}

Notice the case of the class name. We have begun the name, "Car", with an uppercase character. This is a standard naming convention for classes.

Now you can create objects using the Car class:

Example

class Car {
  constructor(name) {
    this.brand = name;
  }
}
const mycar = new Car("Ford");

Note

The constructor function is called automatically when the object is initialized.

Method in Classes

You can add your own methods in a class:

Example

class Car {
  constructor(name) {
    this.brand = name;
  }
present() {
  return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();

As you can see in the example above, you call the method by referring to the object's method name followed by parentheses (parameters would go inside the parentheses).

Class Inheritance

To create a class inheritance, use the extends keyword.

A class created with a class inheritance inherits all the methods from another class:

Example

class Car {
  constructor(name) {
    this.brand = name;
  }
present() {
  return 'I have a ' + this.brand;
}
}
class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }
show() {
  return this.present() + ', it is a ' + this.model
}
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

The super() method refers to the parent class.

By calling the super() method in the constructor method, we call the parent's constructor method and get access to the parent's properties and methods.

To learn more about classes, check out our JavaScript Classes section.

Previous

React ES6

Next

React ES6 Arrow Functions

This chapter

Overview
45

Lessons

142m

Read time

1. React Tutorial2. React Introduction3. React Getting Started4. Your First React App5. React Render HTML6. Upgrade React7. React ES68. React ES6 Classes9. React ES6 Arrow Functions10. React ES6 Variables11. JavaScript Array map()12. React ES6 Destructuring13. React ES6 Spread Operator14. React ES6 Modules15. React ES6 Ternary Operator16. React ES6 Template Strings17. React JSX18. React JSX Expressions19. React JSX Attributes20. React JSX If Statements21. React Components22. React Class Components23. React Props24. React Destructuring Props25. React Props Children26. React Events27. React Conditional Rendering28. React Lists29. React Forms30. React Submit Forms31. React Forms - Textarea32. React Forms - Select33. React Forms - Multiple Input Fields34. React Forms - Checkbox35. React Forms - Radio36. React Portals37. React Suspense38. Styling React Using CSS39. React CSS Modules40. React CSS-in-JS41. React Router42. React Transitions43. React forwardRef44. React Higher Order Components45. React Sass Styling

On this page

ClassesMethod in ClassesClass Inheritance