【前言】
終於來到第一個大魔王了，突然感覺自己很像在打怪。等到開始打 Boss 才發現：「React 也太複雜了吧！」一堆大括號、中括號、小括號、Arrow Function，再加上 jQuery 的話，必須要很認真看才有辦法分清楚什麼東西包在裡面。看來看去真的是一點感覺都沒有，尤其我對後端的東西也是一竅不通阿！

【教學資源 - React】
今天推薦一樣是 The Net Ninja 的 React 教學影片與相關資源。gitHub 上還有全部的教學資源，真是佛心公司、佛心公司！做完之後的 BLOG 介面真的很不錯，所有我會用到的基本功能都有很詳細地演示過。

Full Modern React Tutorial

這個操作讓人嘆為觀止，為了不要使用到 Null 的物件導致錯誤，可以使用 JS 的邏輯 AND。在後面我會大量使用這種寫法！

return (
  <div className="home">
    { error && <div>{ error } </div> }
    { isPending && <div>Loading...</div> }
    { blogs && <BlogList blogs={blogs} /> }
  </div>
);

傳統網站設計跟 React Website 設計的差異在於 React 可以利用 Virtual DOM 來更容易地管理資料狀態，以及避免重複執行同樣步驟就可以做到一樣的渲染效果。

把 Coursera 上的影片也看完順便寫題目練習。

Full-Stack Web Development with React

【課後練習】
首先製作一個登入介面的區塊。

const BoxContainer = styled.div`
  ...
  border-radius: 24px;
  opacity: 0.8;
  background-color: rgba(0,0,0,0.7);
  box-shadow: 0 0 2px rgba(15, 15, 15, 0.28);
  overflow: hidden;
`;

一些登入介面裡的小文字連結，像是驗證地址或者註冊帳號的敘述。

export const MutedLink = styled.a`
  ...
  color: rgba(200, 200, 200, 0.8);
  ...
`;

export const BoldLink = styled.a`
  ...
  color: rgb(241, 196, 15);
  ...
`;

把之前的前端實作的登入畫面移過來 React 上，我發現以前在前端三巨頭可以輕鬆達成的事情，現在要把每個部位拆成一個一個的元件然後再組裝起來，讓一切都變得非常麻煩！

export const Input = styled.input`
  ...
  ::placeholder {
    color: #c0c0c0;
  }

  &:focus {
    width: 210px;
    animation: rotate 1.5s linear infinite;
  }
`;

export const SubmitButton = styled.button`
  ...
	transition: all, 150ms ease-in-out;

  @keyframes rotate{
    0%{
      filter: hue-rotate(0deg);
    }
    100%{
      filter: hue-rotate(300deg);
    }
  }

  &:hover {
    background: linear-gradient(to right, #000 20%, #c0d188 30%, #2ecc71 70%, #000 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 7s ease-in-out infinite;
    font-weight:bold;

    animation: rotate 1s linear infinite;
    border-width: 4px;
  }
`;

就連我想要改背景顏色都需要做一個 Wrapper 來把所有元件包起來，否則就會變成一個 Block 卡在最上面，即便用 relative 也無法跟其他物件重疊。

import styled from "styled-components";

export const LoginWrapper = styled.section`
  ...
  background: papayawhip;
  ...
  }
`;

最後把所有的資訊組裝起來，做成登入區塊！

export function LoginForm(props) {
  const { switchToSignup } = useContext(AccountContext);

  return (
    <BoxContainer>
      <Input type="email" placeholder="My Dino ID" />
      <Input type="password" placeholder="My Ethereum Address" />
      <SubmitButton type="submit">Enter</SubmitButton>
      <MutedLink href="#">How to know Your Dino ID?</MutedLink>
      <MutedLink href="#">
        Don't have any Dino?{" "}
        <BoldLink href="#" onClick={switchToSignup}>
          Claim One!
        </BoldLink>
      </MutedLink>
    </BoxContainer>
  );
}

這裡製作一個登入區塊的 Header 部分，我想要把之前的恐龍圖片放進來。

const BackDrop = styled(motion.div)`
  ...
  transform: rotate(60deg);
  background-image: url(${img1});
  background-size:30% 30%;  
`;

需要注意的有在 React 裡面沒辦法像之前 CSS 一樣直接使用短網址連結，我找了一段時間的資料才知道，要在一開始宣告以下這個 import 才能在之後使用圖片地址。

import img1 from "./2.png";

最後回傳到整個 index.jsx，做出整個頁面。

export function AccountBox(props) {
  return (
    <AccountContext.Provider value={contextValue}>
        <LoginWrapper>
          <BoxContainer>
            <TopContainer>
							<BackDrop/>
              <HeaderContainer>
                <HeaderText>Dino</HeaderText>
                <HeaderText>Login</HeaderText>
                <SmallText>Please sign-in to continue!</SmallText>
              </HeaderContainer>
            </TopContainer>
            <InnerContainer>
              <LoginForm />
            </InnerContainer>
          </BoxContainer>
        </LoginWrapper>
    </AccountContext.Provider>
  );
}

結果展示：(Focus on My Dino ID, Hover on Submit)

【小結】
React 真的不是普通的困難，除了語法上的熟悉路途極度艱辛和複雜，在組裝每個部件的時候都需要一定的想像力。不只如此，在寫 React App 的時候都會到處下載一些套件來玩看看，不知道為什麼包裝裡面突然出現 prettier ，導致我全部安排好的程式碼都會變成 compiler error 差點讓我氣炸了。因為我又不想改掉自己原本的寫法，所以在網路上找了好久把這個套件拔掉的方法，浪費很多時間。

【參考資料】
Sign In and Sign Up
Create a Modern React Login/Register Form with smooth Animations