Does React Code render to codepen or another code editor?

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

Okay, So I tried to render some code from a freecodecamp challenge to codepen.
Here is my code:
HTML:
<div id = "challenge-node"></div>

Js:

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        { /* change code below this line */ }
<ul>
<li>sadflhjk</li>
<li>hafs</li>
<li>dhdjskdhfjksd</li>
</ul>
         { /* change code above this line */ }
      </div>
    );
  }
};

class TypesOfFood extends React.Component {
  constructor(props) {
     super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        { /* change code below this line */ }
<Fruits />
        { /* change code above this line */ }
        <Vegetables />
      </div>
    );
  }
};

ReactDOM.render(<TypesOfFood/>,document.getElementById('challenge-node'))

Please tell me how to properly render it and why it doesn’t in codepen. Thanks.

Did you include all the libraries needed to render JSX and React on the browser?

Check this boilerplate
https://codepen.io/enaqx/pen/cuIxm

And open the settings section, now to the Javascript tab to see the 3 js files required. Then change your pre-processor (on your own pen) to Babel so you can do the Class thing.

Yes. I did allow my pen to use react.
here is the react link:
https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js

You’re missing https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js

Oh. so I need react Dom.

I’m really bugged out here. It still doesn’t work.
How about you send me all of the required script links and see if it works.

You need these two. This will give you console errors.

//unpkg.com/react/umd/react.development.js
//unpkg.com/react-dom/umd/react-dom.development.js

The error you get is:

The above error occurred in the <TypesOfFood> component:
    in TypesOfFood

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

your code works when rendering to codepen, but mine doesn’t.

Where is the vegetables component defined in your code?

Oh. I don’t think I added that.