React 应用教程

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助开发者快速构建响应式和交互式的应用程序。本教程将为您介绍如何创建一个基本的 React 应用程序。

快速开始

安装 Node.js 和 npm：React 需要Node.js 和 npm（Node.js 包管理器）来运行。您可以从 Node.js 官网下载并安装 Node.js 和 npm。
创建一个新的 React 应用：使用 create-react-app 命令，您可以快速创建一个新的 React 应用程序。

npx create-react-app my-app

启动您的应用：进入 my-app 目录，并运行以下命令来启动您的应用。

cd my-app
npm start

您的应用将自动打开默认的浏览器窗口，并显示 React 的欢迎页面。

组件

React 应用程序由组件组成。组件是可复用的代码块，用于构建用户界面。以下是一些基本的 React 组件：

函数组件：使用 JavaScript 函数创建的组件。
类组件：使用 ES6 类创建的组件。

函数组件示例

import React from 'react';

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

export default Welcome;

类组件示例

import React, { Component } from 'react';

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

export default Welcome;

JSX

JSX 是 JavaScript 的语法扩展，它允许您在 JavaScript 代码中直接编写 HTML 标签。以下是一个 JSX 的示例：

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

图片

React 应用中可以使用 <img> 标签来显示图片。以下是一个示例：

import React from 'react';

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

export default App;

总结

React 是一个强大的库，可以帮助您快速构建用户界面。希望这个教程能帮助您开始使用 React。如果您想了解更多关于 React 的信息，请访问我们的 React 教程页面。