react-day3面向组件编程

在React中，面向组件编程是核心概念之一。组件是React应用的基本构建块，它们可以创建可复用的UI部件。

以下是一个简单的React组件示例，展示了如何定义一个组件并使用它：

// 引入React和Component
import React, { Component } from 'react';
 
// 定义一个名为HelloComponent的组件类
class HelloComponent extends Component {
  render() {
    // 使用JSX语法返回组件的HTML结构
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
 
// 使用export default导出组件
export default HelloComponent;
 
// 在其他组件或者入口文件中使用HelloComponent
import React from 'react';
import ReactDOM from 'react-dom';
import HelloComponent from './HelloComponent';
 
ReactDOM.render(<HelloComponent name="World" />, document.getElementById('root'));

在这个例子中，HelloComponent是一个React组件，它接收一个名为name的属性，并在渲染时显示一个包含这个属性的标题。我们通过ReactDOM.render方法将它渲染到页面上的某个元素（例如具有id为root的元素）里。这就是React组件编程的基本形式。