把想法變為現實的能力是空想家與實幹家的區別。不管你是在一家跨國公司工作，還是正在為自己的創業公司而努力，那些有能力將創意轉化為真正產品的人，都具有寶貴的技能並擁有明顯的實力。如果你能在不到一個小時的時間裡建立一個全棧的Web應用，那麼你就有能力為自己下一個偉大的想法迅速的的建立一個簡單的MVP，或者在工作中快速構建一個新的應用程式。
本文介紹了建立一個簡單的全棧Web應用所需的步驟，其中包括一個Python伺服器和一個React前端。你可以輕鬆的在其基礎上進行構建，根據你的實際需求進行修改，或是新增一些其他技術特性，例如Redux。
世界在網際網路的驅動下，計算機的基本技術和簡單工具已經成為現代商業人士的必備技能。本文適合想要學習怎樣製作一個簡單的基於web的應用程式，並且具備基本程式設計技能的人。
儘管你可以在我的GitHub上找到本文所有的原始碼，但是如果你能夠從頭開始建立這個程式，將會得到最好的學習成果。
初始專案設定
|
1 2 3 4 5 6 7 8 9 |
. ├── README.md └── fullstack_template/ ├── server/ └── static/ ├── css/ ├── dist/ ├── images/ └── js/ |
我們將使用npm包管理器來處理Javascript依賴項。Npm是非常棒的，因為它易於使用，有良好的文件支援，有將近50萬個包可供使用，以及合理的預設專案設定方案。
使用包管理器可以使您的專案依賴項保持最新狀態，並能夠獲取和安裝最新的包。
讓我們初始化專案：
|
1 2 |
$ cd fullstack_template/static $ npm init |
在初始化的過程中可以接受預設設定，但是你最好填寫自己的程式名稱和Git庫等引數，結束後會自動在你的static目錄下生成一個名為package.json 的檔案。
package.json檔案有如下幾個作用：
- 跟蹤所有的依賴項及其版本。
- 它可是使其他開發人員瞭解你的專案，比如應用的名稱、說明、所有者和所在儲存庫的位置。
- 可以非常容易的通過npm進行自動化安裝、執行和更新。
安裝和配置Webpack
Webpack是一個模組打包器。它可以處理你所有的模組依賴，並生成靜態資源。 使用模組打包器可以減少瀏覽器需要載入的模組數量，從而大大縮短了網頁的載入時間。
演示了Webpack是怎樣工作的
安裝Webpack：
|
1 |
$ npm i webpack --save-dev |
要使用Webpack，我們需要新增一個 Webpack 配置檔案。這個配置告訴 Webpack 在哪裡可以找到 JavaScript 和 React 檔案，以及在哪裡放置生成的JavaScript包。
在static目錄中新增一個名為webpack.config.js的檔案，下面的內容如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const webpack = require('webpack'); const config = { entry: __dirname + '/js/index.jsx', output: { path: __dirname + '/dist', filename: 'bundle.js', }, resolve: { extensions: ['.js', '.jsx', '.css'] }, }; module.exports = config; |
新增執行命令
向package.json檔案中新增一些執行命令會是你的開發過程更加順暢。我總是在自己的package.json 檔案中新增一些build, dev-build 和 watch 命令。
build用於構建生產環境版本, dev-build用於開發時的構建版本，watch的作用和dev-build類似，只不過可以自動監視專案檔案是否修改，並且自動重新構建被修改的部分，你只需要重新整理瀏覽器就可以看到改動後的結果。
自動化構建你的專案還有一個好處，那就是你不會耗費時間去思考為什麼修改了程式碼卻看不到效果，一般遇到這種情況純粹是因為你忘記了構建它們！
以下是我的 package.json 檔案內容：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ "name": "FullStackTemplate", "version": "1.0.0", "description": "A Template for creating a Full Stack Web Application using Python, NPM, Webpack and React", "main": "index.js", "scripts": { "build": "webpack -p --progress --config webpack.config.js", "dev-build": "webpack --progress -d --config webpack.config.js", "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --progress -d --config webpack.config.js --watch" }, "keywords": [ "fullstack", "template", "python", "react", "npm", "webpack" ], "author": "Angela Branaes", "license": "MIT", "devDependencies": { "webpack": "^3.0.0" } } |
新增Babel支援
Babel能夠允許我們使用最新的JavaScript特性編碼，即便是瀏覽器還沒有支援它們。通過安裝ES2015和react presets，Babel能夠把使用 Javascript 新特性和 React jsx 的程式碼轉換為與當前瀏覽器相容的 JavaScript 語法。
Babel轉換JavaScript程式碼的示例
安裝Babel：
|
1 |
$ npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev |
新增Babel presets到package.json檔案中：
|
1 2 3 4 5 6 |
"babel": { "presets": [ "es2015", "react" ] }, |
在 Webpack 的配置中新增一條 babel-loader 規則。注意，我們在規則中排除了node_modules。這可以保證 Babel 不會嘗不會對 node 模組進行轉換，從而不會影響到node程式的載入速度。
|
1 2 3 4 5 6 7 8 9 |
module: { rules: [ { test: /\.jsx?/, exclude: /node_modules/, use: 'babel-loader' } ] } |
建立 index.jsx 和 index.html
為了能在瀏覽器中看到一些東西，我們將建立一個簡單的index.html頁面，這個頁面只顯示一個由JavaScript彈出的“Hello World!”對話方塊，以此來證明設定是正確的。
在static目錄中建立一個index.html檔案，並填寫下面的程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!— index.html —> <html> <head> <meta charset="utf-8"> <!-- Latest compiled and minified bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> <title>Creating a Full-Stack Python Application with NPM, React.js and Webpack</title> </head> <body> <div id="content" /> <script src="dist/bundle.js" type="text/javascript"></script> </body> </html> |
在static/js目錄下建立一個index.jsx檔案，並新增下面的程式碼：
|
1 |
alert(“Hello World!”); |
啟動一個獨立的終端視窗來執行前面建立的 Webpack watch 命令，這樣當我們在工作時，它可以在後臺一直執行。它會在沒有編碼錯誤的前提下自動構建你的包。
|
1 |
$ npm run watch |
開啟瀏覽器並訪問index.html，應該能夠看到彈出一個寫著“Hello World!”的提示視窗。
建立一個簡單的 React 應用
首先需要安裝React：
|
1 |
$ npm i react react-dom --save-dev |
下一步讓我們用一個簡單的 React 應用替換掉前面的index.jsx，並讓它載入一個建立在單獨的 App.js 檔案中的 React 類。
|
1 2 3 4 5 |
// index.jsx import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("content")); |
React 類需要在不同的React原始碼檔案中做匯出，以方便後面的使用。通常每個檔案中只寫一個類，並且匯出。
|
1 2 3 4 5 6 7 |
// App.jsx import React from “react”; export default class App extends React.Component { render () { return <p> Hello React!</p>; } } |
如果我們現在重新整理瀏覽器，頁面上將會顯示“Hello React!”，而不再是“Hello World!”提示框。
配置Python服務
關於Python伺服器我們將會使用Flask。Flask是小型Python應用的最佳選擇之一。“微框架（microframework）”可以使你在短短几分鐘內輕鬆快速的使一個服務跑起來。對於大型應用和某些專業領域，企業通常會使用 Pyramid 或 Django。如果你想在自己的環境中擁有很大的靈活性和能夠自定義配置的特性，Pyramid是一個不錯的選擇。Django則提供了一個全功能的Web框架，同時使你不必為應用的配置花費太多的時間，比如在資料庫配置等方面。
建立一個新的virtualenv並安裝Flask
在server目錄中建立Flask服務原始碼檔案，新增一個用來返回返回“Hello World!”的端點路由“/hello”，再新增一個主頁面端點路由 “/“ 用來渲染index.html 模版。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# server.py from flask import Flask, render_template app = Flask(__name__, static_folder="../static/dist", template_folder="../static") @app.route("/") def index(): return render_template("index.html") @app.route("/hello") def hello(): return "Hello World!” if __name__ == "__main__": app.run() |
執行python服務：
|
1 |
$ python server.py |
接下來訪問http://localhost:5000/就可以看到 react 應用提供的的“Hello React!”提示。訪問http://localhost:5000/hello 將會看到由Python端點路由返回的“Hello World!”
恭喜，現在你已經有了一個基本的全棧應用
如果你想要學習如何與伺服器進行通訊，以及怎樣使自己的程式更加美觀，請等待本文的下半部分：《一個小時搭建一個全棧Web應用框架——介面美化與功能實現》