奶綠茶老師的 React 全攻略

4 min readNov 28, 2023

這次參加奶綠茶老師的「React 全攻略 — 入門到進階」的課程，對我來說是一次深具啟發的學習經歷。課程的設計非常貼近業界實際情境，不僅僅是理論上的學習，更重要的是，它讓我體會到在職場上應用 React 時可能遇到的挑戰，以及如何有效解決這些問題。

最吸引我的部分是課程中對 React Components 的深入剖析，這不僅加深了我對 React 架構的理解，也使我能夠更加靈活地在工作中運用。透過大量的範例程式檔案，我學會了如何撰寫高效且可重用的組件，這對於提升我日後開發的速度與質量將是一大助力。

此外，對 Props 傳遞機制的學習也是一大亮點。在之前的經驗中，我對於 Props 的理解並不深入，但通過這門課程，我不僅理解了它的基本概念，也學會了如何有效地在不同組件間傳遞數據。

簡單拿個上課的範例來展示一下

const FunctionalCard01 = (props) => {
  // https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  // Destructuring assignment
  const { img, name, children, price } = props;
  return (
    <div className="category-item">
      <img className="category-item__img" src={img} alt={name} />
      {/* <img > Error,  JSX 所有的 tag 都要 close */}
      <div className="category-item__name">{name}</div>
      <div className="category-item__quote">{children}</div>
      <div className="price">{price}</div>
    </div>
  );
};

這裡是用解構的方式來宣告 props，
它是一個呈現卡片樣式的Component。
接收幾個 props：img（圖片的 URL），name（卡片的名稱），children（任何嵌套的子元素），和 price（價格）。
這個組件用這些 props 來構建一個包含圖片、名稱、價格和任何額外子元素的卡片。

import FunctionalCard01 from './FunctionalCard01';
import './style.scss';

const Example3 = () => {
  return (
    <section data-name="Example3" className="flex">
      <FunctionalCard01
        img="http://fakeimg.pl/500x300/3498db/"
        name="milkmidi"
        price="100"
      />
      <FunctionalCard01
        img="http://fakeimg.pl/500x300/e74c3c/"
        name="奶綠茶"
        price="200"
      >
        {/* TODO 這裡有 h1 會放到 props.children */}
        <h1 className="bg-info">我是子元素</h1>
      </FunctionalCard01>
    </section>
  );
};
export default Example3;

這段代碼定義了一個名為 Example3 的 Component，它使用了另一個組件 FunctionalCard01。
Example3 通過提供不同的圖片、名稱和價格資訊來創建兩個 FunctionalCard01 的實例。
這個組件顯示了如何在 React 中重用自定義組件，並通過傳遞不同的 props 來定制每個組件實例的外觀和內容。其中一個 FunctionalCard01 實例還包含了一個額外的子元素（一個標題），展示了如何將子元素傳遞給自定義組件，這體現了 React 組件化和重複使用的特點。

React 的核心語法部分則是讓我對 React 有了全面而深入的認識。這對於我之後撰寫更加複雜的應用程序是非常有幫助的。進階的狀態管理部分則教會我如何在大型應用中有效管理狀態，這對於提升應用性能和維護性是至關重要的。

總體來說，這門課程不僅提升了我的技術能力，更重要的是，它提升了我的問題解決能力和團隊合作效率。我相信在這門課程之後，我將能夠更自信地面對工作中的各種挑戰，並在職場中發揮更大的影響力。

奶綠茶老師的 React 全攻略

Written by LiangYuHao