{"id":4176,"date":"2023-05-01T02:54:21","date_gmt":"2023-05-01T02:54:21","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4176"},"modified":"2023-06-10T11:30:53","modified_gmt":"2023-06-10T11:30:53","slug":"react-ecmascript-6-tutorial-using-classes","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-ecmascript-6-tutorial-using-classes\/","title":{"rendered":"React – ES6 Tutorial – Using Classes"},"content":{"rendered":"

What is ES6?<\/em><\/h2>\n

ES6 stands for ECMAScript 6.<\/em><\/p>\n

ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.<\/em><\/p>\n

Classes<\/h2>\n

ES6 introduced classes.<\/p>\n

A class is a type of function, but instead of using the keyword\u00a0function<\/code>\u00a0to initiate it, we use the keyword\u00a0class<\/code>, and the properties are assigned inside a\u00a0constructor()<\/code>\u00a0method.<\/p>\n

Example<\/h3>\n

A simple class constructor:<\/p>\n

class Car {\r\n  constructor(name) {\r\n    this.brand = name;\r\n  }\r\n}<\/pre>\n
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.<\/strong><\/span><\/p>\n
Now you can create objects using the Car class:<\/p>\n
\n
Example<\/h3>\n
Create an object called “mycar” based on the Car class:<\/p>\n
class Car {\r\n  constructor(name) {\r\n    this.brand = name;\r\n  }\r\n}\r\n\r\nconst mycar = new Car(\"Ford\");<\/pre>\n
Note:\u00a0The constructor function is called automatically when the object is initialized.<\/span><\/strong><\/p>\n
Method in Classes<\/h2>\n
You can add your own methods in a class:<\/p>\n
\n
Example<\/h3>\n
Create a method named “present”:<\/p>\n
class Car {\r\n  constructor(name) {\r\n    this.brand = name;\r\n  }\r\n  \r\n  present() {\r\n    return 'I have a ' + this.brand;\r\n  }\r\n}\r\n\r\nconst mycar = new Car(\"Ford\");\r\nmycar.present();<\/pre>\n
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).<\/p>\n
\n
Class Inheritance<\/h2>\n
To create a class inheritance, use the\u00a0extends<\/code>\u00a0keyword.<\/p>\n
A class created with a class inheritance inherits all the methods from another class:<\/p>\n
\n
Example<\/h3>\n
Create a class named “Model” which will inherit the methods from the “Car” class:<\/p>\n
class Car {\r\n  constructor(name) {\r\n    this.brand = name;\r\n  }\r\n\r\n  present() {\r\n    return 'I have a ' + this.brand;\r\n  }\r\n}\r\n\r\nclass Model extends Car {\r\n  constructor(name, mod) {\r\n    super(name);\r\n    this.model = mod;\r\n  }  \r\n  show() {\r\n      return this.present() + ', it is a ' + this.model\r\n  }\r\n}\r\nconst mycar = new Model(\"Ford\", \"Mustang\");\r\nmycar.show();<\/pre>\n
The\u00a0super()<\/code>\u00a0method refers to the parent class.<\/p>\n
By calling the\u00a0super()<\/code>\u00a0method in the constructor method, we call the parent’s constructor method and get access to the parent’s properties and methods.<\/p>\n
To learn more about classes, check out our\u00a0JavaScript Classes\u00a0section.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
What is ES6? ES6 stands for ECMAScript 6. ECMAScript was created to <\/a><\/p>\n","protected":false},"author":1,"featured_media":4376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[508,12],"tags":[511,510,491,509,513,512],"newstopic":[578],"class_list":{"0":"post-4176","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"category-web-development","9":"tag-ecmascript-6","10":"tag-es6-tutorial","11":"tag-javascript","12":"tag-react","13":"tag-react-classes","14":"tag-react-tutorial","15":"newstopic-react"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4176","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=4176"}],"version-history":[{"count":4,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4176\/revisions"}],"predecessor-version":[{"id":4180,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4176\/revisions\/4180"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4376"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=4176"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=4176"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=4176"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=4176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}