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 
!
You have to configure it through the settings.
- Go to your pen settings.
- Go to the JS section.
- 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)
- Write your code.
Check out this basic pen: https://codepen.io/skaparate/pen/ZEKPdrz
2 Likes
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>
1 Like
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.