费用管理器 API
首先，按照 Http 客户端编程 -> Expense Rest API 服务器中的说明创建新的费用 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
npm install 将在 node_modules 文件夹下安装必要的库。
删除 src 和 public folder 下的所有文件。
接下来，在 src 下创建一个文件夹 components 以包含我们的 React 组件。应用程序的最终结构如下：
|-- package-lock.json
|-- package.json
`-- public
|-- index.html
`-- src
|-- index.js
`-- components
| |-- mycom.js
| |-- mycom.css
让我们创建根组件 App，它将渲染整个应用程序。
创建一个文件，App.js components 文件夹下，编写一个简单的组件来发出 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 folder 下），这将是应用程序的入口点。
<!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
接下来，打开浏览器并在地址栏中输入 http://localhost:3000，然后按 Enter。
