ReactJS - Expense Manager(费用管理器) API

更新于 2025/3/23 11:07:17

首先，按照 Http 客户端编程 -> Expense Rest API 服务器 中的说明创建一个新的Expense Rest API 应用程序并启动服务器。费用服务器将在 http://localhost:8000 运行。

创建一个骨架应用程序

打开终端并转到您的工作区。

> cd /go/to/your/workspace

接下来，使用 Create React App 工具创建一个新的 React 应用程序。

> create-react-app react-expense-app

它将创建一个包含启动模板代码的新文件夹 react-expense-app。

接下来，转到 expense-manager 文件夹并安装必要的库。

cd react-expense-app
npm install

npm install 将在 node_modules 文件夹下安装必要的库。

删除 src 和 public 文件夹下的所有文件。

接下来，在 src 下创建一个文件夹 components 以包含我们的 React 组件。应用程序的最终结构将如下所示:

|-- package-lock.json
|-- package.json
`-- public
   |-- index.html
`-- src
   |-- index.js
   `-- components
   |   |-- mycom.js
   |   |-- mycom.css

让我们创建根组件 App，它将呈现整个应用程序。

在 components 文件夹下创建一个文件 App.js，并编写一个简单的组件来发出 Hello World 消息。

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default App;

接下来，在 src 文件夹下创建我们的主要文件 index.js 并调用我们新创建的组件。

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App'

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

接下来，创建一个 html 文件 index.html (在 public 文件夹下)，它将成为我们应用程序的入口点。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Expense App</title>
   </head>
   <body>
      <div id="root"></div>
   </body>
</html>

接下来，使用 npm 命令为应用程序提供服务。