Edytor kodu online — CodeSandbox

Podczas nauki z mojego kursu, wszystkie materiały, jakie zobaczysz na nagraniach, będą równocześnie dostępne w edytorze kodu działającym bezpośrednio w przeglądarce.

Edytor kodu, z jakiego będziemy korzystać to CodeSandbox. Jest to edytor oparty na tej samej bazie co Visual Studio Code, z którego korzystam w nagraniach, wiec idealnie pasuje do naszych potrzeb.

CodeSandbox, niezależnie od tego, czy będziemy pracować nad statyczną stroną WWW, czy rozbudowaną aplikacją w React umożliwia dokonywanie zmian w kodzie oraz wyświetla efekty we wybudowanej w edytor przeglądarce.

Możesz otworzyć edytor w nowej karcie przeglądarki, klikając przycisk "Open sandbox" lub "Edit sandbox". Pełnowymiarowa wersja edytora jest zdecydowania bardziej wygodna w użyciu.

Dopiero po otworzeniu edytora w nowej karcie możesz zapisywać w nim zamiany. W tym celu wystarczy użyć skrótu Ctrl + S lub klikając w menu wybrać opcję File > Save. Pierwsze zapisanie zmian obwieszcza komunikat "Forked sandbox!" w prawym dolnym rogu. Oznacza to, że edytor skopiował cały otwarty w nim projekt z konta CodeRoad w nowe miejsce, które możesz edytować (zauważ, że zmienia się też link w przeglądarce).

Warto od razu założyć sobie konto, żeby móc wrócić do wszystkich swoich sandboxów w jednym miejscu (są dostępne w menu pod awatarem użytkownika > My Profile > Sandboxes).

WAŻNE

Pliki package.json oraz sandbox.config.json są to pliki konfiguracyjne CodeSandbox i są potrzebne edytorowi online do poprawnego wyświetlania zadań. Nie są potrzebne w Twoich projektach lokalnie na Twoim komputerze w Visual Studio Code. Nie zwracaj na nie uwagi, przeglądając kod w CodeSandbox!

P.S. Plik package.json poznamy i omówimy w drugiej połowie kursu, gdy będziemy się uczyć o NPM i modułach!