React 教程

React 是一个用于构建用户界面的 JavaScript 库，它允许开发者创建快速、响应式和可维护的 UI。本教程将带您从基础开始，逐步深入到 React 的核心概念。

快速开始

安装 Node.js 和 npm：React 需要Node.js和npm来运行。您可以从Node.js官网下载并安装。
创建 React 应用：使用 Create React App 工具可以快速搭建一个 React 应用。
```
npx create-react-app my-app
cd my-app
npm start
```

编写第一个组件：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

组件

React 应用由组件组成。组件可以是一个简单的函数或类，它们可以接收 props 并返回一个 JSX 元素。

函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JSX

JSX 是一种 JavaScript 语法扩展，用于描述 UI 应用的结构。它看起来与 HTML 很相似，但你可以使用 JavaScript 表达式。

const element = <h1>Hello, world!</h1>;

状态和生命周期

React 组件可以使用状态来存储数据，并在组件的生命周期中更新这些数据。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

高阶组件

高阶组件（HOC）是一个接受组件作为参数并返回一个新的组件的函数。

function withCount(WrappedComponent) {
  return function WithCount(props) {
    return <WrappedComponent count={1} {...props} />;
  };
}

图片

React 也支持在组件中嵌入图片。

import React from 'react';

function ImageComponent() {
  return (
    <div>
      <center><img src="https://cloud-image.ullrai.com/q/Golden_Retriever/" alt="Golden Retriever"/></center>
    </div>
  );
}

export default ImageComponent;

更多关于 React 的内容，请访问我们的React 官方文档。

以上是 React 的基本教程，希望对您有所帮助！如果您有任何疑问，欢迎在评论区留言。👋