React 入门教程

React 是一个用于构建用户界面的 JavaScript 库。以下是一个简单的教程，帮助您入门 React。

React 的核心是组件。组件可以复用，并且可以组合在一起以创建复杂的用户界面。

安装和设置

首先，您需要安装 Node.js 和 npm（Node.js 包管理器）。安装完成后，可以通过以下命令创建一个新的 React 应用程序：

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

运行 npm start 命令来启动开发服务器。

组件

React 组件是构成应用程序的基本单位。每个组件都包含一个 render 方法，该方法返回 JSX，即 JavaScript 语法扩展。

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

export default App;

在上面的例子中，App 组件返回一个包含标题的 div 元素。

JSX

JSX 是一个看起来类似于 HTML 的 JavaScript 语法扩展。它可以用来描述用户界面。

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

JSX 可以包含任何 React 组件或子元素。

状态和属性

React 组件可以使用状态和属性来管理数据和交互。

状态：状态是组件内部的数据，可以通过 setState 方法进行更新。
属性：属性是组件从父组件接收的数据。

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

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

export default Clock;

在这个例子中，Clock 组件有一个状态 date，它使用 useState 钩子初始化。

路由

React Router 是一个流行的库，用于处理应用程序的导航和路由。

npm install react-router-dom

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在上面的例子中，Router 组件用于定义应用程序的导航结构。

更多关于 React 的内容，请访问 React 官方文档。

React 是一个非常强大的库，可以帮助您快速构建高性能的用户界面。希望这个简单的教程能够帮助您入门。