Using visual Studio Code in Codepen

So I have finished the Redux section of freecodecamp and I am on my way to complete the Redux projects. I wanted to know whether it is possible to write my own React code in visual studio and add this to Codepen? Also how do I do this?

I have searched on this and cannot seem to find an answer.

Sure. You’re going to need to import whatever libraries you need. Most people will work in a node environment using something like webpack or use webpack behind the scenes with something like create-react-app. You could try and to it without it by just importing the libraries you need and working in one large file. But really, if you’ve reached that point, I think you’ve gone beyond what something like codepen can comfortably do. Don’t get me wrong - codepen is a cool tool. I use it often to quickly try little things out. But realistically, once you get into interesting apps, it gets increasingly difficult to manage in something like codepen. Using the other options, you can split things into separate files and make things a lot more modular. That’s much more like what you’ll see on a job. I would suggest finding some videos of people building redux apps on youtube. There’s bound to be a few of people building them from scratch with WP or CRA.

But if you did decide to write in VSC and import it to codepen, you’d just need to make the imports work. If you have a working redux app in codepen, you could always export it to a zip file, unpack it locally, and mess with that, to get an idea.

Alright I will give that a try. Thanks for the feedback!

I would suggest using StackBlitz or CodeSandbox for React. CodeSandbox let you import a GitHub repository so you can work locally, then push to GitHub and import it on CodeSandbox.

1 Like