【前言】
终於来到第一个大魔王了,突然感觉自己很像在打怪。等到开始打 Boss 才发现:「React 也太复杂了吧!」一堆大括号、中括号、小括号、Arrow Function
,再加上 jQuery
的话,必须要很认真看才有办法分清楚什麽东西包在里面。看来看去真的是一点感觉都没有,尤其我对後端的东西也是一窍不通阿!
【教学资源 - React】
今天推荐一样是 The Net Ninja 的 React 教学影片与相关资源。gitHub 上还有全部的教学资源,真是佛心公司、佛心公司!做完之後的 BLOG 介面真的很不错,所有我会用到的基本功能都有很详细地演示过。
这个操作让人叹为观止,为了不要使用到 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
>>: Day 17 - Primitive and Reference
嗨嗨,这里是学一学Unity程序又突然冒出来的疑问,因此就简单的搜索一下。 同样作为游戏引擎,Uni...
RNN问题及解法 RNN 有字数限制, 最多到200字, 超过效果不好。The fall of RN...
想先看 Code 或是 Demo 的由此去 Github Repo: ithelp-ui-demo...
有些 Line bot 在手机板的对话框部分,可以看到设置了各种大小的选单,这部分的功能我们可以到 ...
状况 最近的经验是要把公司的程序码翻新 但由於旧有的程序码技术债实在太过庞大,没办法像以前以往接手到...