Introduction to CodeSandbox.io
In this section of the roadmap you will work with modern frameworks such React and Vue.
These are advanced tools that let you write a high-level code that looks like Javascript and HTML, but needs to be transformed into an executable form that your browser can run.
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.
Before you move on into the challenges, I suggest you take the time to replay some of the CodePen Javascript challenges as CodeSandboxes, so you warm up with this new tool and get used to it.
👉 User Story:
As a developer
Given a basic React sandbox
I should play around with automatic preview and reloads
✅ Todos:
- 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?