ES6 Class component for React

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 (

				<div>
					<ul>
						<li> Product Name :{this.props.name} </li>
						<li> Unit Price : {this.props.unit_price} </li>
						<li> Qty{this.props.qty} </li>
					</ul>
					<div> Total Discount {this.calculateDiscount(this.props.discount)} </div>
				</div>
			)
	}
})

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 (

<div>

<ul>

<li> Product Name :{this.props.name} </li>

<li> Unit Price : {this.props.unit_price} </li>

<li> Qty{this.props.qty} </li>

</ul>

<div> Total Discount {this.calculateDiscount(this.props.discount)} </div>

</div>

)

}

})

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 (

				<div>
					<ul>
						<li> Product Name :{this.props.name} </li>
						<li> Unit Price : {this.props.unit_price} </li>
						<li> Qty :{this.props.qty} </li>
					</ul>
					<div> Total Discount {this.calculateDiscount(this.props.discount)} </div>
				</div>
			)
	}
}