contact-app-list React联系人列表组件示例
黑白风格的联系人列表界面，用的是React搭配Redux、Material UI这套组合，整体看起来挺清爽，交互也够丝滑，适合练练项目结构和状态管理。
contact-app-list用的是 create-react-app 脚手架，启动方便，npm start 就能跑起来，热更新也比较顺畅。UI 方面用的是 Material UI，你不用自己从头设计组件，调样式的时候也省心。
状态管理用的是 Redux，配合 Thunk 做异步操作，像求联系人列表就靠 axios 去调接口，再走 action 更新状态。逻辑挺清晰，新手也容易跟得上。
构建用 npm run build 就能打包好，默认优化还不错，生产环境的体积控制得比较稳。要注意，npm run eject 是单向的，别手欠点了，除非你真的打算深度改配置。
想扩展的话，可以参考类似项目，比如 Trippit 和 React + Redux + TypeScript 样板，都挺有参考价值。如果你打算练习项目结构、异步流程和 UI 设计，这个项目蛮合适。
文件大小：199.18KB
评论区