React JS not rendering

Question

I´ve built the backend of my project with Django using Pycharm as my IDE. I have now decided to proceed on the frontend using React js. I´ve started out with some simple tutorials but cannot get the code to render anything. The strange thing is, that if I complete the same tutorial in Atom io and open the html file, the code renders as expected. The same code written in Pycharm comes up as a blank page. I´ve tried opening in both chrome and firefox after I "runserver" but with no success.

Project/static/our_static/js/jstest.js

    var HelloMessage = React.createClass({
        render: function () {
                return <h1>Hello {this.props.message}! </h1>;
            }
        });

    React.render(HelloMessage, message="World" , document.body);

project/templates/master_pages/helloworld.html

{% load staticfiles %}
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Hello World</title>
  </head>
  <body>
  <h1> </h1>
    <script src="http://fb.me/react-0.12.2.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src= '{%  static   "js/jstest.js" %}' ></script>
    
  </body>
</html>

What happens when you do `React.render(, document.body);`? Also move your script tags outside of the body otherwise React will overwrite your entire body since your doing `document.body`. Also take a look at what your static tag outputs. — Henrik Andersson, Oct 07 '15 at 15:47
@limelights - thanks for the speedy response. I´ve tried ", " - thats what the code should have been - but I´ve tampered with it. I´ve moved the script tags and the static tag should be correct - you can see the directories in my snippets. But I´m still coming up blank... — Frank, Oct 07 '15 at 15:57

stargatesg1 · Answer 1 · 2015-11-09T21:07:19.997

2

Take a look at this fiddle the problem is your code here.

React.render(HelloMessage, message="World" , document.body);

Here is the react code. The issue in your code is you are missing the closing html tags.

React.render(<HelloMessage message="World" /> , document.body);

https://jsfiddle.net/kyoukhana/rLg9p8qL/2/

edited Nov 09 '15 at 21:07

answered Oct 07 '15 at 20:30

stargatesg1

29
8

score 1 · Accepted Answer · answered Oct 23 '15 at 20:42

1

After lots of trial and error I found out that my jsx would only render if I added type="text/jsx" in my script path.

answered Oct 23 '15 at 20:42

Frank

197
1
2
14

React JS not rendering

2 Answers2

Linked