React 16.13.1 not Rendering on Codepen

1

I went through about a dozen similar questions on this issue. I think I’m rendering properly but nothing, not even the “HELLO WORLD” part shows. My pen is at https://codepen.io/themagicbean/pen/ExjrLrX, code below. Can anyone tell me what I’m overlooking? Thanks!

Html:
<div id="preview"></div>

CSS: None

JS Libraries:
https://cdnjs.cloudflare.com/ajax/libs/marked/0.8.2/marked.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js

JS:

// ALLOWS LINE BREAKS WITH RETURN BUTTON
marked.setOptions({
  breaks: true });

class App extends React.Component {
  constructor(props);
  super(props);
  this.state = {
    text: placeholder
  };
  
  render() {
    return 
    <div>
        <p>HELLO WORLD</p>
        <p>{this.state.text}</p>
        </div>
  };
};

const placeholder = 'TESTY MCTEXTSALOT';

//tried this with both "React.render" and "ReactDOM.render
ReactDOM.render(<App/>, document.getElementById('preview'));
2

I have noticed this error

 constructor(props);
  super(props);
  this.state = {
    text: placeholder
  };

Which should have been

constructor(props){
      super(props)
       this.state = {
            text: placeholder
        };
}

super(props) and state should be in constructor method
Similarly enclose the returned JSX in curly braces.

    return (
          <div>
               <p>HELLO WORLD</p>
               <p>{this.state.text}</p>
          </div>
           )
 

const bettertest = ''

Try the above changes
EDIT:
the order of the libraries is also important
dnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.https://c
https://cdnjs.cloudflare.com/ajax/libs/marked/0.8.2/marked.min.js

3

Thanks for catching the errors! But I fixed those (and the return statement previously missing parentheses) and I’m still not seeing anything displayed.

class App extends React.Component {
  constructor(props); {
    super(props);
    this.state = {
      text: placeholder
    }

    render() {
     return (
      <div>
          <p>HELLO WORLD</p>
          <p>{this.state.text}</p>
          </div>
       )
    };
  };
};

(Remaining code the same.)

4

Check the edit i have just made or fork this pen

5

Thanks! Your version is obviously working.