Expo DAY5 --- Writing Comments, Open Project & Snack

tags: day5 iThome鐵人賽2018 ReactNative Expo Comment Snack Project

前言

目標

• [ ] 使用 XDE 開啟空白專案
• [ ] 使用 Snack 開新專案
• [ ] 學會使用註解

Expo "Snack"？

Expo Snack 是一個類似於 Codepen and JSFiddle 的服務，

開新專案

XDE

首先打開你的 Expo XDE，找到閃電按鈕，點選 New Project。

隨之會出現視窗，詢問你要是否要使用專案模板建立新專案，以及該專案要存在哪裡。上次的[]中，我們選過右邊的 tab 模板，這次我們要使用左邊的空白專案。

選取左邊的 Blank，並且取名為 expo-tour-day6。

幾分鐘後會看到如下畫面，表示一切順利。如果有問題，歡迎回文留言或到 React Native Taiwan 發問。

最後，選取 Open in Editor 會自動使用 VSCode 打開專案。

Snack

直接點擊 Snack 連結，Snack 會自動為你產生一組模板專案。關閉彈出的 QRCode 畫面後會出現以下畫面：

你可以按照需要刪掉或新增左邊的 File 視窗中的檔案，以及依據上圖關閉不需要的視窗。是不是很簡單？

如何註解程式碼

由於 Expo 是擴充 React Native 而來，所以它也是以 .jsx 的方式撰寫。由於 jsx 的每一層都是一個物件，所以它的註解比較特別，是以下這種寫法：

{/* 這是一段正確的註解 */}

// 這樣寫不是註解，會壞掉！

<!-- 別鬧了，這樣也不行 -->

現在就做看看

1. 點擊 Snack 練習：expo-tour-comments，然後刪掉錯誤的註解，想辦法讓 App 畫面可以出現你成功了字樣。
2. 在本文底下回覆練習成果。

恭喜

• [x] 使用 XDE 開啟空白專案
• [x] 使用 Snack 開新專案
• [x] 學會使用註解

Refs

• Snack — A Playground for React Native – Exposition
• https://snack.expo.io/