把想法變為現實的能力是空想家與實干家的區別。不管你是在一家跨國公司工作，還是正在為自己的創業公司而努力，那些有能力將創意轉化為真正產品的人，都具有寶貴的技能並擁有明顯的實力。如果你能在不到一個小時的時間里創建一個全棧的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應用框架——界面美化與功能實現》