React on Django, Boilerplate.

Reference

Github Repository : https://github.com/UrangUrang/SimpleReactDjango

Using : npm, pip, virtualenv, webpack, ecma2015, react, python, django…

$ virtualenv -p python3.4 venv
$ source venv/bin/activate
$(venv)pip install django==1.9.7
$(venv)pip install django-webpack-loader==0.3.3
$(venv)django-admin startproject dreact
$(venv)cd dreact
$(venv)npm init
$(venv)npm install --save react react-dom babel webpack webpack-dev-server
$(venv)npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server webpack-bundle-tracker

last line takes 1~2 minutes.

Current folder structure
$(venv)mkdir -p assets/js
$(venv)touch webpack.config.js
$(venv)touch assets/js/index.js
  • 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.js',
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',
query:{
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
}
};

Compiling first bundle

$(venv)webpack --config webpack.config.js

We got 2 new files.

  • /assets/bundles/main-[hash].js
  • ./webpack-stats.json

Make a example react app.

  • assets/js/index.js
$(venv)vi assets/js/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const rootElement = document.getElementById('react-app');
ReactDOM.render(<App />, rootElement);
  • assets/js/App.js
$(venv)vi assets/js/App.js
import React from 'react';

class App extends React.Component {
render(){
return (
<h1>Hello Django - React Skeleton</h1>
);
}
}

export default App;

We finished the React part. And now time to go the Django part.


  • settings.py
TEMPLATES = [
...
'DIRS': [os.path.join(BASE_DIR, 'templates')], # Add this
...
]
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',
)

Add Templates folder and index.html

$(venv)mkdir templates && touch templates/index.html
$(venv)vi templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
{% load render_bundle from webpack_loader %}<h1>Example</h1>
<div id="react-app"></div>
{% render_bundle 'main' %}
</body>
</html>
  • urls.py
from django.conf.urls import url
from django.contrib import admin
from django.views.generic.base import TemplateView
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name='index.html'), name='index'),
]

Rebundling webpack

$(venv)webpack --config webpack.config.js
webpack result

And run django-server

$(venv)./manage.py runserver
Browser

End

Github Repository : https://github.com/UrangUrang/SimpleReactDjango