step12 - ReactJS talks to your API

Author: ruanlas

.idea/workspace.xml

@@ -6,7 +6,7 @@
 
     <h2 class="genus-name">{{ name }}</h2>
 
-    <a href="{{ path('genus_show_notes', {'genusName': name}) }}">Json Notes</a>
+    {# <a href="{{ path('genus_show_notes', {'genusName': name}) }}">Json Notes</a> #}
 
     <div class="sea-creature-container">
         <div class="genus-photo"></div>
@@ -21,28 +21,51 @@
             </dl>
         </div>
     </div>
-    <div class="notes-container">
-        <h2 class="notes-header">Notes</h2>
-        <div><i class="fa fa-plus plus-btn"></i></div>
-    </div>
-    <section id="cd-timeline">
 
-        {#{% for note in notes %}#}
 
-            {#<div class="cd-timeline-block">#}
-                {#<div class="cd-timeline-img">#}
-        			{#<img src="{{ asset('images/leanna.jpeg') }}" class="img-circle" alt="Leanna!">#}
-        		{#</div>#}
-                {#<div class="cd-timeline-content">#}
-        			{#<h2><a href="#">AquaPelham</a></h2>#}
+    {#<div class="notes-container">#}
+        {#<h2 class="notes-header">Notes</h2>#}
+        {#<div><i class="fa fa-plus plus-btn"></i></div>#}
+    {#</div>#}
+    {#<section id="cd-timeline">#}
+
+        {#&#123;&#35;{% for note in notes %}&#35;&#125;#}
+
+            {#&#123;&#35;<div class="cd-timeline-block">&#35;&#125;#}
+                {#&#123;&#35;<div class="cd-timeline-img">&#35;&#125;#}
+        			{#&#123;&#35;<img src="{{ asset('images/leanna.jpeg') }}" class="img-circle" alt="Leanna!">&#35;&#125;#}
+        		{#&#123;&#35;</div>&#35;&#125;#}
+                {#&#123;&#35;<div class="cd-timeline-content">&#35;&#125;#}
+        			{#&#123;&#35;<h2><a href="#">AquaPelham</a></h2>&#35;&#125;#}
 
-        			{#<p>{{ note }}</p>#}
+        			{#&#123;&#35;<p>{{ note }}</p>&#35;&#125;#}
 
-        			{#<span class="cd-date">Dec. 10, 2015</span>#}
-        		{#</div>#}
-            {#</div>#}
+        			{#&#123;&#35;<span class="cd-date">Dec. 10, 2015</span>&#35;&#125;#}
+        		{#&#123;&#35;</div>&#35;&#125;#}
+            {#&#123;&#35;</div>&#35;&#125;#}
 
-        {#{% endfor %}#}
+        {#&#123;&#35;{% endfor %}&#35;&#125;#}
+
+    {#</section>#}
+    <div id="js-notes-wrapper"></div>
 
-    </section>
 {% endblock %}
+{% block javascripts %}
+    {{ parent() }}
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+
+    <script type="text/babel" src="{{ asset('js/notes.react.js') }}"></script>
+    <script type="text/babel">
+
+        var notesUrl = '{{ path('genus_show_notes', {'genusName': name}) }}';
+
+        ReactDOM.render(
+                <NoteSection url={notesUrl}/>,
+                document.getElementById('js-notes-wrapper')
+        );
+    </script>
+
+{% endblock %}

app/Resources/views/genus/show.html.twig

@@ -12,7 +12,8 @@ var NoteSection = React.createClass({
 
     loadNotesFromServer: function() {
         $.ajax({
-            url: '/genus/octopus/notes',
+            //url: '/app_dev.php/genus/octopus/notes',
+            url: this.props.url,
             success: function (data) {
                 this.setState({notes: data.notes});
             }.bind(this)