React 全攻略 課後心得

#react #前端框架 #5xcampus #軟體課程 #五倍學院
張芷寧
學員分享
React 全攻略 課後心得

契機

在 ASTRO Camp 體驗到 React 的課堂之後，就對 React 產生興趣，也時常聽大家提起 React，因爲到目前為止 React 仍是前端框架主流之一。當時在自學的過程中，曾經一邊閱讀官方文件，一邊練習，也有找過幾些國外的影片來學習，但總覺得這樣還是不夠，便在因緣際會下，報名奶綠茶老師的 React 課程！

上課方式

對於剛開始入門 React 的人來說，奶綠茶老師的課絕對是好理解的，當然自身也需要具備一些 JavaScript 的知識！

課堂間教材除了大量介紹 Hooks 與運作原理之外，每堂都有提供隨堂小測驗，老師在講解完觀念與運作原理之後，會請大家現場練習，即便做錯或者不會寫也沒有關係，老師會幫助大家完成後再提供他的想法供我們參考與學習，建議大家可以自己嘗試做完再聽老師講解，因為要真正的熟悉這些知識是要透過從錯誤中學習的，就像 Debug 時，有踩過的坑，下次一定知道如何避開。除此之外，課堂過後也會有作業練習，繳交作業時，老師也會與你討論作法的好壞，也會建議用不同的方式讓你去思考如何換成另外一種模式練習，讓我可以運用不一樣的概念，同時也可以加強自身的邏輯思考。

隨堂練習範例 React Hooks - useState()

題目要求：(1) 放兩個 Counter Component (2) 一個 count 為 0，另一個 count 為 1

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(1);

  const atClick = () => {
    // count++; (這對 JS 來說是正確的，但是在 useState()裡，要用 setCount 這個函式去更新寫法！)
    setCount(count + 1);
  };
  const atClick2 = () => {
    setCount2(count2 + 1);
  };
  return (
    <div className="border p-2 border-black">
      <h2 className="count">count:{count}</h2>
      <button className="button" onClick={atClick}>
        increment
      </button>
      <h2 className="count">count:{count2}</h2>
      <button className="button" onClick={atClick2}>
        increment
      </button>
    </div>
  );
};
  • 透過使用 props 傳遞初始值的方式
import React from 'react';

const Counter = (props) => {
  // const { initCount } = props 如果沒有給預設值，如果在 render <Counter /> 時，會出現 NaN 情況！
  const { initCount = 0 } = props;

  const [count, setCount] = React.useState(initCount);

  const atClick = () => {
    setCount(count + 1);
  };
  return (
    <div className="border p-2 border-black">
      <h2 className="count">count:{count}</h2>
      <button className="button" onClick={atClick}>
        increment
      </button>
    </div>
  );
};

const Base = () => {
  return (
    <section data-name="Base">
      <Counter initCount={0} />
      <Counter initCount={1} />
      <Counter />
    </section>
  );
};
export default Base;

這種寫法將初始值透過 props 進行傳遞，使得 Counter 組件更具彈性。在 Base 組件中，可以指定每個 Counter 的初始值。優勢在於使用 props 傳遞初始值的方式，當需要使用多個 Counter 組件而每個都有不同的初始值時，這樣的設計更具彈性，可以更靈活地指定每個計數器的初始值，而不是在組件內部直接寫死。這樣的設計更容易讓程式碼在不同的使用場景中重複使用。

總結

課程設計上簡潔有力，老師會不停地強調重點觀念之外，也會帶入許多職場上可能會遇到的狀況題，同時也分享自身在團隊合作上如何使用一些程式碼規範讓整個程式碼更具可的讀性，除此之外，也介紹了很多實用的開發工具，真的是收穫滿滿～推薦給同樣想進修技能的你「React 全攻略 - 入門到進階」課程！