Functional Components

These are essentially just JavaScript functions.
This type of component should be used to present the UI inside a React application.
They accept a single argument (props) and return a React element.

const Welcome = (props) => { 
    return <h1>Hello,{ props.name }</h1>; 
} 

Function Component

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

This is equivalent to

const MyComponent = (props) => { } 

Components always start with a Capital Letter.
Create components that represent exactly one piece of your data model.

Step 1 - Define Hiearachy

Arrange components in a clear hierarchy.

Step 2 - Build Static UI

Build a version that takes your data model and renders a static UI (no interactivity).
The component at the top of the hierarchy will take your data model as a Prop.
Build components that reuse other components and pass data using Props.
Do not use State to build this static version

Step 3 - Understanding State

Add State to make your component interactive.
You need to be able to trigger changes to the underlying data model.
Identify all the different pieces of data in your components.
Work out which pieces of data are State.
If the data can be computed from a Prop or from another State then it is not State.

Step 4 - Identify Ownership

Perform the following for each piece of State in the component.
*) Identify every component that renders something based on the State
*) Find a common owner component
*) Either the common owner or another component higher up in the hierarchy should own the State.
*) If you cannot find a component where it makes sense to own the State, create a component just for holding the State and add it above the common owner component.

Step 5 - Add Inverse Data Flow

Add support for data flowing the other way.
The components at the bottom of the hierarchy might need to update the State in components higher up.
This data flow has to be explicit.
Components should only update their own State.

A component lower down needs to pass a callback to the component higher up that will fire whenever the State should be updated.
This can be done using an OnClick event on the component higher up that can notify the component lower down.
This callback will call SetState() to update the component higher up.

Consider creating an IsOfficeInitialised and then pass this property into top level react component

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