How To Create Functional Component In React JS ?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this tutorial i will show you how to create a Functional component in react js application. Now this is the basic component of react js.

What Is Component ?

Component is a specific part of code which is we can reuse in our project. As a example header,footer etc…

Why Use Component ?

We are use component because we are not want to write same code on second time. So that’s we are use our code reuse in our application. And component also save our time because of we can reuse this component on next time . Now this is interdependent code not depend on other section.

Types of Component ?

In React js Component is two types

1. Functional Component

2. Class Component

Create Functional Component

Now we are see about react js Functional component is a very simple and basic component. And also this component call stateless component. Now In “src” folder we need to create “.js” extension file. So then at first we need to import “React” in every component as like “import React from ‘react'”. Now then we have to create the function.And then we need to return our HTML code.

Now we have to use this component then we need to export all this component by using “export default”.

This is Home Component Example

import React from 'react'

function Profile(){
    return <div>
        <h1>This is Functional Profile Component</h1>
    </div> 
}

export default Profile;

How To Use Functional Component ?

Here now we need to use this component in App.js. At first we need to import Profile Component in this file. So then simple we can use like this “” .

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Profile from './Profile';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

        <Profile />

      </header>
    </div>
  );
}

export default App;

So now we need to run reactjs app or our project then we have to run following command.

npm start

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →