Components

React components allow you to reuse and organise the code in your React application.
A React component can be created in two ways.
Either using a regular JavaScript function or by creating a class.

Components - Functional

These are JavaScript functions that accept a single 'properties' argument and return a React element.

// Without JSX 
function HelloWorld_fun(props) { 
   return React.createElement('h1', null, props.name)  
} 
var rElement = React.createElement(HelloWorld_fun, {name: 'Hello World'}, null); 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement); 

// Using JSX 
function HelloWorld_fun(props) { 
   return <h1>{props.name}</h1> 
} 
var rElement = < HelloWorld_fun name='Hello World' />; 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement); 

// Using ES 2015 
var HelloWorld_fun = ({name}) =>  <h1>{name}</h1>; 
var rElement = < HelloWorld_fun name='Hello World' />; 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement); 

Components - Class

// Without JSX 
var HelloWorld_class = React.createClass ( { 
   render : function() { 
      return React.createElement('h1', null, this.props.name)  
   } 
} ); 
var rElement = React.createElement(HelloWorld_class, {name: 'Hello World'}, null); 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement); 

// Using JSX 
var HelloWorld_class = React.createClass ( { 
   render : function() { 
      return <h1>{this.props.name}</h1>; 
   } 
} ); 
var rElement = < HelloWorld_class name= 'Hello World' /> 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement); 

// Using ES 2015 
class HelloWorld_class extends React.Component { 
   render () { 
      return <h1>{this.props.name}</h1>; 
   } 
}; 
var rElement = < HelloWorld_class name= 'Hello World' /> 
var dElement = document.getElementById('app');  
ReactDOM.render(rElement, dElement);