mentor-program-day118

希望能一步一步做好。

進度

今天繼續做部落格的實戰，目前把幾個功能給做好了：

1. 串 API 顯示所有文章
2. 串接登入、註冊功能
3. 顯示單篇文章功能

用 React 做 UI 處理確實比 Vanilla JS 輕鬆許多，不過還在慢慢習慣這種 state 的思考模式，總之多加油吧。

學到的事情

感覺主要就是練習怎麼使用 hook 吧！因為儘管知道 hook 的作用，但也不代表你知道要在什麼時候把他們拿出來用。所以我覺得這才是學 React 最重要的部分，也是我想練好的部分。

另外昨天本來想用 useContext 來處理 Loading 的 state，大概像這樣：

const [isLoading, setIsloading] = useState(false);
return (
  <ThemeProvider theme={theme}>
    <GlobalStyle />
      {/* loading Context */}
      <LoadingContext.Provider value={[isLoading, setIsloading]}>
      <AuthContext.Provider value={{ user, setUser }}>
        <Router>
          <NavBar />
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/about" element={<AboutPage />} />
            <Route path="/categories" element={<CategoriesPage />} />
            <Route path="/posts" element={<PostsPage />} />
            <Route path="/posts/:id" element={<SinglePostPage />} />
            <Route path="/log-in" element={<LoginPage />} />
            <Route path="/sign-up" element={<SignUpPage />} />
          </Routes>
        </Router>
      </AuthContext.Provider>
    </LoadingContext.Provider>
  </ThemeProvider>
)

但不知道是不是跟 re-render 的問題有關，我這樣子做以後沒有辦法在底下的子元件用 setIsloading(false) 把 loading 關掉 QQ。

可能要多練習看看才能找出問題了。

題外話

雖然對作品已經有一些想法了，不過不知道自己做不做得出來，希望可以吧～

期許

明天也要繼續努力練習 React。