Setting up React on Codepen

I just started using code pen, I cant seem to run react the same way i would using VS code in which all my files are basically js files. What do I do to setup react so that it renders in code pen?

Hello :slight_smile:!

You have to configure it through the settings.

  1. Go to your pen settings.
  2. Go to the JS section.
  3. Configure Babel as the preprocessor and add the required libraries below it, where it says Search CDNjs:

(You must add react or react-js and react-dom)

  1. Write your code.

Check out this basic pen: https://codepen.io/skaparate/pen/ZEKPdrz

1 Like

so heres a screenshot of some class i made it doesnt seem to render. Is there some extra steps i have to take? I have added react-dom and react.

It does give me an error
“ReferenceError: require is not defined”

Can you share your codepen link instead of a screenshot?

Here it is: https://codepen.io/TeeJip/pen/qBmvwWX

You forgot to include where it is supposed to render.

<div id="app"></div>

Also, double check your settings.

These should be the correct cdn’s

https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js

This div is supposed to be in the html section.
I don’t remember if the lessons covered that.

Just like @skaparate did in his codepen example.

Once you add the render from the lesson I gave you, you should see the text on the screen.

Yeah I tried some of that just now it still doesnt seem to be rendering for some reason, I added:

ReactDOM.render(RandomQuoteMachine, document.getElementById(‘app’)) to the js file at the bottom but doesnt seem to be doing anything atm.

You are super close.

Remember that you are rendering a component.

This part

Needs to be rewritten like this.

<RandomQuoteMachine/>
1 Like

Oh there we go, that makes sense cause its a component I knew something looked a lil off with the yellow letters at the bottom. Thanks for the help

lol I should have read the part where u stated “Remember that you are rendering a component.” b4 i wrote the reply.

but thanks again, I gotta start treating these components more like objects.

1 Like

No problem.

Once you start building your first couple of projects you might consider switching over to something like codesandbox.

All of basic setup you just did is already provided for you with codesandbox.
Plus codesandbox allows you to have multiple files.

1 Like

<:O , ill check it out

1 Like

Hello my name is Poet, i have done this but i am not having lack to run my project. could you kindly have a look at my pen : https://codepen.io/NEllyMandela/pen/QWgrNZP

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.