CODEWITHSUNDEEP
javascriptruby-on-railsrubyruby-on-rails-4reactjs
IvRRimUm
IvRRimUm

Reputation: 1834

Uncaught ReferenceError: ReactDOM is not defined

So i have Rails applications, i installed react-rails gem, set it up and try to run test application.

Freshly installed, when i tryed to run hello world program, this error hapened:

Uncaught ReferenceError: ReactDOM is not defined

This is my react: 

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});

setInterval(function() {
  ReactDOM.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

Its saved inside /app/assets/javascripts/components/test.js.jsx file.

Rails 4.2.4 With Ruby 2.2.3

Upvotes: 53

Views: 99348

Answers (6)

Adarsh Babu PR
Adarsh Babu PR

Reputation: 197

Make sure it's ReactDOM (case sensitive)

          class App extends React.Component {
            render() {
                return (
                    <div>
                        <div className="commentbox">Hello React ! </div>
                    </div>
                );
            }
        }
        ReactDOM.render(<App />, document.getElementById('root'));

Upvotes: 5

Anand Raja
Anand Raja

Reputation: 3108

To make it work properly, you have to do 3 things.

  1. Import the CDNs, necessary for the developement(Say react and react-dom for web development)
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  1. install babel-cli . It is needed for the compilation of JSX into vanila js

  2. change the typo in your code,

it is ReactDOM , not RaactDOM

Upvotes: 0

Adam
Adam

Reputation: 3518

It may be the spelling issue - it is ReactDOM, not ReactDom.

This has changed over time with the new release of React

Upvotes: 89

Oleksandr T.
Oleksandr T.

Reputation: 77482

ReactDOM available since version 0.14.0, so you need to use React.render (because you have a React version 0.13.3) instead, 

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('example')
  );
}, 500);

or upgrade your React version and include ReactDOM

Changes in React 0.14

Upvotes: 29

Kay
Kay

Reputation: 429

You have to import it 

import ReactDOM from 'react-dom';

Upvotes: 19

Seppo Ervi&#228;l&#228;
Seppo Ervi&#228;l&#228;

Reputation: 7470

Make sure that you've included react-dom.js. You can add it from CDN or use js toolchain of your choice.

Installing React - using a CDN

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Upvotes: 9

Related Questions