DEV Community

loading...
Cover image for Functional Component in reactโš›๏ธ

Functional Component in reactโš›๏ธ

anasooya2601 profile image Anasooya ใƒป2 min read
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" />;
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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.

image


image


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

Discussion (2)

pic
Editor guide
Collapse
sudarshansb143 profile image
Sudarshan Sawandkar

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.
Collapse
anasooya2601 profile image
Anasooya Author

Glad you liked it.Thank you for the suggestion.๐Ÿ˜„