ES6 Class component for React

January 5, 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)}
) } }