Comments in React, React on CodePen

[crystalio303]

Making React and JSX display on editors is harder than expected. There are examples that look close that are that I might be misapplying. What are some keywords to search to find documentation? This is a link to a React component that has no display and the code.
2021-03-27-types-of-food-1-react.js (codepen.io)

<!--A react element with nesting. Example is invisible due to unprovided divs. -->
class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render()  {
return (
  <div>
    <h1>Types of Food:</h1/>
    <Fruits />
    <Vegetables />
  </div>
  );
}
    };
ReactDOM.render(<TypesOfFood />, document.getElementById("root"));

<div id="root"></div>

[kevinSmith]

I don’t know where a reference is. Codepen is kind of weird and requires some special setup. In a “real” app, this setup would need to be there but would be very different. But this is codepen:

First we need to setup the environment. Go into the JS settings. Press the JS tab. You should be looking at this:

We need Babel to translate our JSX. So in the JavaScript Preprocessor section, select Babel from the pull down.

Next we need the react library so we can do React and we need react-dom so we can hook into the dom. In the “Search CDNjs” input, enter those one at a time.

It should end up looking like this:

Then you have some code errors:

    <h1>Types of Food:</h1/>

Notice that there is an extra / in your closing tags.

Next:

    <Fruits />
    <Vegetables />

These are not defined. Remove them or comment them out for now.

When I do those things, I get output.

[crystalio303]

Typos were corrected and components commented out. React library and React DOM were added. Still, no luck.

<!--React modules from freeCodeCamp-->
class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render()  {
return (
  <div>
    <h1>Types of Food:</h1>
   <!-- <Fruits /> -->
  <!-- <Vegetables /> -->
  </div>
  );
}
    };
ReactDOM.render(<TypesOfFood />, document.getElementById("root"));


<div id="root">
</div>

2021-03-27-types-of-food-1-react.js (codepen.io)

[kevinSmith]

Your setup is good, but did HTML style comments. You need JS style comments. When I remove those, the code works.

[crystalio303]

Comments changed to “//,” it is still shows nothing. I made a second version to try to refresh.

[crystalio303]

Neither JS nor CSS comments are React comments.
{//}
{/(;-_-)//} Many symbols. Thanks.

[kevinSmith]

Yes, I agree with Randy. I would also suggest just deleting the comments just to get it to work for now.

[crystalio303]

After the fourth comment, the comment issue was solved. I thought you saw that in the fifth comment and the Solution mark.

[kevinSmith]

Ooops. Yeah.

JSX is not JS. There is no concept of a comment in JSX. But if you wrap something in curly braces, you are telling it “I am leaving JSX-land and entering JS-land”. Once in JS-land, you can use JS comments. So:

{ // comment }

or

{ /* comment */ }

The second one can span multiple lines.

[crystalio303]

That was funny.
It had been baffling that lines turned darker shades when commmented out with HTML and JS comments and that non-code text was inactive with single line JS comments. We escape JSX and use JavaScript comments.