Kirupa React book > Chapter 15 > Don't see the result.

1

Hey,
I have purchased the React Book. In the chapter 15, I have set up my environment with success… But I don’t see the result in my index.html page

Hello, Batman…
… etc

Any idea will be appreciated !

Thanks!

neuhaus3000

2

Help us help you by maybe sharing what the console is saying when you are trying to open index.html? You can access the console from the browser developer tools by right clicking on the page. :blush:

3

Hey Millad!
Here’s my console error:
Uncaught TypeError: o.a.createClass is not a function
at Module. (myCode.js:6)
at n (myCode.js:1)
at myCode.js:1
at myCode.js:1

4

This is surely a version problem, If you are starting fresh, I would suggest you to create a React component by extending React.Component rather than using React.createClass since its deprecated from version 16.0 onwards and has been moved to a separate package 'create-react-class'

5 
import React from 'react';

export default class App extends React.Component {
    render(){
       return(
           <div>
               <h1> the list  </h1>
           </div>   
        )
     }
}
6

Same error after modifying… :frowning:

import React from "react";
import ReactDOM from "react-dom";

var HelloWorld = export default class App extends React.Component({
    render: function() {
	    return (
		    <p>Hello, {this.props.greetTarget}!</p>
	    );
    }
});

ReactDOM.render(
    <div>
	    <HelloWorld greetTarget="Batman"/>
	    <HelloWorld greetTarget="Iron Man"/>
	    <HelloWorld greetTarget="Nicolas Cage"/>
	    <HelloWorld greetTarget="Mega Man"/>
	    <HelloWorld greetTarget="Bono"/>
	    <HelloWorld greetTarget="Catwoman"/>
    </div>,
    document.querySelector("#container")
);
7

I think this
var HelloWorld = export default class App extends React.Component({

Should be

var HelloWorld = React.Component({

8

Modified without success… :frowning:

9

What error are you getting now? Same?

10

Can you please zip up and attach your full project / file? There is something minor going on that we all are missing (aka the joys of programming) :upside_down_face:

11

There it is without the node modules (too big).

12

Thanks for sharing the project. The reason for the error is due to a version mismatch between what versions of React support createClass and which ones don’t. When you mentioned you bought the React book, it seems like you purchased last year’s edition which has some breaking changes compared to what React provides today :slight_smile:

To fix your code, @Wayne was on the right track. Replace the contents of index.jsx with the following:

import React from "react";
import ReactDOM from "react-dom";
 

export default class HelloWorld extends React.Component {
	render(){
		 return(
			<p>Hello, {this.props.greetTarget}!</p>
			)
	 }
}
 
ReactDOM.render(
  <div>
    <HelloWorld greetTarget="Batman"/>
    <HelloWorld greetTarget="Iron Man"/>
    <HelloWorld greetTarget="Nicolas Cage"/>
    <HelloWorld greetTarget="Mega Man"/>
    <HelloWorld greetTarget="Bono"/>
    <HelloWorld greetTarget="Catwoman"/>
  </div>,
  document.querySelector("#container")
);

This should ensure your app works fine. The way to build your React apps today via the command line is to use something like create-react-app. I wrote about how to do that here: https://www.kirupa.com/react/setting_up_react_environment.htm

Getting back to the version mismatch issues, the recommended way to build your React components is to use the class syntax. That is a minor transfer of knowledge from what you already learned with createClass. My revised Components tutorial will help you make that jump.

Let me know if that helps :slight_smile:

Cheers,
Kirupa

13

Hey Kirupa,

Yes, I did the trick ! I’ll follow the instructions from the website from now on.

Thanks a lot !
neuhaus3000

1 Like