React 框架教程

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它可以帮助开发者创建快速、可交互的网页应用。

快速开始

1. 安装 Node.js 和 npm：React 需要使用 Node.js 和 npm 进行开发。你可以从 Node.js 官网 下载并安装。

2. 创建 React 应用：使用 create-react-app 工具可以快速创建一个 React 应用。

   npx create-react-app my-app
   cd my-app
   npm start
   

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

   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1>Hello, world!</h1>
       </div>
     );
   }
   
   export default App;
   

4. 运行你的应用：在浏览器中打开 http://localhost:3000，你应该能看到你的第一个 React 应用。

组件

React 中的组件是构建 UI 的基石。组件可以是一个简单的函数，也可以是一个包含状态和生命周期的复杂对象。

函数组件

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

类组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JSX

JSX 是一种 JavaScript 的语法扩展，它看起来类似于 HTML，但却是 JavaScript 代码。React 使用 JSX 来描述 UI 的结构。

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

路由

React Router 是一个基于 React 的路由库，它可以帮助你为单页应用添加路由功能。

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

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

更多关于 React Router 的信息。

图片

React 也支持在组件中插入图片。

更多关于 React 的信息。