☁️ 開場

這篇筆記主要整理自：官方文件 Your First Component

🧩 什麼是 React Component？

可以想像成「建立起 UI 的積木」，在程式碼裡面就是一個 coding block。
在初學 HTML、CSS、JS 我們是分開處理結構、樣式、邏輯功能，現在 React 讓我們能把 markup、styles、JS 全部包在 component 中。

🔧 如何創建 Component？

有三種寫法：createClass、class component、function component
根據這篇文章 createClass 的寫法在 React v16 之後不再支援，而目前官方文件主要說明的創建方式為 function component，以下也只針對 function component 做說明。（但以下步驟未必要照順序！理解整個操作後就照自己喜歡的來就好）

以下情境為創建按鈕元件：

1. 建立一個空的 function

function Button(){
    return;
}

2. Export 該 function（Export 是為了讓其他檔案可以 import 它，後續會再提到）

function Button(){
    return;
}

export default Button;

3. 寫元件內容

• 可以直接和 return statement 寫在同一行

function Button(){
    return <button>click</button>;
}

export default Button;

• 如果不在同一行，記得要用()括號括起來

function Button(){
    return (
        <button>click</button>
    );
}

export default Button;

💡 在有了上述的認識，我們就可以再更精準的回答第一題：什麼是 React Component？

React Component 是一個可以撰寫 markup、styles、JS 的 JavaScript Funciton

📌 Function Component 的命名有什麼規定？

相信大家有發現，在定義 Function Component 的時候，名字首字一定要大寫！

• 如果不大寫會怎麼樣？
  之後進行元件的組合，React 會根據大小寫來區分這個東西是元件？還是想表達 HTML 原本的 tag？

  舉以下程式碼為例子：下面是一個叫做 Gallery 的元件，<section> <h1> React 會知道我們要表達的是 HTML 原本的 tag，<Profile />則是叫做 Profile 的元件。

  function Gallery() {
    return (
      <section>
        <h1>Amazing scientists</h1>
        <Profile />
        <Profile />
        <Profile />
      </section>
    );
  

🏗 Component 的特性？

從前一段的程式碼我們可以發現元件可以彼此組合、重複使用

1. 組合性

上一段程式碼 Profile 元件被組合在 Gallery 元件中，如果還有其他元件，也當然可以繼續組合在 Gallery 元件中

• 也因為這樣組合，這兩個元件產生了「父子關係」，Gallery 元件為 parent component，Profile 元件則為 child component （這個關係與之後會介紹的資料傳遞息息相關）

• 另外，在了解到這樣的組合性之後，千萬要避免在某個元件之中直接定義另一個元件，這會讓程式跑得很慢且可能導致 bug

  function Gallery() {
    // ❌ 在 Gallery 元件中定義 Profile 元件
    function Profile() {
      // ...
    }
    // ...
  }
  

• 永遠在程式碼的第一層去定義元件

  // ✅ 在第一層定義 Profile 元件，才放入 Gallery 元件
  function Profile() {
      // ...
    }
  
  function Gallery() {
  
    // ...
    <Profile />
  }
  

2. 複用性

上一段程式碼 Profile 元件被重複使用了三次，所以畫面就會出現三個 Profile 元件所呈現的東西

想看畫面與完整程式碼可參考官方文件的 CodeSandbox

➡️ 在 React 中，一切都是 Component？

聽說常常能看到這句話，我自己看這句話會覺得：「確實！」
從前面簡單的程式碼可以看出元件能夠從小小的區塊慢慢組合成整個頁面，官方文件說「Most React apps use components all the way down」，畫面即是把 root component 渲染在 index.html 檔案中的 div#root element 上，而 root component 可以由其他 components 組合而成。（這邊快速簡介 root component 就是最上層的元件，親子關係中始祖的概念）

💃🏻 總結

認真很愛官方文件會在每篇文章下面做 Recap 的部分，以下因為覺得文件已經寫得夠精準，就直接搬過來，不做翻譯，只畫重點

• React lets you create components, reusable UI elements for your app.
• In a React app, every piece of UI is a component.
• React components are regular JavaScript functions except:
  1. Their names always begin with a capital letter.
  2. They return JSX markup.（JSX markup 之後會再提到，這邊快速簡介就是長得很像 HTML 的那些 markup，剛剛上面出現的都是，它們並不是 HTML！ JS 讀不懂 HTML tag）

以上，有任何想法或文內有誤、不清楚歡迎提出，謝謝大家 🙏🏻
.
筆者小記: 目前官方文件讀到更新物件、陣列的 state，開始深入進階玩法，有趣但也越來越難了 (ง๑ •̀_•́)ง