Day 6【React】阿嬷你怎麽没感觉?

【前言】
终於来到第一个大魔王了,突然感觉自己很像在打怪。等到开始打 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


<<:  Day7 - TextView(一)

>>:  Day 17 - Primitive and Reference

Day 12. Unity可以做线上游戏吗?

嗨嗨,这里是学一学Unity程序又突然冒出来的疑问,因此就简单的搜索一下。 同样作为游戏引擎,Uni...

Day 23 - 天眼CNN 的耳朵和嘴巴 - Transformer

RNN问题及解法 RNN 有字数限制, 最多到200字, 超过效果不好。The fall of RN...

Day 27 - 实战演练 — Tabs

想先看 Code 或是 Demo 的由此去 Github Repo: ithelp-ui-demo...

用 Python 畅玩 Line bot - 20:图文选单

有些 Line bot 在手机板的对话框部分,可以看到设置了各种大小的选单,这部分的功能我们可以到 ...

Golang - debug工具 DELVE

状况 最近的经验是要把公司的程序码翻新 但由於旧有的程序码技术债实在太过庞大,没办法像以前以往接手到...