ReactJS - 費用管理 API

首先，按照Http 客戶端程式設計 -> 費用 Rest API 伺服器中的說明建立一個新的費用 Rest API 應用，並啟動伺服器。費用伺服器將在https://: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://:3000，然後按 Enter 鍵。

reactjs_example.htm

列印頁面