React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它被广泛应用于网页和移动应用的开发中。本教程将带您从零开始学习 React。

安装 Node.js 和 npm

在开始学习 React 之前，您需要安装 Node.js 和 npm（Node.js 包管理器）。可以从 Node.js 官网 下载并安装。

创建 React 应用

使用 create-react-app 命令可以快速创建一个 React 应用。

npx create-react-app my-app

运行 my-app 目录下的 start 脚本，可以在浏览器中预览您的应用。

cd my-app
npm start

JSX 语法

React 使用 JSX 语法来描述用户界面。JSX 是 JavaScript 的一个语法扩展，它看起来像 HTML，但可以与 JavaScript 混合使用。

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

组件

React 应用由组件组成。组件可以复用，并且可以组合成更复杂的组件。

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

状态和属性

组件可以通过状态（state）和属性（props）来控制其行为和数据。

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

路由

React Router 是一个用于在 React 应用中添加路由功能的库。可以使用 <Route> 组件来定义路由。

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

总结

React 是一个功能强大的 JavaScript 库，可以用于构建高性能的用户界面。希望这个入门教程能帮助您开始学习 React。

更多关于 React 的内容。

React Logo