ES6 Class component for React

Last Updated: January 7, 2018

You can use ES6 to create ReactJS component.
We will create the following code in ES6 syntsax

import React from 'react'
var createReactClass = require('create-react-class');

export const Product = createReactClass({

	
    calculateDiscount(discount){
       return discount/100*this.props.unit_price*this.props.qty
    },


	render(){
		return (

				
  • Product Name :{this.props.name}
  • Unit Price : {this.props.unit_price}
  • Qty{this.props.qty}
Total Discount {this.calculateDiscount(this.props.discount)}
) } })

You can see the following code snippet which I have rewritten with ES6 syntax. Here I am extending the React.component to create your Product component. You can see it at line 4

import React from 'react'


export class Product extends  React.Component{

	
    calculateDiscount(discount){
       return discount/100*this.props.unit_price*this.props.qty
    }


	render(){
		return (

				
  • Product Name :{this.props.name}
  • Unit Price : {this.props.unit_price}
  • Qty :{this.props.qty}
Total Discount {this.calculateDiscount(this.props.discount)}
) } }