Posted inReact UI

Creating functional components in React.js

October 16, 2023

Components are building blocks of React library. There are two types of components.

  • Stateful component
  • Stateless component

Stateful component has a local state object which can be manipulated internally.

Stateless component does not have a local state object but we can add some state using React hooks in it.

CREATE A SIMPLE ES6 FUNCTION

const player = () => {
}

Here we used a const keyword to function name so that it does not get modified accidentally. Let’s add a return statement with some jsx code.

const player = () => {
   return (
      <p>I'm a Player</p>
   );
}

To work with jsx in JavaScript file we will have to import React like below

import React from 'react';
const player = () => {
   return (
      <p>I'm a Player</p>
   );
}

Finally we have to export this function

export default player;

Now, we can use this functional component using below import statement.

Path to actual file may need to change depending upon relative location.

import Player from './Player'

If you have noticed there is no mention of file extension in above import statement. This is because build workflow automatically consider it as a js or jsx file type by default. If file is of different type then we will need to mention the extension of the file as well.

This Player functional component can be used in jsx element like −

<Player/>

This functional component can be used anywhere and multiple times as well. Its reusable component.

Tags: