Functional Component in React

This blogpost continues series of posts exploring React components. It describes Functional Component - one of building blocks in React application.

Purpose of Functional Component

It is a building block of every React application, a reusable and independent piece of code written to perform a particular task.

Creating Functional Component

This component is called functional because its a JavaScript function.

We create functional component in 2 ways:

1. Normal JavaScript function

• keyword function
• name of component - should be capital letter
• parameters - accepts props
• return - returns React element

Example:

function MyComponent(props) {  return <h1>Some {props.text}</h1>;}

2.Arrow ES6 function

• keyword const
• name of component - should be capital letter
• parameters - accepts props
• return - returns React element

Example:

const MyComponent = (props) => {  return <h1>Some {props.text}</h1>;}

Usage of Functional Component

Before React hooks, functional components have been called stateless because the state was only declared in class-based components (we will explore them in my next blogpost). Also there were some lifecycle methods available only in class-based components.

With the release of hooks we can use functional component anywhere we want, we just need to know which hook to use and where.

Why it's a good thing to use functional components:

• they are easy to construct and understand
• they are easy to test and debug
• they are highly reusable
• and they don't have THIS! :)

Thank you for reading my blog. Feel free to connect on LinkedIn or Twitter :)