Need help with codepen using jsx

JavaScript
1

I’m having trouble figuring out how to use jsx on codepen. How can I get something as simple as ‘hello word’ to render?

This lesson: https://www.freecodecamp.org/learn/front-end-libraries/react/render-html-elements-to-the-dom

The code here doesn’t work when using it on codepen. How would I do this?

2

Things need to be set up in codepen for it to work, things that are being done behind the scenes for you on FCC for now. Can you provide a link to the pen where you tried this? We could better help you then.

3

Here is the link for the pen I was using. I didn’t change any settings, it’s just what fcc has.

4

Right, you’re going to need a place in the html for it to attach, so add this to the html:

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

Then you need a component in your JS and connect it up to the html - add this to your JS:

const App = () => <h1 style={ { textAlign: 'center' } }>Hello React</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

Now we need to get our preprocessor and imports set up. Go to the JS settings. Make sure the JavaScript Preprocessor is set to Babel. (It may already be.) Now we need to import the correct libraries that React needs. In the “Search CDNjs” box, type in “react” select that and then do it for “react-dom”. Confirm that those are listed on the resources.

With that, you should have a basic, functioning React app in CodePen.

5

This works! Thank you for saving the day!

1 Like
6

That’s cool. I’m sure someone will ask in the near future - pay it forward.

1 Like