Skip to content

Commit 1531cf3

Browse files
markfingermarkfinger
committed
Updating the example to using the latest code base.
The big change is the removal of the django-webpack dependency from django-react. django-webpack is still recommended if you want to run client-side JS, but is no longer necessary. django-react is now purely for rendering components, django-webpack is purely for bundling JS. Furthermore, django-webpack is now configured via webpack config files, rather than the fairly limited python-level configuration that was formerly offered. Decoupling the two also means that the dev workflow is no longer constrained by the fairly contrived approach that I originally envisaged, you can now approach things in whichever way suits you. Fixes markfinger#10
1 parent d78ef84 commit 1531cf3

29 files changed

Lines changed: 10007 additions & 171 deletions

‎example/djangosite/settings.py‎

Lines changed: 52 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,80 @@
1-
"""
2-
Django settings for djangosite project.
3-
4-
For more information on this file, see
5-
https://docs.djangoproject.com/en/1.7/topics/settings/
6-
7-
For the full list of settings and their values, see
8-
https://docs.djangoproject.com/en/1.7/ref/settings/
9-
"""
10-
11-
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
121
import os
13-
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
142

3+
# DJANGO
4+
# ======
155

16-
# Quick-start development settings - unsuitable for production
17-
# See https://docs.djangoproject.com/en/1.7/howto/deployment/checklist/
18-
19-
# SECURITY WARNING: keep the secret key used in production secret!
20-
SECRET_KEY = 'g53620k@hd@#)scvr213a6d3n18zknqgv0s=0l&%0r@i^!5ge$'
6+
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
217

22-
# SECURITY WARNING: don't run with debug turned on in production!
238
DEBUG = True
249

25-
TEMPLATE_DEBUG = True
26-
27-
ALLOWED_HOSTS = []
28-
10+
TEMPLATE_DEBUG = DEBUG
2911

30-
# Application definition
12+
SECRET_KEY = '_'
3113

3214
INSTALLED_APPS = (
33-
'django.contrib.admin',
34-
'django.contrib.auth',
35-
'django.contrib.contenttypes',
36-
'django.contrib.sessions',
37-
'django.contrib.messages',
3815
'django.contrib.staticfiles',
39-
40-
'django_node',
41-
'example_app',
4216
)
4317

