Creating functional components in React.js

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.
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.
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.
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
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.