昨天我們我們不斷的調整 App.js 的內容，畫面也會隨之更動，我想聰明的你應該也發現了
這就是 React 呈現畫面的方式，用 元件化 (Component) 來將你所需要的內容包裝成各個元件
最後再將各個元件相互組裝，呈現出屬於你的網頁，這就是 React

做出你的 Component

通常在一個 React 專案我們會將各個 Component 放在一個同一個資料夾，甚至會做這個資料夾依照各個不同的功能取向再次細分， CSS 也是一樣的，我們也會整理出一個 Styles 資料夾將各個 CSS 檔案放在裡面，這樣不但可以方便整理，找尋需要的檔案，也將更方便做後續的專案維護

好了說了那麼多，我們就要回到今天的主題，做出一個你自己的 Component

首先我將 src/index.js 整理成這樣

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	
);

接著我們在 src 資料夾分別做出 components 以及 styles 資料夾，並且在 components/Mycomponnent.js 和 styles/mycomponent.css

這邊我們注意到了 Components 的命名必須為大寫開頭
若在 JSX import Components 進去的話若你的 Component 為小寫開頭的會就會跟 HTML 標籤搞混，

import React from 'react';
import ReactDOM from 'react-dom/client';
import { mycomponent } from './components/Mycomponnent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<mycomponent></mycomponent>
	// 這是錯誤示範 
	// 是為了告訴大家 命名為大寫開頭的重要性，若沒告訴你這是 JSX 你可能會以為這是 HTML 標籤
	// 不要讓 Component 和 HTML 標籤搞混
);

接著我們在 components/Mycomponnent.js 和 styles/mycomponent.css 加上這些程式碼

// components/Mycomponnent.js
import "../styles/mycomponent.css"

function Mycomponent() {
  return (
    <div>
         // 在 JSX 中要用 class 屬性，要用 className
         // 因為 class 在 JSX 中是保留字
      <h1 className='myConponent'>This is my first component</h1>
    </div>
  )
}

export { Mycomponent }

/* mycomponent.css */
.myConponent {
  color: red;
}

並且在 index.js import Component 進去

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Mycomponent } from './components/Mycomponnent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Mycomponent />
  // Component 裡面沒有要包任何內容的話，是可以 Self-Closing
);

這樣就完成了屬於自己的第一個 Component

或許有人會好奇，為什麼我們在 JSX 裡面都要用 div 標籤包住我們要的內容，

因為在 JSX 語法中只能 return 一個元素

若想要想要 return 兩個元素的話 React 允許你使用 React.Fragment 標籤
或是可以簡寫成 <> </>

import React from 'react';

function Mycomponent() {
  return (
    // 若要使用這個標籤，要記得 import React from 'react'
    <React.Fragment>
      <h1 className='myConponent'>This is my first element</h1>
      <h1 className='myConponent'>This is my second element</h1>
    </React.Fragment>
  )
}


export { Mycomponent }

function Mycomponent() {
  return (
    <>
      <h1 className='myConponent'>This is my first element</h1>
      <h1 className='myConponent'>This is my second element</h1>
    </>
  )
}

這樣就可以回傳兩個元素了

小結

今天教了大家如何創造自己的 Component，也說明了 JSX 的一些規則和慣例，謝謝大家的收看