Understanding Component Types of ReactJS

What is a component?

Think about vehicle dashboard. There are various kind of indicators such as fuel meter, speedometer, accelerometer, etc. The dashboard (imagine as an application) make up with by adding all of these indicators (imagine as components). So, react components are piece of blocks which are made our UI of react application. These components are reusable. This is an advantage of using components. Component always returns React Element which are responsible for create UI. There are 2 types of components in react.

1. Functional Components
2. Class Components

Lets see one by one…

Functional Components

Functional components are regular JavaScript functions which are take arguments as props or not taking arguments and simply return JSX element. JSX stands for JavaScript xml which are describe how the UI should look like. Lets see how functional Components works…

Lets create first component for return Header “Hello World” …

Functional component without props and return Hello World header

This snippet shows how to import HelloWorld component to App.js and how to use it

This is the final output of the application

Now we know how to create a simple functional component and how to use it in our React Application.

Next we will see how to pass data through props to the functional component.

This code different from the above HelloWorld.js. The thing is we use props here as an argument. And then we call props.name inside curly braces to get passed data through props.

In here we send name props to the HelloWorld Component.

This is the final output of the above code snippet.

Class Components

First we will see how class component looks like.

React Class Component

Mainly class component syntactically differ from functional component. Class component have class keyword and always extend from React Component. And other thing is react class always require render function. This render() function returns a React element which is JSX. React class has constructor. This constructor method initialize the very first state of the component. In above code snippet message state set to the “Welcome” in initial state of the component. This react class components can manage its own state and done logical things inside the class.

Now we will look at how class component works…

Lets create class component HelloWorld to display “Hello World”

Class component which returns Hello World

This class components returns Hello World. Wait! I think you have a question… Where is the constructor? Yes in here constructor not initialized manually. But when we call this component, Constructor will call automatically. And another thing is why this extends with only Component other than React.Component? This {Component} import called as Named import. There are no difference between other than importing style.

There is no different between import both components

This is the class component output

Next we will see how to send data to the class component using props

Class component with props

In this case, message state receives data from the props and when initializing the class, message state assign to that passed “message” props data. In render method, <h2> tag shows message state data by this.state.message.

Send message prop data from App.js

Final output of the class

So this is the simple examples for the class and functional components in ReactJS.

Now lets see some common questions about class components and functional components.

Can we use functional components for manage states?

The answer is yes. The React 16.8 is added this functionalities to manage states and using some React features without using react class components. This called React Hooks.

What component type I used for my React Application?

In my opinion, Now functional components can also easily manage states and do other life cycle methods implementations. So, Using class or functional components is your decision. There may be some cases using Class component is very easy. So we have to find out what prefer.

In future blogs we will see how to Use React Hooks and What are the life cycle methods.

React Documentation