世界上最伟大的投资就是投资自己的教育
https://github.com/benawad/styled-components-example/blob/master/src/App2.js
import React, { Component } from 'react';
import logo from './logo.svg';
import styled, { keyframes } from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const AppWrapper = styled.div`
text-align: center;
`;
const AppHeader = styled.div`
background-color: ${ props => props.isBlack ? '#222' : "red" };
height: 150px;
padding: 20px;
color: white;
@media (min-width: 800px) {
background-color: blue;
}
`;
const AppIntro = styled.p`
font-size: large;
`;
const AppLogoSpin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;
const AppLogo = styled.img`
animation: ${AppLogoSpin} infinite 20s linear;
height: 80px;
`;
const AppTitle = styled.h1`
font-size: 1.5em;
`;
class App extends Component {
render() {
return (
<AppWrapper>
<AppHeader isBlack={false}>
<AppLogo src={logo} alt="logo" />
<AppTitle>Welcome to React</AppTitle>
</AppHeader>
<AppIntro>
To get started, edit <code>src/App.js</code> and save to reload.
</AppIntro>
</AppWrapper>
);
}
}
export default App;
07:141FreeReact 技巧 #1 如何用 netlify 云服务部署 React 应用
05:342FreeReact 技巧 #2 把 React 应用部署到 GitHub Pages
10:293FreeReact 技巧 #3 React-router 教程 part 1
07:394FreeReact 技巧 #4 React-router 教程 part 2
04:525FreeReact 进阶提高免费视频教程 #5 React.PureComponent
02:366FreeReact 进阶提高免费视频教程 #6 Fragment
03:587FreeReact 进阶提高免费视频教程 #7 context(上下文)
02:518FreeReact 进阶提高免费视频教程 #8 高阶组件
08:209FreeReact 进阶提高免费视频教程 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)
05:5810FreeReact 进阶提高免费视频教程 #10 用高阶组件来重构代码
04:3011FreeReact 进阶提高免费视频教程 #11 我最爱的 React 库 - 功能强大的可插入组件(简化代码)
03:0712FreeReact 进阶提高免费视频教程 #12 返回多个组件的正确方式
06:4913FreeReact 进阶提高免费视频教程 #13 netlifyctl 一键部署前端应用
06:3714FreeReact 进阶提高免费视频教程 #14 defaultProps 和 类型检查 PropTypes part 1
09:5715FreeReact 进阶提高免费视频教程 #15 类型检查 PropTypes part 2
11:0816FreeReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)
11:4517FreeReact 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch
02:3718FreeReact 进阶提高免费视频教程 #18 升级到 16.3
03:5019FreeReact 进阶提高免费视频教程 #19 探索 bind (this) 的写法
06:5020FreeReact 进阶提高免费视频教程 #20 React 16.3 全新的 Context API
09:1921FreeReact 进阶提高免费视频教程 #21 React 16.3 全新的 Context API - 实践
11:3722FreeReact 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践
06:1023FreeReact 进阶提高免费视频教程 #23 对象,数组,可变数据
06:0624FreeReact 进阶提高免费视频教程 #24 React.Children API 和 props.children 讲解
04:5625FreeReact 进阶提高免费视频教程 #25 如何使用 styled-components
07:29FreeReact 进阶提高免费视频教程 #26 如何使用 styled-components(实践篇)
06:4027FreeReact 进阶提高免费视频教程 #27 你应该使用 redux-form(介绍)
10:3428FreeReact 进阶提高免费视频教程 #28 你应该使用 redux-form(实践篇)
08:5229FreeReact 进阶提高免费视频教程 #29 React Portals(学习方法)
04:2130FreeReact 进阶提高免费视频教程 #30 使用 React Portals 实现 Modal 框(part 1)
07:2631FreeReact 进阶提高免费视频教程 #31 使用 React Portals 实现 Modal 框(part 2)
04:3832FreeReact 进阶提高免费视频教程 #32 使用 React Portals 实现 Modal 框(part 3)
05:3033FreeReact 进阶提高免费视频教程 #33 使用 React Portals 实现 Modal 框(part 4)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号