{"id":19411270,"url":"https://github.com/monster1935/cnode-react-app","last_synced_at":"2025-04-24T10:33:14.946Z","repository":{"id":209146476,"uuid":"117088835","full_name":"monster1935/cnode-react-app","owner":"monster1935","description":"基于react的仿cnode社区项目","archived":false,"fork":false,"pushed_at":"2018-01-16T07:26:28.000Z","size":4706,"stargazers_count":18,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-11-25T12:28:02.237Z","etag":null,"topics":["cnode","demo","react","react-router"],"latest_commit_sha":null,"homepage":"https://monster1935.github.io/cnode-react-app/#/","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/monster1935.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}},"created_at":"2018-01-11T11:02:18.000Z","updated_at":"2023-11-25T12:28:05.264Z","dependencies_parsed_at":"2023-11-25T12:38:07.439Z","dependency_job_id":null,"html_url":"https://github.com/monster1935/cnode-react-app","commit_stats":null,"previous_names":["monster1935/cnode-react-app"],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monster1935%2Fcnode-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monster1935%2Fcnode-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monster1935%2Fcnode-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monster1935%2Fcnode-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monster1935","download_url":"https://codeload.github.com/monster1935/cnode-react-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223949773,"owners_count":17230353,"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","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":["cnode","demo","react","react-router"],"created_at":"2024-11-10T12:19:57.552Z","updated_at":"2024-11-10T12:19:58.009Z","avatar_url":"https://github.com/monster1935.png","language":"JavaScript","readme":"## cnode-react-app\n\n\u003e 一个学习  reactjs 的 demo，基于 CNode 社区提供的 API,以 react 组件化的开发思路，练习了基于 react 技术栈为主的前端单页面开发方式。\n\n## 项目预览\n![](https://raw.githubusercontent.com/monster1935/cnode-react-app/master/public/cnodejs-react.png)\n## Demo\n\n[在线预览，戳我](https://monster1935.github.io/cnode-react-app/#/)\n\n## 技术栈\n\n- 脚手架工具\n  官方脚手架工具 [create-react-app](https://github.com/facebookincubator/create-react-app)\n- 状态管理\n  [redux](https://redux.js.org/)，[redux莞式教程](https://github.com/kenberkeley/redux-simple-tutorial), [react-redux](https://github.com/reactjs/react-redux)\n- 前端路由管理\n  [react-router](https://reacttraining.com/react-router/web/guides/quick-start/installation)\n- 打包编译\n  [webpack](https://doc.webpack-china.org/)\n- ES6\n  [ECMAScript 6 入门](http://es6.ruanyifeng.com/)\n\n## TODOLIST\n\n- [x] 首页组件化展示\n- [x] 基于文章类型的前端路由添加\n- [x] 基于文章详情的前端路由添加\n- [x] 文章详情页的展示\n- [x] 文章评论的显示\n\n## npm scripts\n\n```bash\n## 本地调试\nyarn start\n\n## 打包\n\nyarn run build\n\n## 发布至github repository gh-pages分支,使用该功能需要yarn add gh-pages,\n## 并在package.json中配置网站的路径，如该示例中的homepage字段\n\nyarn run deploy\n\n```\n## 总结\n\n第一次尝试使用 react 进行前端单页面开发，之前曾经用 vue 写过一个 CNode.js 的一个应用 [vue-cnode](https://monster1935.github.io/vue-cnode/#/)。与 vue 都是 MVVM 框架，但是在react的开发中还是有一些地方存在不同，目前尚未进行深入研究及实践。在这个小项目中感受最深的有以下几点：\n\n- 组件的写法\n\nreact 中导出的是一个含有jsx语法的类， vue 的开发中组件一般以vue的单文件组件写法，导出一个对象。\n- 关于路由的使用\n\nreact 中使用 react-router 进行前端路由的管理，同样含有 HashRouter 以及 BrowserRouter。其中 BrowserRouter 需要托管静态主页的服务器配合进行配置。\n\n- 属性的写法\n\nreact 中 jsx 语法中给 html 绑定属性值，部分属性名称发生变化，如 class 需要写成 className, for 需要写成 htmlFor，内联样式 style 属性需要使用驼峰的写法等。\n\n- 组件之间的通信\n\n目前仅仅实践了父子组件的通信，通过 props 传参。至于非父子组件之间的通信如何来实现，尚未涉及，redux 以及 react-redux 在该项目中并未得到体现。\n\n另外该仿 CNode.js 社区的 react 项目，仅仅通过部分API完成了首页以及文章详情页的一些展示，添加了 react 的前端路由，目的在于体会 react 技术栈的开发方式，尚不足以谈最佳实践。\n\n## 写在最后\n\n感谢 [CNode](https://cnodejs.org/) 社区的提供的 API，一个有温度的社区。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonster1935%2Fcnode-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonster1935%2Fcnode-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonster1935%2Fcnode-react-app/lists"}