React 入门教程

React 是一个用于构建用户界面的 JavaScript 库，它允许开发者以声明式的方式构建高效、可维护的 UI。本教程将带你从基础开始，逐步掌握 React 的核心概念。

安装和设置

在开始之前，你需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，可以通过以下命令创建一个新的 React 应用：

npx create-react-app my-app

进入项目目录并启动开发服务器：

cd my-app
npm start

浏览器会自动打开 http://localhost:3000，你将看到 React 应用的欢迎页面。

JSX 简介

React 使用 JSX 来描述用户界面。JSX 是一种类似于 HTML 的语法扩展，它允许你将 JavaScript 表达式直接写在 HTML 标签中。

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

React 会将 JSX 转换为 JavaScript 对象，然后渲染到页面上。

组件

React 应用由组件组成。组件是一个可复用的代码块，它接收 props 并返回一个 JSX 元素。

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

在上述代码中，App 是一个组件，它返回一个包含 <h1> 标签的 <div>。

状态和属性

React 组件可以通过 state 和 props 来管理数据。

• 状态：组件内部的数据，可以随时间变化。
• 属性：组件从父组件接收的数据。

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>
    );
  }
}

在上面的例子中，Clock 组件有一个状态 date，它会在组件渲染时更新。

本站链接

更多关于 React 的信息和教程，请访问我们的 React 教程页面。