Category: Uncategorized

如何開發自己的react library

可以自己用create-react-app腳手架來做，也可以用create-react-library
可以參考用create-react-library建出來的專案，它的package.json是怎麼設定的

library放在devDependencies裡的套件，是不會被它的宿主安裝的

另外有一些概念一定要搞懂：react-scripts是什麼
react-scripts是一個腳手架帶來給你跑react的咚咚，裡面就內建了一些套件了，所以要是用了create-react-app架了一個專案，又再加了一些套件，要是跟react-script裡的重複又版本有誤差的話，它是會跳錯誤提示給你的。（如下圖）
這時候ctrl+滑鼠左鍵去點package.json裡的react-script，滑到他的package.json可以看裡面有裝了哪些咚咚。

內湖的午餐心得

【愛爾蘭失眠咖啡】
不錯吃，可惜貴了些，可以吃蠻飽的。

 

【楽坡Bon Box】
天啊吃不完，真的會很飽。

【清水亭】
訂了生滾海鮮粥。感覺還好，以後不訂了！！太多醣類，我還是要選蛋白質多的

 

【見笑草】
感覺一般般。肉不多

 

【放縱FUN Zone 跨界健康料理】
好吃，蛋白質豐富，份量很多，會吃太飽。

【12mini】

【覺旅咖啡/陽光店】

煙熏鮭魚沙拉，還不錯吃，不過不會很飽～

【大猩猩健康菜單】

還不錯，會吃得很飽
它的蔬菜湯，還蠻好喝的

React context API

  1. 以Provider提供的值為準
  2. createContext 後面提供的預設值，是給上層如果沒有找對應的Provider的component話用的。
  3. 每一個context物件都有一個Provider，React會讓它的吸精元件訂閱這些context
  4. 需要注意reference identity，避免不必要的re-render

實際使用的教學：
今天我要寫一個🌲🐦🐦的context。

1. 首先先來createContext

const TreeBirdBirdContext = React.createContext(['🌲', '🐦']);

2. 之後來做它的 Provider

const TreeBirdBridProvider = ({children}) => {
  const [state, setState] = useState(['🌲', '🐦', '🐦'])
  return (
    <TreeBirdBirdContext.Provider value={[state, setState]}>
      {children}
    </TreeBirdBirdContext.Provider>
  )
}

3. 接著是顯示畫面、操作的邏輯

const Controller = () => {
  const [state, setState] = useContext(TreeBirdBirdContext);

  const addBird = () => {
    setState(oldArray => [...oldArray, '🐦']);
  }
  return (
    <>
      <div>{state}</div>
      <button onClick={() => addBird()}>Click Me</button>
    </>
  )
}

4. 接下來把他們包起乃

const App = () => {
  return (
    <TreeBirdBridProvider>
      <Controller />
    </TreeBirdBridProvider>
  )
}
export default App;

然後就大功告成溜！

在這裡可以看