Django with React part2
繼續上一篇django with react環境建立
這次要來建立react所需的檔案
目標
建立react
將其應用到django的templates中
作法
運用npm來安裝所需套件
step1
npm init
此來建立package.json檔，它可以幫我們管理所安裝的套件
step2
npm install --save-dev react react-dom webpack-bundle-tracker babel babel-core babel-loader babel-present-react babel-preset-stage-0
安裝react套件
1. react , react-dom為主要使用的套件
2. babal系列為協助編譯ES6語法
3. webpack-bundle-tracker為此次重點，將react編譯後產生可讓django存取的檔案
step3
npm install -g webpack
npm install --save-dev webpack@2.1.0-beta.21
安裝所需的webpack，測試時發現使用2.1.0-beta.21此版本才能成功編譯webpack-config.js(後談)之中的resolve屬性，之後再研究有沒有其他版本可以正常使用
step4
mkdir -p assets/js
touch webpack-config.js
touch assets/js/index.js
step5
撰寫webpack-config.js檔，基本內容如下
var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
context: __dirname,
entry: './assets/js/index',
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name]-[hash].js',
},
plugins: [
new BundleTracker({
filename: './webpack-stats.json'
}),
],
module: {
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-0']
}
}],
},
resolve: {
modulesDirectories: ['node_modules', 'bower_components'],
extensions: ['', '.js', '.jsx'],
}
}
step6
撰寫react程式，先寫最基礎的展示看看即可
./assets/js/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App/>, document.getElementById('app'));
./assets/js/app.js
import React, {Component} from 'react';
class App extends Component{
render(){
return(
<h1>Hello React Django</h1>
);
}
}
export default App;
在使用webpack來編譯，如果前面有使用-g來安裝webpack，就可以直接執行下列命令
-- -.
也可以執行以下命令
./node_modules/.bin/webpack --config webpack.config.js
到目前為止react部分的設定就完成了，接下來就是要設定django能夠來存取webpack編譯出的檔案
step7
pip install django-webpack-loader
此次另一重點，這是用來讀取webpack的檔案，詳細可觀看django-webpack-loader官方文件
step8
到setting.py做讀取的設定
主要新增以下設定
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
INSTALLED_APPS = (
...
'webpack_loader',
)
step9
將template的html做修改
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app"></div>
{% render_bundle 'main' %}
</body>
</html>
final
最後就可以啟動server，並且依照上一篇設定的路徑http://127.0.0.1:8000/hello/
觀看結果
python manage.py runserver
至此就是django with react的設定
下一目標
- 研究React-Hot-Loader來提升開發速度
- 研究使用ajax來和後端python做溝通
- 研究使用在django使用redux
慢慢把這幾個興趣完成˙ˇ˙
