如何在 React 中導入 CSS？
- inline CSS style（圖一）
- import CSS 檔案（圖二）。
透過 inline 的方式導入CSS 需要注意幾個部分：
（1）如同在 HTML 中加入 CSS ，可以在 HTML 標籤（例如<p>）內加入 style，值得一提的是，此處 style= 後面是加入 2 層 {} ，並在內層的 {} 中輸入你要加入的 CSS 屬性，如圖（一）。
（2）如圖（一），在 style 中加入了 color 及 textAlign 的屬性，中間是以逗號（,）分開，並且 color 的值 red 需要以（””）引號標註。是以後續如果要再調整字體類型、背景顏色可以寫為 <p style={{color:”red”,textAlign:”center”,fontFamily:””,backgroundColor:””}}>
（3）相信大家有注意到，如果屬性是由 2 個以上單詞所組成，就要以『駝峰式命名法』（camel case）命名，如 textAlign 或 fontFamily 這樣的方式，而不是傳統 CSS 中（-）的方式（如： text-align 或 font-family ）。
透過 import CSS 檔案的方式導入CSS 需要注意幾個部分：
（1）導入的方式為在組件（component）的最前端寫上 import “檔案路徑”，習慣上會將 CSS 檔案與組件皆放在 src 的資料夾中，以import “./檔案名稱”的方式導入。
（2）我們會將 CSS 的檔案使用與組件相同的命名，在導入後能直接作用到該組件的屬性上。
如何在 React 中導入 JS？
如同第三課所述，在組件內可以透過大括號 {} 導入 JS 的函數。以事件處理為例，示範導入 JS 的方式：
（1）inline 方式，如同上述 CSS 的方式，將 JS 代碼寫在標籤內完成事件處理（圖三）
（2）先定義函數再於 {} 中輸入函數名稱以導入函數（圖四）
React 中的陣列（array）
由於陣列（array）屬於 JS 中的語法，所以一樣使用 {} 將陣列導入。
值得注意的是，系統會在 console 中顯示警告(圖五)，提醒需要在陣列中每個元素加入 key 屬性(圖六)，目的是使 React 更精準的找到陣列中每一個元素（備註：key 值本身並不僅限於數字）。
陣列的基礎方法使用
- push() 方法會添加一個或多個元素至陣列的末端，並且回傳陣列的新長度。（圖七）
- map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。（ 更多方法可參考MDN ）
React 中條件判斷的運用
還記得 JS 中的條件判斷嗎？ if 或者是三元運算子『 條件？值1：值2 』（圖八、九）（請參考MDN）條件 ? 值1 : 值2條件 ? 值1 : 值2
React 中適用 JS 的語法，並且可以做許多的延伸使用。例如將條件判斷放入 HTML 標籤中（圖十）或者放入 className 中（圖十一）
小結
本課主要介紹 CSS 與 JS （包含陣列）在 React 中的基礎運用，值得注意的是，跟 JS 相關的語法都需要在外層以 {} 包裹，而陣列則需要注意 key 屬性的輸入。後續課程將接續討論 props 在 React 內的應用。