ReactJS - 自定義程式碼

自定義程式碼

讓我們移除應用程式的預設原始碼並引導應用程式，以便更好地理解 React 應用程式的內部機制。

刪除 src 和 public 資料夾下的所有檔案。

接下來，在 src 下建立一個名為 components 的資料夾，以包含我們的 React 元件。我們的想法是建立兩個檔案，`.js` 用於編寫元件邏輯，`` 用於包含特定於元件的樣式。

應用程式的最終結構如下所示：

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

讓我們建立一個新的元件 HelloWorld 來確認我們的設定是否正常工作。在 components 資料夾下建立一個名為 HelloWorld.js 的檔案，並編寫一個簡單的元件來輸出 Hello World 訊息。

import React from "react";

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

接下來，在 src 資料夾下建立我們的主檔案 index.js，並呼叫我們新建立的元件。

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

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

接下來，建立一個 html 檔案 index.html（位於 public 資料夾下*），它將作為我們應用程式的入口點。

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

執行應用程式

讓我們透過呼叫 package.json 檔案中配置的啟動指令碼執行應用程式。

> npm start

它將在本地系統中啟動應用程式，可以透過瀏覽器訪問 @ https://:3000。

> expense-manager@0.1.0 start D:\path\to\expense-manager
> react-scripts start

i ｢wds｣: Project is running at http://192.168.56.1/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from D:\path\to\expense-manager\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view expense-manager in the browser.

   Local:            https://:3000
   On Your Network:  http://192.168.56.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

開啟您喜歡的瀏覽器，然後轉到 https://:3000。應用程式的結果如下所示：

使用自定義解決方案

正如我們之前瞭解到的，Create React App 是啟動 React 應用程式的推薦工具。它包含開發 React 應用程式所需的一切。但有時，應用程式不需要 Create React App 提供的所有功能，我們希望我們的應用程式更小巧簡潔。然後，我們可以使用我們自己的自定義解決方案來建立 React 應用程式，並僅包含足以支援我們應用程式的依賴項。

要建立自定義專案，我們需要具備以下四個方面的基本知識。

包管理器 - 高階應用程式管理。我們使用 npm 作為預設的包管理器。
編譯器 - 將 JavaScript 變體編譯成瀏覽器支援的標準 JavaScript。我們使用 Babel 作為預設的編譯器。
打包器 - 將多個原始檔（JavaScript、html 和 css）捆綁到一個可部署的程式碼中。Create React App 使用 webpack 作為其打包器。讓我們在接下來的部分學習如何使用 Rollup 和 Parcel 打包器。
Web 伺服器 - 啟動開發伺服器並啟動我們的應用程式。Create React App 使用內部 Web 伺服器，我們也可以使用 serve 作為我們的開發伺服器。

reactjs_creating_application.htm

列印頁面