React.js Not Rendering?

Question

So I have decided to start learning React.js, but am having problems rendering into the HTML

Cant seem to see whats wrong any help would be great both the HTML and JSX are below

(Note Full links to the react library are there just could post them here since Stack doesnt allow URL Shortners)

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="react-15.2.1.js"></script>
    <script src="react-dom-15.2.1.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div id="root"></div>
  </body>

</html>

JSX

// Code goes here

var Button = React.createClass({
  render: function() {
    return ( < button > Go < /button>)
  }
});

React.render( < Button / > , document.getElementById("root"));

JSX isn't a part of JavaScript natively, you'll have to transpile it into regular JavaScript to be able to develop in React (unless you wanna ditch the jsx syntax). Facebook recently released a generator that should set up a basic boilerplate, so you could look into using that: github.com/facebookincubator/create-react-app — Matis Lepik
– Matis Lepik, Commented Jul 24, 2016 at 0:27
@MatisLepik But I am using Plunker to develop in and it has native React Support — user4274473
– user4274473, Commented Jul 24, 2016 at 0:32
Ah. In that case, replace React.render with ReactDOM.render. Also, put the <script> tags at the end of the body (after the #root element) to ensure that the DOM has loaded before the javascript starts executing. — Matis Lepik
– Matis Lepik, Commented Jul 24, 2016 at 0:37

Justin Lessard · Accepted Answer · 2019-04-10 18:10:52Z

6

I have corrected your code, and placed the working result in this fiddle:

Your last line was wrong, it should be like this:

ReactDOM.render( < Button / > , document.getElementById("root"));

edited Apr 10, 2019 at 18:10

Justin Lessard

12.2k7 gold badges53 silver badges63 bronze badges

answered Jul 24, 2016 at 0:50

Bowen Li

3971 silver badge8 bronze badges

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

2 Comments

user4274473 Over a year ago

Yeah I know it was answered 15 mins ago in a line above you

Bowen Li Over a year ago

oops, just saw that. Anyway, my answer is always with a jsfiddle :_)

Collectives™ on Stack Overflow

React.js Not Rendering?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related