How To Create Functional Component In React JS

When “How To Create Functional Component In React JS” moves through design, development and browser testing, this practical overview can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official React website before adopting it in production.

Hi Friends,

In this tutorial we are learing how to create Functional component in react js. this is the basic component of react js.

What Is Component ?

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

Why Use Component ?

Beause of we can not write same code second time. we are use our code reuse in our application. component also save our time because of we can reuse this component. this is indipendente code not depend on other

Types of Component ?

In React js two types of Component

1. Functional Component

2. Class Component

Create Functional Component

In react js Functional component is simple and basic component. and also this component call stateless component. In "src" folder you have to create ".js" extension file. then first you have to import "React" in every component like "import React from 'react'". then you have to create function. then you have to return your HTML code.

Now you have to use this component then you have to export this component 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 ?

Now we have to use this component in App.js. First we have to import Profile Component in this file. Then simple you 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;

Now you have to run reactjs app or project then you have to run following command.

npm start