React

Modern javascript front-end library for rendering HTML and building rich user interfaces.
Launched in 2013 and maintained by FaceBook. React is not a framework, it is just the View in an MVP architecture.
Focuses on reusable components which are very easy to maintain.
Uses a Virtual DOM that makes it extremely fast.
Gives you a lot of flexibility and is relatively easy to learn.
There are two main concepts: Properties and State.
JSX is a syntax extension to JavaScript (optional).
Both Outlook.com and Script Lab are written using React.

link - reactenlightenment.com/

Components

Think of a component as a simple function
A JavaScript function takes input arguments and can return a value.
A React component takes properties and state and returns a user interface description
A component can have a private state that can change over time
Properties are called props.
If we want to override the constructor we have to pass 'props' to super

Functional vs Class

A component can either be a function component or a class component
React supports two types of components:
Functional - (or stateless) - used to isolate state management
Class
A functional (or stateless) component is a function which takes props as an argument and returns a React element.

Function Component

const MyComponent = function(props) { 
   return ( 
      <h1> 
         React { props.version || 1 } Notes 
      </h1> 
   ); 
}; 

This is equivalent to

const MyComponent = (props) => { } 

Class Component

class MyComponent extends React.Component { 
   render() { 
      return ( 
      <h1> 
         React { this.props.version || 1 } Notes 
      </h1> 
      ); 
   } 
} 

Constructors

class Button extends React.Component { 
   constructor(props) { 
      super(props); 
      this.state = { counter : 4 }; 
   render() { 
   } 
} 

This is equivalent to

class Button extends React.Component { 
   state = {counter : 4 }; 
   render() { 
   } 
} 

props are immutable
state is mutable

currentTime : (new Date).toLocalTimeString();