MyReadsApp React书架管理项目
MyReads 的 React 练手项目，书架管理逻辑清晰，还带了个搜索功能，蛮适合刚入门的你拿来研究。它是 Udacity 课程的期末项目，用create-react-app搭的壳，省事不少，配置也干净。
首页的交互做得比较直观，三大书架分组（正在读、想读、已读）一目了然，点菜单就能切换状态，响应也快。搜索页做了个小判断：如果搜索结果里有你首页已有的书，它会正确显示你原来的书架状态，这个细节还挺贴心。
用法也简单，git clone下来后跑npm i，直接npm start。本地跑起来快。唯一的槽点就是代码风格略乱，写的时候还在摸索 React，函数和状态管理有点混，但不影响学习，倒挺适合你看着改。
项目里面用的是 React 的组件拆分思路，也算是对“容器组件”和“展示组件”这个设计模式的练手。建议你多看看SearchPage和Book两个组件，逻辑蛮清晰。搭配官方文档效果更好。
如果你正准备学React Router，这里面也有简单应用，首页和搜索页就是两路由切换的；再往深了搞，可以试试用Context或Redux重构下状态管理，代码会清爽不少。
想深入的话可以看看create-react-app 入门教程和CRA 重构项目实战，搭配起来更有感觉。
如果你 React 刚上手，想练练组件拆分、路由、状态变更这些基础点，这个项目还挺不错的。别忘了改一改代码，多敲几遍会更有收获。
文件大小：103.62KB
评论区