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(<HelloMessage message='World' />, 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
– Henrik Andersson, Commented Oct 7, 2015 at 15:47
@limelights - thanks for the speedy response. I´ve tried "<HelloMessage message='World' />, " - 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
– Frank, Commented Oct 7, 2015 at 15:57

stargatesg1 · Accepted Answer · 2015-11-09 21:07:19Z

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 9, 2015 at 21:07

answered Oct 7, 2015 at 20:30

stargatesg1

298 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frank · Accepted Answer · 2015-10-23 20:42:39Z

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, 2015 at 20:42

Frank

1971 gold badge2 silver badges14 bronze badges

Collectives™ on Stack Overflow

React JS not rendering

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related