Understanding Functional Component and Class Component

What are Components

Components are the building blocks of any react app, they allow you to split the ui into smaller pieces. Rather than building the whole ui inside a file, the ui can be split into different files otherwise called Components. This small pieces of ui can be reused and handled independently.

It is a combination of :

• Template using html
• User interactivity using Js
• Applying styles using css
• Types of Components in react

React has two types of components, functional(stateless component) and class(stateful). We’ll be looking at each type of component below

Functional(stateless) Component

A Functional component is simply a javascript function that accepts inputs which are properties(props) and returns a react element i.e JSX that specifies how a section of the user interface should appear.

Let us define a simple JavaScript function called Hello() which returns the How Are you JSX code. To pass this JSX into ReactDOM.render() we need to pass our Hello() function as into ReactDOM.render(). This has the same effect as above where the JSX is passed directly into ReactDOM.render() and gets rendered in the browser.

// This is a functional component
function Greeting() {
  return <h1>How Are you</h1>;
}

ReactDOM.render(<Greeting/>, document.getElementById('root'));

The code above can be rewritten using the es6 Arrow function expression as shown below

// This is a functional component
const Greeting => () {
  return <h1>How Are you</h1>;
}

ReactDOM.render(<Greeting/>, document.getElementById('root'));

Components written as such is referred to as functional(stateless) components.

Class(stateful) Component
Class component can be described as an ES6 class. The class component has a state and a lifecycle. In the older versions of React (version < 16.8), it was not possible to use state inside functional components. Therefore, functional components was majorly used for rendering UI only, whereas we’d use class components for data management and some additional operations (like life-cycle methods). With the introduction of React Hooks, and now we can also use states in functional components as well.

A Class Component:

• is an ES6 class, will be a component once it ‘extends’ a React component.
• takes Props (in the constructor) if needed
• must have a render( ) method for returning JSX

For Example:

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

ReactDOM.render(<Hello/>, document.getElementById('root'));

With the above explanation i explained functional components and class component in react. I hope this helps :)