CODEWITHSUNDEEP
javascriptreactjs
Andrey Bushman
Andrey Bushman

Reputation: 12516

What is wrong in my "Hello World" example?

I learn ReactJS and try to use it through the "clear ReactJS".

This is my simple code:

class MyList extends React.Component{

        constructor(data){
            super(data)
            this.text = data.text
        }
        
        render(){
            return React.createElement("h1", null,
            this.props.text)
        }
    }
    
const root = document.getElementById("root")
const component = new MyList({text:"abcdefgh"})
ReactDOM.render(component,root)
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

But it doesn't work. Why it doesn't work?

Thank you.

Upvotes: 0

Views: 104

Answers (2)

Shubham Yerawar
Shubham Yerawar

Reputation: 688

You are using older version of ReactJS. This is how it looks with React v16.

import React,{ Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    return(
      <h1>Hello World</h1>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Upvotes: 0

Joel Lord
Joel Lord

Reputation: 2173

The error is in your const component line. The first argument of your ReactDOM.render function should be an actual component. Components are generated by using React.createElement (just like you did in your render() function for your MyList component. Here is a working example: https://jsbin.com/lejuwet/1/edit?html,js,output

class MyList extends React.Component{

        constructor(data){
            super(data)
            this.text = data.text
        }

        render(){
          console.log("render");
            return React.createElement("h1", null,
            this.props.text)
        }
    }

const root = document.getElementById("root")
const component = new React.createElement(MyList, {text: "123"});
ReactDOM.render(component, root)

Upvotes: 3

Related Questions