Why doesn't jsx work?

A

artjerom2016-06-18 00:11:08

React

artjerom, 2016-06-18 00:11:08

Why methods in jsx do not work, here is an example:

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

ReactDOM.render(<HelloMessage name="John" />, mountNode);

And here is the order of connecting scripts:

<!DOCTYPE html>
html(lang="en")
head
  meta(charset="UTF-8")
  title show react
  script(src='libs/react/react.min.js')
  script(src='libs/react/react-dom.min.js')
  script(src='libs/react/react-dom-server.min.js')
  script(src='libs/react/react-with-addons.min.js')
body
  .container
    h1 Gulp file
    hr
  script(src='jsx_template/test.js')

In the chrome console it displays the following message:
Uncaught ReferenceError: mountNode is not defined
There is a similar error not only in this example

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

rmaksim, 2016-06-18
@rmaksim

because mountNode is not defined
https://facebook.github.io/react/docs/getting-star...

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

find one (important) difference from your code ;)

V

Vyacheslav Nedorezov, 2016-06-18
@Slavken

define mountNode first for some element from your html
something like:
mountNode = document.getElementById('container');