反應啟動專案

Created: November-22, 2018

關於這個專案

這是一個簡單的樣板專案。這篇文章將指導你為 ReactJs + Webpack + Bable 設定環境。

讓我們開始吧

我們將需要節點包管理器來啟動快速伺服器並管理整個專案中的依賴關係。如果你是節點包管理器的新手，可以在此處檢視。注意：此處需要安裝節點包管理器。

建立一個具有合適名稱的資料夾，然後從終端或 GUI 導航到該資料夾。然後轉到終端並鍵入 npm init 這將建立一個 package.json 檔案，沒什麼可怕的，它會問你幾個問題，比如你的專案名稱，版本，描述，入口點，git 儲存庫，作者，許可證等。這裡的入口點很重要，因為節點在執行專案時最初會查詢它。最後，它會要求你驗證你提供的資訊。你可以鍵入 yes 或修改它。好吧就是這樣，我們的 package.json 檔案準備好了。

快速伺服器設定執行 npm install express @ 4 –save 。這是我們為這個專案所需的所有依賴項。這裡儲存標誌很重要，沒有它， package.js 檔案將不會被更新。 package.json 的主要任務是儲存依賴項列表。它將新增快速版本 4.你的 package.json 將看起來像 "dependencies": { "express": "^4.13.4", ............. },

完成下載後，你可以看到 node_modules 資料夾和我們的依賴項的子資料夾。現在在專案的根目錄下建立新的檔案 server.js 檔案。現在我們正在設定快遞伺服器。我將通過所有程式碼並稍後解釋。

var express = require('express');
// Create our app
var app = express();

app.use(express.static('public'));

app.listen(3000, function () {
  console.log('Express server is using port:3000');
});

var express = require（’express’）; 這將為你提供整個快遞 api 的訪問許可權。

var app = express（）; 將快遞庫稱為功能。 app.use（）; 讓我們為你的快速應用程式新增功能。 app.use（express.static（ ‘公共’））; 將指定將在我們的 Web 伺服器中公開的資料夾名稱。 app.listen（port，function(){}） 這裡我們的埠將是 3000 ，我們正在呼叫的函式將驗證 Web 伺服器是否正常執行。這就是快遞伺服器的設定。

現在轉到我們的專案並建立一個新資料夾 public 並建立 index.html 檔案。 index.html 是你的應用程式的預設檔案，Express 伺服器將查詢此檔案。該 index.html 的是簡單的 HTML 檔案，它看起來像

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
</head>

<body>
  <h1>hello World</h1>
</body>

</html>

然後轉到終端的專案路徑並輸入 node server.js 。然後你會看到* console.log（‘Express 伺服器正在使用埠：3000’）; *。

轉到瀏覽器並在導航欄中鍵入 http：// localhost：3000 ，你將看到 hello World 。

現在進入公共資料夾並建立一個新檔案 app.jsx 。JSX 是一個前處理器步驟，它為你的 JavaScript 新增 XML 語法。你絕對可以使用 React 而不使用 JSX，但 JSX 使 React 更加優雅。以下是 app.jsx 的示例程式碼 **

ReactDOM.render(
  <h1>Hello World!!!</h1>,
  document.getElementById('app')
);

現在轉到 index.html 並修改程式碼，它應該是這樣的

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23                                              /browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">                           </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js">    </script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

有了這個，你就完成了，我希望你會發現它很簡單。