1-1 統一開發環境-註冊 CodePen 帳號

在開始撰寫 React 之前,我們需要先準備一致的開發環境,避免因為作業系統、環境版本、React 版本差異所造成影響。一開始在專案還沒有很複雜前,我們會先使用 Codepen 來練習基本的 React 概念,等到後面專案更加複雜後,將會進一步說明 npm 和 create-react-app 等幫助我們在電腦本機進行開發的工具。

現在我們就先來註冊 CodePen 的帳號吧!

註冊 CodePen 帳號#

CodePen 是許多前端開發者用來分享自己作品的平台,進到首頁之後你可以看到許多開發者所分享的超優質作品,更棒的是這些程式碼都是公開的,未來如果有需要你也可以到這裡分享自己的作品或觀看別人的作品是如何完成的。

如果還沒註冊帳號的話,可以趕快到下方網址來註冊一個,只需到 CodePen 的官方網站點擊「Sign Up」即可註冊,這裡我們只需要使用免費的方案就可以了:

Imgur

https://codepen.io/

註冊好帳號後,點擊右上角自己的頭像,點選「New Pen」即可開啟一個網站頁面:

Imgur

Codepen 這個工具很容易上手,其中一側可以編輯 HTML、CSS 和 JS,另一側則會顯示對應的畫面。在專案還沒有太複雜前我們會先用 CodePen 進行練習:

Imgur

在後面的 JavaScript 說明中,你可以在 CodePen 中開啟一個新的 Pen 搭配練習,只需要把 JavaScript 語法撰寫在 JS 的區塊中,接著打開瀏覽器的 console 介面作為練習:

imgur