2017年4月4日 星期二

Django with React part2

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 //可以使用全域安裝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 //建立react主目錄
touch webpack-config.js //建立webpack設定檔
touch assets/js/index.js //建立react主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，就可以直接執行下列命令
webpack --config webpack-config.js
也可以執行以下命令
./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的設定

下一目標

  1. 研究React-Hot-Loader來提升開發速度
  2. 研究使用ajax來和後端python做溝通
  3. 研究使用在django使用redux
慢慢把這幾個興趣完成˙ˇ˙
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)