简单易懂的 React 单页应用教程

本文将向您介绍如何使用 React 构建一个简单易懂的单页应用（SPA），我们将讨论以下几个方面：

1. 什么是 React？
2. 什么是单页应用？
3. 如何构建一个简单的单页应用？
4. 示例代码及讲解。

1. 什么是 React？

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发，并且已经被许多知名的网站和应用所使用，例如 Instagram、Netflix、WhatsApp 等等。React 的主要目的是使 UI 的编写变得更加模块化、可复用，以及更容易进行维护和测试。

2. 什么是单页应用？

单页应用是指只有一个页面的网络应用程序。相较于传统的多页应用程序，单页应用程序在加载初次请求后，下一部分内容的加载都是通过 Ajax 或者其他类似技术的方式实现，这意味着页面不会重新加载，用户可以直接通过链接跳转到其他部分内容。

单页应用通常使用 MVC 架构，其中视图通过 JavaScript 代码生成并且在客户端动态渲染。

3. 如何构建一个简单的单页应用？

为了构建一个简单的单页应用，我们需要使用 React 框架以及一些其他的工具和库。我们可以使用 Create React App、React Router 和 Axios 来构建整个应用程序。以下是步骤：

1. 使用命令行 create-react-app single-page-app 创建一个新的 React 项目。
2. 在根目录中创建一个 src 目录来存储所有的源代码。
3. 在 src 目录中创建 index.js 文件，并添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

1. 在 src 目录中创建 components 目录，用于存储所有的 React 组件，然后在其中创建 App.js 组件，并添加以下代码：

// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

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

export default App;

1. 在 components 目录中创建 Home.js、About.js 以及 Contact.js 组件，并添加所需的代码。
2. 运行 npm install react-router-dom axios 命令来安装所需的依赖项。
3. 运行 npm start 命令启动应用程序。

4. 示例代码及讲解

在上述步骤中，我们使用了 React 路由器（react-router-dom）来设置路由，并且使用了 Axios 来处理 HTTP 请求。以下是一个示例代码，请注意这仅仅是一个示例代码：

// www.javascriptcn.com code example
import React from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

function Home() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    axios.get('/api/data')
      .then(res => setData(res.data))
      .catch(err => console.log('Error: ', err));
  }, []);

  return (
    <div>
      <h1>Welcome to Single Page App</h1>
      <p>{data}</p>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </div>
  );
}

export default Home;

在这个示例中，我们首先定义了 Home 组件，并使用了 React useState 钩子来定义了 data 变量。接下来，我们使用 React useEffect 钩子来发送一个 HTTP GET 请求并将响应存储在 data 变量中，最后将 data 变量渲染到页面中。

在组件的底部，我们返回了一个包含标题、数据、以及一个使用 React Router 的导航列表的 div 元素。

整个应用程序代码都可以在 Github 上查看：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-single-page-apps。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d6ad8da941bf7134c7a47d