接述前篇建立完專案
接著就是進入探索程式碼的世界了

React Native官方建議在入門前
先補充React的核心概念

https://reactnative.dev/docs/intro-react

畢竟Native是React衍生出來的
React Native 的核心思想和語法概念是基於 React 的

其中提到四大核心項目

• components
• JSX
• props
• state

components、JSX會以UI(畫面)為主
props、state則以UX(使用者體驗)為主

本篇會先介紹components與JSX UI部分
也列出App.js程式碼預設產出內容，做為基本知識講解

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Components 元件系統

React官網有提到，整個應用程式都是由元件組成

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

官方說明：https://react.dev/reference/react/Component

元件的特色是：
一個元件，就只會做一件事情
元件跟元件之間，只要不引用，完全不認識

React Native 也是如此
上方程式碼先將React Native的元件import進來
就能使用官方相關的元件
上方的return 就是將寫好的React Native UI容器元件(<View>)渲染給使用者

換言之
只要寫了export default function App()
在將寫好的元件return出去
其他元件也能使用這個名為App的元件
後續會在講解元件之間如何進行溝通

JSX 語法介紹

JSX（JavaScript XML）是一種JavaScript的語法擴充，通常用於React和React Native等，用於定義UI元素的結構和外觀。JSX使得在JavaScript代碼中創建和渲染UI元素變得更加直觀和易讀。

最大特點是可以在Html/Native上撰寫JavaScript語法
React Native的所有元件都是JSX語法，完美繼承React的核心技術

上方程式碼const styles = StyleSheet.create({ container:...以下省略
常數卻能放在標籤裡<View style={styles.container}>
就是JSX將元件及Js語法結合的最大特點

另外JSX是有限制的
「兩個元件以上，只能有一個父標籤」
也就是說最外層一定只能有一個標籤
錯誤寫法

return(
<View>
     <Text>Hello</Text>
</View>
<View>
     <Text>World</Text>
</View>
);

正確寫法

return(
<View>
     <Text>Hello</Text>
     <Text>World</Text>
</View>
);

React Native 基本元件認識

上方程式碼import { StyleSheet, Text, View } from 'react-native'
甚至使用了Expo的StatusBar
就先來介紹這些元件是做什麼的吧

• Text
  文字元件，只要在元件內容存放文字，就能渲染出文字給使用者查看
  <Text>Hello</Text>
  當然也可以不使用元件，直接將Hello印出來
  只是這樣無法使用Style😫

• View
  容器元件，本身不會渲染任何東西
  通常用來裝其他元件，以及排版使用
  也常常做為JSX父標籤的使用(參考上方JSX語法介紹

   <View>
        <Text>Hello</Text>
   </View>
  

• StyleSheet
  UI排版元件
  通常用於元件的樣式調整
  官方也有介紹所有可以使用的樣式參考

  https://reactnative.dev/docs/style

  透過StyleSheet.create
  可以自訂樣式類型 美化文字、圖片大小、容器邊界、長寬...等多項樣式調整

  當然也能在View上直接寫樣式進去
  但對於專案不斷地長大，若不使用StyleSheet的話
  樣式維護也會是開發者的一大難題

  <View style={{backgroundColor: '#ecf0f1'}}>
       <Text>World</Text>
  </View>
  

• StatusBar
  手機上方時間、電量條元件
  如果不加上StatusBar，APP啟動時會看不到上方時間&電量顯示
  通常只會調整時間條的樣式(不調整樣式上方就算有Bar也會因為底色問題遮住)
  <StatusBar style="light-content" />
  深色背景樣式調整為style="light-content"
  淺色背景樣式調整為style="dark-content"

  ※React Native其實有內建的StatusBar
  不過因為建立Expo專案，Expo預設新增他們的StatusBar
  兩者差異不會太大

結語：
其實React Native還有非常多的元件可以使用
到了實戰環節時，會陸續介紹所需使用的元件

下一篇會持續介紹React的基礎知識(Props與State)
程式基本功打好之後，在開發上才能應付瞬息萬變的需求🤭