{"id":11962982,"url":"https://github.com/SZzzzz/react-redux-cnode","last_synced_at":"2025-10-15T15:30:48.114Z","repository":{"id":246770376,"uuid":"69429787","full_name":"SZzzzz/react-redux-cnode","owner":"SZzzzz","description":"A cnode web application base on react, redux and react-router","archived":false,"fork":false,"pushed_at":"2016-10-09T08:23:04.000Z","size":318,"stargazers_count":16,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T04:32:05.889Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SZzzzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-28T05:45:28.000Z","updated_at":"2022-12-04T02:49:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"c672df97-52ad-40ef-8c9c-ec7b7756c990","html_url":"https://github.com/SZzzzz/react-redux-cnode","commit_stats":null,"previous_names":["szzzzz/react-redux-cnode"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SZzzzz/react-redux-cnode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SZzzzz%2Freact-redux-cnode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SZzzzz%2Freact-redux-cnode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SZzzzz%2Freact-redux-cnode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SZzzzz%2Freact-redux-cnode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SZzzzz","download_url":"https://codeload.github.com/SZzzzz/react-redux-cnode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SZzzzz%2Freact-redux-cnode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279087036,"owners_count":26100295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-02T00:19:46.184Z","updated_at":"2025-10-15T15:30:47.800Z","avatar_url":"https://github.com/SZzzzz.png","language":"JavaScript","funding_links":[],"categories":["Awesome-CNode"],"sub_categories":["React"],"readme":"## 项目简介\n一个WebApp版的cnode客户端,采用了react, redux, react-router构建。采用了比较新的技术,例如:\n- 采用`isomorpfic-fetch`库代替`XMLHttpRequest`实现网络请求。\n- 使用`PostCSS`处理CSS。\n- 使用`CSSModules`处理组件内部的类名。\n\n## 预览\n[DEMO](https://szzzzz.github.io/demo/cnode/)\n\n## 运行项目\n本项目基于node4.4.5版本,请注意版本\n```\n  git clone https://github.com/SZzzzz/react-redux-cnode.git\n  cd react-redux-cnode\n  npm install \n  npm install webpack-dev-server webpack -g (没有安装webpack的需要安装)\n  npm run dev (浏览器输入http://loacalhost:8888 查看)\n```\n\n## 状态树\n本项目使用redux管理状态,状态树如图:\n![截图](https://raw.githubusercontent.com/SZzzzz/react-redux-cnode/master/src/images/status_tree.png)  \n基本思路是每个页面对应一个reducer,管理本页面的状态。其中:\n- `footer`对应底部tab条\n- `homePage`对应主页\n- `loginPage`对应登陆页面\n- `profilePage`对应本人信息页面,保存有个人信息\n- `currentTopic`对应当前进入的主题,具有缓存作用\n- `currentUser`对应点击头像或用户名进入的用户信息界面\n\n## TODO\n- 修复下拉刷新的bug\n- 适配移动端\n- 将输入框替换为富文本编辑器\n- 增加回复某人功能\n- 增加上拉刷新功能\n- 增加消息功能\n\n## 总结\n- 简单学习了一下PostCSS,觉得比SASS更强大,只不过需要自己配置,各种插件让人眼花缭乱,略显麻烦,所以这次只用了autoprefixer,以后会更多的尝试。\n- 使用了CSS Modules,感觉和组件化开发很搭,组件内部的样式命名再也不用担心冲突了。\n- 对React全家桶有了深入的了解,路由决定渲染哪些组件,而store中的数据决定如何渲染组件。\n- Store中每个数据的变化都要经过Dispatch,Reducer,有些简单的状态这么处理起来感觉很麻烦,可能复杂度上去之后,这种单向数据流才能真正体现出威力。\n\n## 遇到的一些问题\n- `webpaack-dev-server`的配置,在`webpack.config.js`配置非常麻烦,而且文档说的含糊不清,建议还是在命令行中使用参数的方式配置。\n- `webfont`需要搭配`url-loader`,如果需要将`webfont`的编码以字符串的形式传递的话,需要转换形式,例如:`\u0026#xe714;`改写为`\\ue714`。\n- react组件的生命周期一定要搞清楚,否则会出现很多问题。\n- 路由在生产环境和开发环境可能不一样,需要定义一个前缀,使用`webpack.definePlugin`控制前缀是否添加。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSZzzzz%2Freact-redux-cnode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSZzzzz%2Freact-redux-cnode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSZzzzz%2Freact-redux-cnode/lists"}