Introduction to CodeSandbox.io
CodeSandbox.io offers a nice abstraction over this process and let you focus on the application that you want to build, without bothering so much with the tooling that you should install on your machine (we'll get to that point later on in the roadmap).
There are a few more cool things about CodeSandbox:
- it uses Visual Studio Code under the hood, which is a cool editor
- it lets you play with multiple files and folders
- it lets you share your app providing a URL for each exercise you do
- it embeds high-level tools for code quality and QA (we'll use them)
- it can connect with your GitHub account and edit stuff on your repos!
Long story short... it is almost to good to be real... and free!
A CodeSandbox looks like this:
In this embed you can look around the code, make changes and see the results live.
Of course it doesn't make so much sense to work in such a small area, so I strongly suggest you click on the "open in new window" button to access a full-screen experience.
👉 User Story:
As a developer Given a basic React sandbox I should play around with automatic preview and reloads
- Change the content of “public/index.html”
- Change the content of “src/style.css”
- Change the content of “src/index.js” (the part that seems html)
- Upload an image and insert it into the HTML file
- Use the same image as background in a CSS definition
🔎 Go Deep:
- What is a “package.json” file?
- What is a depencency?
- How can you share the result of your work?