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);


© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext