Writing JSX code locally in VS Code with Babel

JavaScript
1

I have just been migrating my projects from CodePen to Github using the ‘Export to .zip’ functionality of CodePen. I have got them set up so that each project has a Github Pages site that I can view. My problem is that I want to extend one of them and thus I am using Github Desktop (I know nothing about command-line Git so I went with the simplest option) and VS Code. The ‘index.html’ file that was exported using a Javascript file consisting of the complied Babel code. I wrote on CodePen with Babel and want to do the same in VS Code. I have looked around and can’t seem to find any clear, simple guides on how to do this. Can anyone help?

2

I would use create-react-app (https://github.com/facebook/create-react-app) and then bring your existing code into the created project.

create-react-app will give you everything you need to run your react app locally, and also build when you are ready to deploy.
npm start and npm run build respectively

1 Like
3

I’ve done what you suggested and have made a new project with create-react-app. I’ve moved the script.babel file and style.css file that were exported into CodePen. How do I set up the index.js code file to use what is in my script.babel file? I am really confused about how to use what is in the babel file in a Javascript file.

4

When you run the command npm start your code will be transpiled from jsx to js on the fly. So no need for a .babel file, just copy and paste your code into the app.js file.

Try watching

Traverse media is usually a great source of info.

5

Thanks for the link. I’ll have a look.