React hello world

polls_react/config/settings.py

@@ -45,6 +45,7 @@ def load_secret_key():
 INSTALLED_APPS = [
     'polls.apps.PollsConfig',
 
+    'argonauts', # contains JSON template tag
     'rest_framework',
 
     'django.contrib.admin',

polls_react/polls/templates/polls/index.html

@@ -1,3 +1,33 @@
+{% load static %}
+
+{% load argonauts %}
+
+<h1>New style</h1>
+
+<div id=pollsContent></div>
+
+<script src="{% static 'react.js' %}"></script>
+<script src="{% static 'react-dom.js' %}"></script>
+<script src="{% static 'browser.min.js' %}"></script>
+<script src="{% static 'jquery.min.js' %}"></script>
+<script type="text/babel">
+    var pollsData = {{ polls_data|json }};
+    var PollBox = React.createClass({
+        render: function() {
+            return (
+                    <textarea cols="80" rows="25"
+                              value={JSON.stringify(pollsData)} readOnly>
+                    </textarea>);
+        }
+    });
+    ReactDOM.render(
+            <PollBox/>,
+            document.getElementById('pollsContent')
+    );
+</script>
+
+<h1>Old style</h1>
+
 {% if latest_question_list %}
     <ul>
     {% for question in latest_question_list %}

polls_react/polls/views.py

@@ -12,8 +12,11 @@
 
 def index(request):
     latest_question_list = Question.objects.order_by('-pub_date')[:5]
+    polls_data = QuestionSerializer(latest_question_list, many=True,
+                                    context={'request': request}).data
     return render(request, 'polls/index.html', {
-        'latest_question_list': latest_question_list
+        'latest_question_list': latest_question_list,
+        'polls_data': polls_data
     })
 
 def detail(request, question_id):

requirements.txt

@@ -1,2 +1,3 @@
 Django==1.10
 djangorestframework>=3.4.4
+django-argonauts