⭐任務說明

在上一個任務中，我們初步先認識了 React ，知道他是一個 Web 函式庫，冒險者是不是對於一些概念有點搞不清楚呢？接著介紹什麼是 元件 ？ 什麼是 JSX？

JSX是什麼？

先用語法直接說明，他是一個 JavaScript 的語法擴充

const element = <h1>HEY！冒險者你好！</h1>;

• JSX 可以插入表達式

const name = 'karakamin ;
const element = <h1>HEY！冒險者 {name} 你好！</h1>;

快速建立第一個元件

這邊我們透過 CodeSanbox 的服務快速建立

const userName = 'karakamin';
function MyButton() {
  return (
    <button>
      {userName} 點我！這是按鈕啦！
    </button>
  );
}

export default function App() {
  return (
    <div>
      <h1>React 大秘境</h1>
      <h2>DAY 03</h2>
      <h3>HEY! {userName} 你好！</h3>
      <MyButton />
    </div>
  );
}

結果如下：

😸Hey！冒險者，頭暈了嗎

• 首先，我們先建立了一個名稱 MyButton 的元件

const userName = 'karakamin';
function MyButton() {
  return (
    <button>
      {userName} 點我！這是按鈕啦！
    </button>
  );
}

• 把剛剛宣告的 MyButton 元件，加到另一個主要元件內，並且會使用 export default 的方式
• 這邊要注意，一個元件只能返回一組父層的 JSX，所以必須以 ... 包起來或使用 <> ... </>

export default function App() {
  return (
    <div>
      <h1>React 大秘境</h1>
      <h2>DAY 03</h2>
      <h3>HEY! {userName} 你好！</h3>
      <MyButton />
    </div>
  );
}

幫元件增加一點色彩

😸冒險者，元件基本建立學會了嗎？這時候是不是想問，那麼要怎麼增加樣式呢

• 在 React 中，要套用 CSS 樣式，可以使用 className 這個屬性，他和 HTML 中的 class 用法相同
• 我們先把 CSS import 進來，完整範例如下

import "./styles.css";

const userName = 'karakamin';
function MyButton() {
  return (
    <button className="btn-primary">
      {userName} 點我！這是按鈕啦！
    </button>
  );
}

export default function App() {
  return (
    <div className="app">
      <h1 className="text-primary">React 大秘境</h1>
      <h2>DAY 03</h2>
      <h3>HEY! {userName} 你好！</h3>
      <MyButton />
    </div>
  );
}

• 結果
  

😸神奇吧！我們今天就先到這邊告一段落，下一個任務見囉