Hello,
I built this to do list in React using codepen and now I’m interested in saving the code in my computer terminal and pulling it up on my browser/localhost. I’ve tried using create-react-app and pasting in the code, but maybe I’m doing it wrong. What’s the best way to get this code to work on my browser? Any help is much appreciated.
There is an export function in codepen that lets you download all the HTML, JS and CSS
Sorry I wasn’t clear in my initial question. What I’m interested in is taking a codepen project and using the files to pop it up in my browser. Usually I do this by installing npm and using the command npm start, and then it pops up in my browser. If I export my latest codepen project, it won’t let me install npm. Is there a better way to do this?
Thanks for your help!
Best thing is creating the react app and insert the code into app.js and is not working like liveserver. You have to start through terminal.
create-react-app my-app
where my-app is the name of the folder for your application. This may take a few minutes to create the React application and install its dependencies.
Let’s quickly run our React application by navigating to the new folder and typing npm start to start the web server and open the application in a browser:
cd my-app
npm start
You should see “Welcome to React” on http://localhost:3000 in your browser. We’ll leave the web server running while we look at the application with VS Code.
To open your React application in VS Code, open another terminal (or command prompt) and navigate to the my-app folder and type code .:
cd my-app
code .
Hi lubodrinka, thanks! Ok, so I started with create-react-app. But what I need help with is how to plug in the codepen files into the create-react-app files. When I export my project, I have a css files, a scss files, a js file, an index.html file and an index.babel file. How do I place these files into the create-react-app file?
Thanks again for all your help!
The problem is there are different names of files, that the react app.js, for begginer is best not replace files, but replace only the code, that as you what it could be from io.sandbox.
you have there already app.css and app.js, just copy an paste. HMTL has already <div id="root"></div> only add the libs links.
