Introduction to React Components

React Components

Components are reusable and independent bits of code.

React Components come in two types 

1. Function Components
2. Class Components

The React Components name must start Upper Case Letter

• Class Component 

The Class Component must include the extends React.Component statements this creates an inheritance to React.Component and give access to React.Component functions

This Component method requires also requires a render() method that returns HTML 

EXAMPLE:

We can pass data from one class to another class component

It is more complex than Function Components

EXAMPLE:

• Function Components

Function Components are a Components that only contains a render() method and Do not have their own States

We can create a function that takes props as input and returns what should be rendered

EXAMPLE:

The function Component is also known as Stateless Component as they dont hold or manage State.

EXAMPLE:

• Components in Components

EXAMPLE: