CODEWITHSUNDEEP
reactjsrender
Webconstructor
Webconstructor

Reputation: 545

React TypeError: React.renderComponent is not a function

I've got this weird message after following a React tutorial building a simple app. http://blog.revathskumar.com/2014/05/getting-started-with-react.html

I used bower to install react and included the scripts like so:

<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>

as in the tutorial. At first I thought the scripts weren't loaded but that's obviously not the case. What is the problem?

Upvotes: 18

Views: 23500

Answers (6)

FraggaMuffin
FraggaMuffin

Reputation: 4225

I had the same problem; I followed the tutorial precisely and I got the same error you did.

These are the changes I needed to make to get it to work...

npm install --save react-dom

changed index.jsx content:

/** @jsx React.DOM */
'use strict'
var ReactDOM = require('react-dom')
var Hello = require('./Hello')
ReactDOM.render(<Hello />, document.getElementById('content'))

And that got it

I'm very new to react, so this may not be the best solution, but it's mine for now.

edit : I've since found another, more recent walkthrough (which works) https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Upvotes: 3

Ignatius Andrew
Ignatius Andrew

Reputation: 8258

Lately 'React.render()' is depreciated So use 'ReactDom.render()'

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App.jsx';
require('./main.scss');

ReactDOM.render(<App />, document.getElementById('container'));

Upvotes: 7

Quera
Quera

Reputation: 1

you should write ReactDOM.render ,instead of React.render.

https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

These three javascript is required

Upvotes: 0

Kent Aguilar
Kent Aguilar

Reputation: 5338

  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 for your reference

<div id="target-container"></div>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var MyComponent = React.createClass({
        render: function(){
            return(
                <h1>Sample text</h1>
            );
        }
    });

    ReactDOM.render(
        <MyComponent/>,
        document.getElementById('target-container')
    );
</script>

Upvotes: 1

Connor Leech
Connor Leech

Reputation: 18834

These days it is

ReactDOM.render(

and include the source file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>

This is the warning from React:

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.

Upvotes: 23

Webconstructor
Webconstructor

Reputation: 545

bower installs the latest version in this case version 0.12.0.

there is a change in the render function convention.

https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

Component has been removed from all of our React.render* methods.

so use

    React.render(

instead of

   React.renderComponent(

Upvotes: 17

Related Questions