Does React Code render to codepen or another code editor?

JavaScript
1

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.

2

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.

3

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

4

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

5

Oh. so I need react Dom.

6

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.

7

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.
8

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

9

Where is the vegetables component defined in your code?

10

Oh. I don’t think I added that.