React Basics(1)

Reference : programming for the web (Edx)

var HelloComponent = React.createClass ({
 render : function() {
   return (
      <h1>Hello, React!</h1>
	);
  }
});

ReactDOM.render(
	<HelloComponent />
	document.getElementById('container');
);

Same code in ES6 (more newer syntax) considered better because it lets you to extend and make a class.

class HelloComponent extends React.Comonent {
	render() {
		return (
			<h1>Hello, React!</h1>
		);
	}

}

ReactDOM.render(
	<HelloComponent />
	document.getElementById('container');
);

Also, render is the function which is called to

There are two things to keep in mind, are properties and state.
Properties => attributes and values that are set when the component is created, and it should not be modified after initialization.

State => attributes and values that represent the current state of the component, based on what it does/represents and it can be modified during the component’s lifecycle

Example of using props :

ReactDOM.render(
	<HelloUser name="Maria" />,
	document.getElementById('container')
);

class HelloUser extends React.Component {
	render() {
		return (
			<h1>Hello {this.props.name}!!</h1>
		);
	}
}