Functions Components in ReactJS @7
#FunctionComponents #ReactJS #ReactDevelopment #ReactHooks #JavaScript #FrontendDevelopment #WebDevelopment #ReactComponents #Programming #CodeWithReact #ReactJSComponents #ComponentBasedArchitecture #LearnReact #ReactJSBasics #ReactJSFunctions #ReactJSTutorials
let's break down function components at a beginner level in React.js. Function components are a foundational concept in React, and understanding them is essential for building React applications.
What is a Function Component?
A function component in React is a JavaScript function that takes props as an argument and returns a React element (JSX). It's a simpler way to write components that don't need to maintain their own state or lifecycle methods.
Basic Example
Here's a simple example of a function component:
JSX code
import React from 'react';
function Greeting(props) {
return h1Hello, {props.name}!/h1;
}
export default Greeting;
In this example:
Greeting is a function component.
It takes props as an argument.
It returns an h1 element that includes the name prop.
Using Function Components
To use the Greeting component, you would include it in another component or in the main application file. Here's how you can do that:
JSX code:
import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting'; // Assuming Greeting is in the same directory
function App() {
return (
div
Greeting name="Alice" /
Greeting name="Bob" /
/div
);
}
ReactDOM.render(App /, document.getElementById('root'));
Props in Function Components
Props are how you pass data into components. They are received as an argument in function components.
Example with Multiple Props
JSX code:
import React from 'react';
function User(props) {
return (
div
h2{props.name}/h2
pAge: {props.age}/p
/div
);
}
function App() {
return (
div
User name="Alice" age={25} /
User name="Bob" age={30} /
/div
);
}
export default App;
Chapter :
00:00 Introduction
00:13 Basic Example
00:59 Adding or using Function Components
01:23 Props (Properties) in Function Components
01:44 Summery
Thank you for watching this video
Everyday Be coding
On this page of the site you can watch the video online Functions Components in ReactJS @7 with a duration of hours minute second in good quality, which was uploaded by the user Everyday Be Coding 18 May 2024, share the link with friends and acquaintances, this video has already been watched 34 times on youtube and it was liked by 8 viewers. Enjoy your viewing!
