Functional Component in react⚛️

Hello guys,😀

Hope you are doing good!

In this tutorial 👩🏻‍💻 🔥 , we are going to learn about functional components in react.

Prerequisite: Javascript,JSX,ES6.

First, let us know about components.

❓. What is a component?
Ans:
A component is a core building block of react.

There are two types of components:
1)Functional component
2)class component

let us take an example for each.
Class component

Functional component

Now we will dive into Functional components👩🏻‍💻.

> const n=<Component name="Ana" />;

Inside a functional component, we are passing props as an argument of the function.

A functional component is an ES6 function.

❓ When do we use functional components?
Ans:
1)when it receives prop and renders something.
2)when it doesn't have any state.

❓ Why functional components?
Ans: A functional component is written shorter and simpler. It doesn't use THIS unlike in class component.

Always prefer functional components over class components.😀

Functional component holds state using hooks. (react 16.8)

Let's us code now,

try these examples on a code editor.

---

---

I hope you liked this tutorial. If you have any doubts you can (google 😜) comment down below. I Will revert asap 👍.

Sources I referred to:
reactjs.org/docs/components-and-props
react-components-jsx-props-for-beginners

Comments

[sudarshan]

Nice Article !
But i want to suggest you two things

1. You can ( and have to) destructure props and directly use them
2. You must use Component.map(callback) to replicate components, instead of typing it several times.

[Anasooya]

Glad you liked it.Thank you for the suggestion.😄