ReactJS - 费用管理 API

首先，按照Http 客户端编程 -> 费用 Rest API 服务器中的说明创建一个新的费用 Rest API 应用，并启动服务器。费用服务器将在https://127.0.0.1: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 命令启动应用。

npm start

接下来，打开浏览器并在地址栏中输入https://127.0.0.1:3000，然后按 Enter 键。

reactjs_example.htm

打印页面