React 教程

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它使得构建高性能、可维护的 UI 变得更加容易。

快速开始

1. 安装 Node.js 和 npm：React 需要Node.js 和 npm（Node.js 包管理器）来运行。

   • Node.js 官网

2. 创建一个新的 React 应用：

   • 打开命令行工具。
   • 运行 npx create-react-app my-app 命令。
   • 进入新创建的目录 cd my-app。
   • 运行 npm start 启动开发服务器。

3. 编写你的第一个组件：

   • 在 src/App.js 文件中，找到 <App /> 组件。
   • 将 <div> Hello, world! </div> 替换为 <h1>Hello, world!</h1>。

4. 运行你的应用：

   • 打开浏览器，访问 localhost:3000。

组件

React 应用由组件组成。组件是一个可复用的 UI 块，可以接受 props 作为输入，并返回一个渲染好的元素。

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

JSX

JSX 是 JavaScript 的语法扩展，它允许你以类似 HTML 的方式编写 React 组件。

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

状态和属性

• 状态：组件内部的数据，用于响应用户交互。
• 属性：组件接收的输入，用于配置组件的行为。

function Clock() {
  const [date, setDate] = useState(new Date());

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

路由

React Router 是 React 的路由库，用于处理客户端路由。

• React Router 官网

总结

React 是一个强大的库，可以帮助你构建高性能的 UI。希望这个教程能帮助你入门。

React Logo