ReactJS - expense manager api

费用管理器 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 将在 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。

打印本页