What you'll learn:
CodeSandbox is a popular online code editor, so we don't have to download anything! In the past, we’d have to do a lot of complicated setup on our computers to get things going, but with CodeSandbox, all we need is a browser!
Click create Sandbox on the top right
CodeSandbox gives us a list of templates to choose from.
Press React since we are going to create a React application
In this interface on the left, we have a list of directories and files that this project consists of.
We can click this icon to fold the left pane.
Or this icon eventually to fold the pane.
Now I have the source code on the left, and a preview of the code on the right.
File --> preferences --> settings --> type theme in the search bar --> choose any you like!
If you would like the classic theme from framer, go to this website https://github.com/framer/syntax --> click themes --> click the JSON file --> click raw --> copy all of the text --> go back to codesandbox --> file --> preferences --> CodeSandbox settings --> paste the text in the available box --> refresh the page --> go to the theme area --> find "Custom Theme"
File --> preferences --> settings --> type font --> change the font size to fit you!
Automatic Formatter Plugin
If you mess up your formatting, just save the file (CTR + S or CMD + S) to reformat everything!
Remove semicolons from the end of lines
File --> preferences --> Codesandbox Settings --> prettier settings --> turn off Semicolons --> go back to main page --> save file
This should save you some headache dealing with semicolons. In particular, saving me some headaches from explaining whether to use semicolons. :)
We now have the source code on the left and the resulting web page on the right.
When I make a change, the preview shows it immediately.
Forking is the action of copying a project which allows you to freely experiment and change it without impacting the original project — in a sense, it is like inspecting an element and changing things around!
There are two ways to "fork" a project that isn't yours.
There will be a notification on the bottom right stating "Forked Sandbox!", and you are now working on a copy of your own.
Github is an extension of an open-source version control system called Git. Without getting into too many details, Git is an incredibly powerful system that helps solve the problem of having multiple versions of a working project.
Github is the place where developers store their projects and allow you to use Git in a user-friendly way.
To save your projects and forks, you will want to create a GitHub account and sign in. There is a sign-in button located on the very top right.
This way you’ll be able to save your sandboxes.
You can click a button on the left panel to get a list of sandboxes saved under your account.
Now that you can maneuver around codesandbox, we'll take a look at our code!