React 教程

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 维护。它使得创建交互式 web 应用程序变得非常简单。

快速开始

安装 Node.js

首先，您需要在您的计算机上安装 Node.js 和 npm（Node.js 包管理器）。可以从 Node.js 官网 下载并安装。

创建 React 应用

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

npx create-react-app my-app

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

cd my-app
npm start

您应该能在浏览器中看到 "Welcome to React!" 的提示。

组件

React 应用由组件构成。组件可以复用，并且可以被组合成复杂的用户界面。

import React from 'react';

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

export default App;

JSX

React 使用 JSX 来描述 UI 应该长成什么样子。JSX 是 JavaScript 的语法扩展，看起来和 HTML 很像。

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

ReactDOM.render(
  element,
  document.getElementById('root')
);

状态和属性

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

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

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

React Router

React Router 是 React 的路由库，用于管理单页应用程序中的不同视图。

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 官方文档。

图片

1. React 图标

2. React 组件

3. React Router

希望这个教程对您有所帮助！