Components in React are just like functions in JavaScript. Components without E6 are just like components with E6. They can be rendered, composed and extracted.

Types of React Components:

Functional Component / JavaScript Function

In React, a functional components can be written in two ways:

//Regular Function
function FunctionalComponent(props) {
   return <h1>This is an example of a functional component, {props.name}<h1/>
}

//OR

//Arrow Function
const FunctionalComponent= (props) => {
   return <h1>This is an example of a functional component, {props.name}<h1/>
}

Class Component

class ClassComponent(props) extends React.Component
{
    render()
    {
         return <h1>This is an example of a class component, {props.name}<h1/>
    }
}

Rendering a component

• A component should always start with a capital letter or else it would be mistaken for a HTML or DOM tag.

HTML/DOM tags ->  <div/>
Component         -> <Bear/>
User-defined component -> <Bear name="Tenderheart"/>

Composing a component

• A component can refer to another component.

function Favourite(){
    return <h1>Shelly's favourite bear is <Tenderheart />  </h1>
}
function Tenderheart() {
  return (
    <p>Tenderheart</p>
  );
}

Components can accept arguments and these arguments are known as props (short form of properties).

Extracting a component

• A LARGE component can be split into smaller components.

#supposedtobecontentforMay8