Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
2K+ Views
