styled-components-tutorial React样式组件教程
用styled-components写样式，最大的好处就是不用来回切换 CSS 文件，写起来流畅多。
styled-components-tutorial 的项目结构比较清晰，适合刚上手 React 的朋友练手。它是基于 Create React App 起步的，常用的脚本都集成好了，像 yarn start、yarn build、yarn test，一键搞定。
项目支持自动刷新，写完样式页面会立马更新，体验还挺丝滑的。如果你平时习惯写组件的时候顺手加样式，这套写法会让你挺有成就感。
另外一个亮点是把生产构建的流程也好了，yarn build 之后就是压缩+哈希优化完的产物，直接扔到服务器就能跑。
不过要注意，yarn eject 是个单行操作，除非你想自己折腾配置，不然别轻易点这个。
想拓展玩法的朋友，可以看看这些相关的实战项目，像React 开发模板和电商平台前端实现，都是用 styled-components 打底的，思路和结构也值得学学。
如果你想边学边改，建议 fork 一份练练手。样式和逻辑耦合度刚刚好，既直观又不乱。
文件大小：215.23KB
评论区