React components are the basic units for building React applications. You can think of components as reusable, independent UI units, each encapsulating its own structure, style, logic, and state. React components are the cornerstone of building applications. A component can be as small as a button or as large as an entire page. !(#) Components can be divided into: **Function Components** and **Class Components**. From a technical perspective, a React component is a JavaScript function or class that returns a React element (usually JSX). // Simplest component function Hello() { return

Hello, World!

;} Split complex UI into a component tree: App ├── Header │ ├── Logo │ └── Navigation │ ├── NavItem │ └── NavItem ├── Main │ ├── Sidebar │ └── Content │ ├── Article │ └── Article └── Footer * * * ## Function Components Function components are a concise way to define components. A function component is a JavaScript function that accepts props and returns a React element. Basic syntax: // Method 1: Function declaration function Welcome(props) { return

Hello, {props.name}

;} // Method 2: Arrow function const Welcome = (props) => { return

Hello, {props.name}

;}; // Method 3: Simplified (single line return) const Welcome = (props) =>

Hello, {props.name}

; Create a simple function component: ## src/Welcome.js file: import React from 'react'; // Define a function component function Welcome(props){ return

Hello,{props.name}!

; } export default Welcome; Render this component in src/index.js: ## src/index.js file: import React from 'react'; import ReactDOM from 'react-dom'; import'./index.css'; import Welcome from './Welcome'; const root = ReactDOM.createRoot(document.getElementById("root")); // Render the Welcome component and pass the name prop root.render(); This example demonstrates a simple component that accepts a name prop and displays "Hello, World!" on the page. * * * ## Class Components Class components are defined using ES6 class syntax and are typically used when you need to manage state or use lifecycle methods. Basic syntax: import React, { Component } from 'react'; class Welcome extends Component { render() { return

Hello, {this.props.name}

; }} Create a class component: ## Example import React,{ Component } from 'react'; class Welcome extends Component { render(){ return

Hello,{this.props.name}!

; } } export default Welcome; Render this component in src/index.js: ## Example import React from 'react'; import ReactDOM from 'react-dom'; import'./index.css'; import Welcome from './Welcome'; const root = ReactDOM.createRoot(document.getElementById("root")); // Render the Welcome component and pass the name prop root.render(); * * * ## Test Example Next, we encapsulate a component that outputs "Hello World!", the component name is HelloMessage: ## React Example function HelloMessage(props){return

Hello World!

; }const element = ; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(element); [Try it »](#) ### Example Analysis: 1、We can use a function to define a component: function HelloMessage(props) { return

Hello World!

;} You can also use ES6 class to define a component: class Welcome extends React.Component { render() { return

Hello World!

; }} 2、**const element = ** is a user-defined component. > Note: Native HTML element names start with lowercase letters, while custom React class names start with uppercase letters. For example, HelloMessage cannot be written as helloMessage. Additionally, note that component classes can only contain one top-level tag, otherwise an error will occur. If we need to pass parameters to a component, we can use the **this.props** object, as shown in the following example: ## React Example function HelloMessage(props){return

Hello{props.name}!

; }const element = ; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(element); [Try it »](#) In the above example, the **name** prop is accessed through props.name. > Note: When adding attributes, the class attribute needs to be written as className, and the for attribute needs to be written as htmlFor, because class and for are JavaScript reserved words. * * * ## Composite Components We can compose a component by creating multiple components, which means separating different functional points of a component. In the following example, we implement a component that outputs the website name and URL: ## React Example function Name(props){return

Website Name: {props.name}

; }function Url(props){return

Website URL: {props.url}

; }function Nickname(props){return

Website Nickname: {props.nickname}

; }function App(){return(); }const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); [Try it »](#) In the example, the App component uses the Name, Url, and Nickname components to output the corresponding information. * * * ## Props Props is the way to pass data between components, similar to function parameters. ### Basic Usage // Parent component passes props function App() { return (