Functions Components in ReactJS @7

Опубликовано: 18 Май 2024
на канале: Everyday Be Coding

#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

На этой странице сайта вы можете посмотреть видео онлайн Functions Components in ReactJS @7 длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Everyday Be Coding 18 Май 2024, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 34 раз и оно понравилось 8 зрителям. Приятного просмотра!

103