React 基础教程

React 是一个用于构建用户界面的 JavaScript 库，它使得构建响应式和交互式的 Web 应用程序变得简单。以下是一些 React 基础教程的要点：

安装和设置

首先，你需要安装 Node.js 和 npm（Node.js 包管理器）。然后，你可以使用 create-react-app 脚本来快速搭建一个 React 项目。

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

JSX

React 使用 JSX 来描述用户界面。JSX 是一种类似于 HTML 的语法扩展，但它实际上被编译成 JavaScript 对象。

import React from 'react';

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

export default App;

组件

React 应用程序由组件组成。组件可以是一个简单的函数，也可以是一个包含状态和生命周期方法的复杂对象。

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

const element = <Welcome name="Alice" />;

状态和属性

组件可以拥有状态（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 应用程序，你可以使用 React Router 来管理路由。

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 路由的信息，可以查看React Router 官方文档。

结语

React 是一个强大的库，可以用来构建各种类型的 Web 应用程序。希望这个基础教程能帮助你入门。

返回首页