SoFunction
Updated on 2025-04-07

Tutorial on creating and using React components and events

Create Components

Function Components

Function Components: Components created using JS functions or arrow functions

  • Components created using JS functions (or arrow functions) are called function components
  • Convention 1: Function names must start with capital letters, and React distinguishes components from ordinary HTML
  • Convention 2: Function components must have a return value, indicating the UI structure of the component
// 1. Guide packetimport React from 'react'
import ReactDom from 'react-dom/client'
// 2. Create functional components// Ordinary function or arrow function creates components, with capital letters// Component must have a return valuefunction Music() {
  return (
    <div>
      <h1>haha</h1>
    </div>
  )
}
const VNode = (
  <div>
    <Music></Music>
  </div>
)
// 3. Mount(('#root')).render(VNode)

Class Components

Class component: A component created using ES6 class, called a class component

  • Convention 1: Class names must also begin with capital letters
  • Contract 2: Class components should be inheritedParent class, thus using methods or properties provided in the parent class
  • Convention 3: Class components must be providedrendermethod
  • Convention 4: The render method must have a return value, indicating the UI structure of the component
// 1. Guide packetimport React from 'react'
import ReactDom from 'react-dom/client'
// 2.
class Hello extends  {
  render() {
    return <h1>Ha ha</h1>
  }
}
const VNode = (
  <>
    <Hello></Hello>
  </>
)
// 3. Mount(('#root')).render(VNode)

Components are extracted into separate files

existcomponentsCreate function components in the folder, class components,

const Hello = () => <h1>I amhelloComponents</h1>
export default Hello


import React from 'react'
class Home extends  {
  render() {
    return <h2>home</h2>
  }
}
export default Home

existImport in

// 1. Guide packetimport React from 'react'
import ReactDom from 'react-dom/client'
// Import componentsimport Hello from './components/hello'
import Home from './components/home'
// 2. Create a virtual DOMconst App = (
  &lt;&gt;
    &lt;Hello&gt;&lt;/Hello&gt;
    &lt;Home&gt;&lt;/Home&gt;
  &lt;/&gt;
)
// 3. Mount(('#root')).render(App)

Stateful Components and Stateless Components

Status is data

  • Function components are also called stateless components. Function components cannot provide data by themselves [Preparation: Based on what hooks said before before 16.8]
  • Class components are also called stateful components Class components can provide data by themselves. If the data changes, the content will be automatically updated.
  • The private data of a component is also called state. When the state of the component changes, the page structure also changes. 【Data Driven View】
  • Function components have no state and are only responsible for page display (static, no changes) with high performance.
  • Class components have their own state and are responsible for updating the UI. As long as the data of the class components change, the UI will be updated (dynamic).
  • In complex projects, it is generally done by cooperating function components and class components.
// 1. Guide packetimport React from "react"
import ReactDom from 'react-dom/client'
// Function component No state Just do some data display work, you can use function component// function App() {
//   return (
// <div>I am a component</div>//   )
// }
// Class Components Stateful If there is state, the state needs to be switched and the view needs to be updated.class App extends  {
  render() {
    return (
      &lt;h1&gt;I'm a class component&lt;/h1&gt;
    )
  }
}
const VNode = (
  &lt;div&gt;
    &lt;App&gt;&lt;/App&gt;
  &lt;/div&gt;
)
(('#root')).render(VNode)

The status of the class component

  • statestateThat is, data, which is private data inside the component, and can only be used inside the component.
  • The value of state is an object, indicating that there can be multiple data in a component
  • passTo get the status
// 1. Guide packetimport React from "react"
import ReactDom from 'react-dom/client'
// Class Components Stateful If there is state, the state needs to be switched and the view needs to be updated.class App extends  {
  // Provide state in state node  // Get the status by  state = {
    name: 'Tt',
    age: 17
  }
  render() {
    return (
      &lt;h1&gt;{} ----- {}&lt;/h1&gt;
    )
  }
}
const VNode = (
  &lt;div&gt;
    &lt;App&gt;&lt;/App&gt;
  &lt;/div&gt;
)
(('#root')).render(VNode)

Event handling

Register Events

grammar:on+event name={event handler}for exampleonClick={}

// 1. Guide packetimport React from "react"
import ReactDom from 'react-dom/client'
// Class Components Stateful If there is state, the state needs to be switched and the view needs to be updated.class App extends  {
  // Provide state in the state node to obtain state  state = {
    name: 'Tt',
    age: 17
  }
  // Provide some methods  handleClick() {
    ('Click');
  }
  render() {
    return (
      &lt;div&gt;
        &lt;button onClick={}&gt;Button&lt;/button&gt;
      &lt;/div&gt;
    )
  }
}
const VNode = (
  &lt;div&gt;
    &lt;App&gt;&lt;/App&gt;
  &lt;/div&gt;
)
(('#root')).render(VNode)

This is the end of this article about the creation and use of React components and events. For more related React components and events, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!