React 教程文档

React 是一个用于构建用户界面的 JavaScript 库。以下是一些 React 教程文档的概览。

快速开始

1. 安装 Node.js 和 npm：React 需要Node.js和npm来运行。

   • Node.js 官网
   • npm 官网

2. 创建一个新项目：使用 Create React App 创建一个新的 React 项目。

   npx create-react-app my-app
   cd my-app
   

3. 运行项目：

   npm start
   

   这会在本地开发服务器上启动你的应用。

组件

React 应用由组件组成。组件可以是一个简单的函数或类。

• 函数组件：

  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 应用的结构。

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

状态与属性

React 组件可以通过状态（State）和属性（Props）来控制 UI。

• 状态：组件的状态是可变的，用于存储组件内部数据。
• 属性：组件的属性是从父组件传递下来的数据。

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

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

图片

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

更多关于 React 的内容，请访问我们的React 教程页面。

抱歉，您的请求不符合要求