react/docs/quick-start.html

React 快速入门指南 🚀

React 是一个用于构建用户界面的 JavaScript 库。如果你是初学者，这个快速入门指南将帮助你开始使用 React。

安装 Node.js 和 npm

首先，确保你的系统中安装了 Node.js 和 npm。你可以通过以下命令检查：

node -v
npm -v

如果没有安装，请访问 Node.js 官网 进行安装。

创建 React 应用

使用 create-react-app 工具可以快速搭建一个 React 应用。

npx create-react-app my-app

这将创建一个名为 my-app 的新目录，并初始化一个 React 应用。

运行应用

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

cd my-app
npm start

这将启动一个开发服务器，并在浏览器中自动打开应用。

React 应用启动画面

JSX 简介

React 使用 JSX 语法来描述 UI。JSX 类似于 HTML，但你可以使用 JavaScript 表达式。

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

在上面的例子中，我们创建了一个名为 App 的组件，它返回一个包含标题的 div 元素。

组件状态和属性

组件可以使用状态和属性来存储和传递数据。

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

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

在上面的例子中，Clock 组件使用状态来存储当前时间，并使用 toLocaleTimeString 方法来格式化时间。

进一步学习

想要了解更多关于 React 的知识，请访问我们的 React 文档。

React 文档