一般而言，通常會使用編輯器並下載套件，不過，因為我們開發的程式都不是很大，可以使用CodeSandbox。CodeSandbox顧名思義就是個沙盒，讓我們可以實驗，不建議將正式的程式放在CodeSandbox上，但是，我們前幾週先使用CodeSandbox，簡化大家的使用環境，等到大家要開始一起工作，我們在介紹如何使用編輯器並下載相關套件。
為了要能儲存我們的程式，我們要利用「Sign Up」，可以直接利用google帳號登入
如果有多個google帳號，選擇你要的帳戶
進入自己的空間 (Home)
設定空間，我們先選擇空白的頁面，點選「New Sandbox」
點選「React」樣板(Template)，就會產生一個空白的React專案。
現在，我們其實就產生了一個以react為基礎的網站了，大家可以拿起自己的手機，輸入右邊框框裡的網址，就可以在手機上看到一模一樣的內容。
我們可以看到App.js，裡面的語法就是react的語法，react的語法其實就是javascript的語法，然而，跟一般看到的javascript語法不太一樣。在react裡，可以看到:
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
看起來跟HTML的樣子好像一樣，但是，事實上是所謂的JSX (Javascript Extension)，也就是以HTML方式撰寫的javascript。這裡先簡單的說明跟HTML不同之處。在標準的HTML中，套用CSS的樣式是使用class，但是，在JSX中，必須使用className。
<div **className="App"**>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>