44-
MIDDLEWARE_CLASSES = (
45-
'django.contrib.sessions.middleware.SessionMiddleware',
46-
'django.middleware.common.CommonMiddleware',
47-
'django.middleware.csrf.CsrfViewMiddleware',
48-
'django.contrib.auth.middleware.AuthenticationMiddleware',
49-
'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
50-
'django.contrib.messages.middleware.MessageMiddleware',
51-
'django.middleware.clickjacking.XFrameOptionsMiddleware',
18+
STATICFILES_FINDERS = (
19+
'django.contrib.staticfiles.finders.FileSystemFinder',
20+
'django.contrib.staticfiles.finders.AppDirectoriesFinder'
5221
)
5322

23+
MIDDLEWARE_CLASSES = ()
24+
5425
ROOT_URLCONF = 'djangosite.urls'
5526

56-
# Database
57-
# https://docs.djangoproject.com/en/1.7/ref/settings/#databases
27+
STATIC_URL = '/static/'
28+
29+
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
30+
31+
32+
# DJANGO NODE
33+
# ===========
5834

59-
DATABASES = {
60-
'default': {
61-
'ENGINE': 'django.db.backends.sqlite3',
62-
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
63-
}
35+
INSTALLED_APPS += (
36+
'django_node',
37+
)
38+
39+
DJANGO_NODE = {
40+
'SERVICES': (),
41+
'PACKAGE_DEPENDENCIES': (),
6442
}
6543

66-
# Internationalization
67-
# https://docs.djangoproject.com/en/1.7/topics/i18n/
6844

69-
LANGUAGE_CODE = 'en-us'
45+
# DJANGO WEBPACK
46+
# ==============
7047

71-
TIME_ZONE = 'UTC'
48+
INSTALLED_APPS += (
49+
'django_webpack',
50+
)
7251

73-
USE_I18N = True
52+
DJANGO_NODE['SERVICES'] += (
53+
'django_webpack.services',
54+
)
7455

75-
USE_L10N = True
56+
STATICFILES_FINDERS += (
57+
'django_webpack.staticfiles.WebpackFinder',
58+
)
7659

77-
USE_TZ = True
60+
# DJANGO REACT
61+
# ============
7862

63+
INSTALLED_APPS += (
64+
'django_react',
65+
)
7966

80-
# Static files (CSS, JavaScript, Images)
81-
# https://docs.djangoproject.com/en/1.7/howto/static-files/
67+
DJANGO_NODE['SERVICES'] += (
68+
'django_react.services',
69+
)
8270

83-
STATIC_URL = '/static/'
8471

85-
DJANGO_NODE = {
86-
'SERVICES': (
87-
'django_react.services',
88-
)
89-
}
72+
# EXAMPLE APP
73+
# ===========
74+
75+
INSTALLED_APPS += (
76+
'example_app',
77+
)
78+
79+
# Instruct django-node to install the example app's package.json dependencies
80+
DJANGO_NODE['PACKAGE_DEPENDENCIES'] += (BASE_DIR,)

‎example/djangosite/urls.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
from django.conf.urls import patterns, include, url
22

33
urlpatterns = patterns('',
4-
url(r'^$', include('example_app.urls')),
5-
)
4+
url(r'^', include('example_app.urls')),
5+
)

‎example/example_app/static/example_app/HelloWorld.jsx‎

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎example/example_app/static/example_app/components/Comment.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import marked from 'marked';
3+
4+
export default React.createClass({
5+
render() {
6+
var rawMarkup = marked(this.props.text);
7+
return (
8+
<div>
9+
<h3>
10+
{this.props.author}
11+
</h3>
12+
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
13+
</div>
14+
);
15+
}
16+
});

‎example/example_app/static/example_app/components/CommentBox.jsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import $ from 'jquery';
3+
import CommentList from './CommentList.jsx';
4+
import CommentForm from './CommentForm.jsx';
5+
6+
export default React.createClass({
7+
getInitialState() {
8+
return {comments: this.props.comments};
9+
},
10+
handleCommentSubmit(comment) {
11+
var comments = this.state.comments;
12+
comments.push(comment);
13+
this.setState({comments: comments}, () => {
14+
this.postComment(comment);
15+
});
16+
},
17+
postComment(comment) {
18+
$.ajax({
19+
url: this.props.url,
20+
type: 'POST',
21+
dataType: 'json',
22+
data: comment,
23+
success: (comments) => {
24+
this.setState({comments: comments});
25+
},
26+
error: (xhr, status, err) => {
27+
console.error(this.props.url, status, err.toString());
28+
}
29+
});
30+
},
31+
getComments() {
32+
$.ajax({
33+
url: this.props.url,
34+
dataType: 'json',
35+
success: (comments) => {
36+
this.setState({comments: comments});
37+
},
38+
error: (xhr, status, err) => {
39+
console.error(this.props.url, status, err.toString());
40+
},
41+
complete: this.pollForNewComments
42+
});
43+
},
44+
pollForNewComments() {
45+
setTimeout(this.getComments, this.props.pollInterval);
46+
},
47+
componentDidMount() {
48+
this.pollForNewComments();
49+
},
50+
render() {
51+
return (
52+
<div>
53+
<CommentList comments={this.state.comments} />
54+
<CommentForm url={this.props.url} onCommentSubmit={this.handleCommentSubmit} />
55+
</div>
56+
);
57+
}
58+
});

‎example/example_app/static/example_app/components/CommentForm.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
3+
export default React.createClass({
4+
handleSubmit(e) {
5+
e.preventDefault();
6+
var author = this.refs.author.getDOMNode().value.trim();
7+
var text = this.refs.text.getDOMNode().value.trim();
8+
if (!text || !author) {
9+
return;
10+
}
11+
this.props.onCommentSubmit({author: author, text: text});
12+
this.refs.author.getDOMNode().value = '';
13+
this.refs.text.getDOMNode().value = '';
14+
},
15+
render() {
16+
return (
17+
<form method="POST" action={this.props.url} onSubmit={this.handleSubmit}>
18+
<h2>Submit a comment</h2>
19+
<div className="form-group">
20+
<label>
21+
Your name
22+
<input type="text" className="form-control" name="author" ref="author" />
23+
</label>
24+
</div>
25+
<div className="form-group">
26+
<label>
27+
Say something...
28+
<textarea className="form-control" name="text" ref="text" />
29+
</label>
30+
</div>
31+
<div className="text-right">
32+
<button type="reset" className="btn btn-default">Reset</button>
33+
<button type="submit" className="btn btn-primary">Submit</button>
34+
</div>
35+
</form>
36+
);
37+
}
38+
});

‎example/example_app/static/example_app/components/CommentList.jsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import Comment from './Comment.jsx';
3+
4+
export default React.createClass({
5+
render() {
6+
if (!this.props.comments.length) {
7+
return null;
8+
}
9+
var commentNodes = this.props.comments.map((comment, index) => {
10+
return <Comment author={comment.author} text={comment.text} key={index} />;
11+
});
12+
return (
13+
<div>
14+
<h2>Comments</h2>
15+
{commentNodes}
16+
</div>
17+
);
18+
}
19+
});

‎example/example_app/static/example_app/main.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
h1 {
2+
border-bottom: 1px solid #ddd;
3+
}
4+
5+
h2 {
6+
border-bottom: 1px solid #eee;
7+
}
8+
9+
form label {
10+
display: block;
11+
}
12+
13+
form button {
14+
margin-left: 5px;
15+
}

0 commit comments

Comments
 (0)