score:1

For beginners, the error (type/undefined is undefined) may also show up due to the placement of React.render code block.

It should be placed after creating the components, preferably at the bottom.

score:1

React.render was introduced in version 0.12 as documented here: https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

To fix your issue upgrade to that version or higher. At time of writing the latest version is 0.13.3.

score:1

  1. Download the latest React Starter Kit -> https://facebook.github.io/react/downloads.html
  2. Use react.js and react-dom.js files on the build folder.
  3. Instead of using the "text/jsx" use "text/babel" instead, referencing this minified library -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

Here's the full script referencing your initial code.

<style>
    .commentBox{
        color:red;
        font-size:16px;
        font-weight:bold
    }
</style>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

<script type="text/babel">
    var CommentBox = React.createClass({
        render: function(){
            return (
              React.DOM.div({className: "commentBox"}, 
                "Hello, world! I am a CommentBox."
              )
            );
        }
    });

    ReactDOM.render(
        <CommentBox/>,
        document.getElementById('content')
    );
</script>

score:2

After 0.13.x React moved React.renderComponent() to React.render().

score:2

For reasons unknown to me I had to wrap mine in {}

So from:

import React from "react";
import render from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

To (Working):

import React from "react";
import {render} from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

score:4

I'm not very familiar with React, but it looks like you should be using React.renderComponent instead of React.render

By running your code generated by rails-react locally on my browser and playing with the React object, it looks like the render method does not exist. Instead, React contains a renderComponent method:

enter image description here

If you change the code to use React.renderComponent instead of React.render, the component gets rendered on the DOM.

You can see it working here: http://jsfiddle.net/popksfb0/

score:15

You should update to the latest React library.

Some tutorials were updated to use React.render() instead of the deprecated React.renderComponent(), but the authors are still providing links to older versions or React, which do not have the newest render() method.

score:67

After 0.14 React moved to ReactDOM.render(), so if you update React, your code should be:

ReactDOM.render(
  <CommentBox />, document.getElementById('content'));

But make sure to include both react.js and react-dom.js in your project since those are now separated.


Related Query

More Query from same tag