Creating Functional Components in React JS

LETS SEE HOW TO CREATE SIMPLE REACT FUNCTIONAL COMPONENT

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.

ADDING DYNAMIC CONTENT

We have a below Player component

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

Player component is imported in app.js file

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Player from './Player'
function App() {
   return (
      <div className="App">
         <Player/>
         <Player/>
         <Player/>
      </div>
   );
}
export default App;

Now, suppose we want to display some random score for each player then we can do like below −

import React from 'react';
const player = () => {
   return (
      <p>I'm a Player: My score {Math.floor(Math.random() * 50)}</p>
   );
}
export default player;

Once we save file, and run npm start on terminal from project directory.

To add dynamic content in jsx we can do it inside {} braces.

LETS SEE ADDING PROPERTIES OR ATTRIBUTES TO FUNCTIONAL COMPONENT

import React from 'react';
import './App.css';
import Player from './Player'
function App() {
   return (
      <div className="App">
         <Player name="Smith" score="100"/>
         <Player name="David" score="99">Plays for Australia </Player>
         <Player name="Phil" score="80"/>
      </div>
   );
}
export default App;

We can add attributes to the Player element like above. To access the attributes in the functional component defined for Player, we have to pass an argument like below.

import React from 'react';
const player = (props) => {
   return (
      <p>I'm a Player: My name {props.name} and my score is {props.score}</p>
   );
}
export default player;

Name of the argument to function can be different but it's a standard that we use props as a name for it. we access the attributes using props.name and props.score in {} braces

ACCESSING CHILDREN OF JSX ELEMENT

We have a children property on the player David, We can access it like below −

import React from 'react';
const player = (props) => {
   return (
      <div>
         <p>I'm a Player: My name {props.name} and my score is {props.score}</p>
         {props.children}
      </div>
   );
}
export default player;

The {props.children} property makes us access that text.