{"id":21944107,"url":"https://github.com/wangxiaoyugg/learn-react-redux","last_synced_at":"2026-04-09T13:49:12.282Z","repository":{"id":113232446,"uuid":"109198302","full_name":"WangXiaoyugg/Learn-React-Redux","owner":"WangXiaoyugg","description":"react  redux es6","archived":false,"fork":false,"pushed_at":"2017-11-12T14:10:13.000Z","size":319,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-22T16:13:18.862Z","etag":null,"topics":["css","express-mongodb","react","react-router","redux"],"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/WangXiaoyugg.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":"2017-11-02T00:22:10.000Z","updated_at":"2017-11-08T02:04:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f0e818d-307f-4c33-b03e-030f20444ae9","html_url":"https://github.com/WangXiaoyugg/Learn-React-Redux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WangXiaoyugg/Learn-React-Redux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WangXiaoyugg%2FLearn-React-Redux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WangXiaoyugg%2FLearn-React-Redux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WangXiaoyugg%2FLearn-React-Redux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WangXiaoyugg%2FLearn-React-Redux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WangXiaoyugg","download_url":"https://codeload.github.com/WangXiaoyugg/Learn-React-Redux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WangXiaoyugg%2FLearn-React-Redux/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266263057,"owners_count":23901353,"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":["css","express-mongodb","react","react-router","redux"],"created_at":"2024-11-29T04:13:37.092Z","updated_at":"2025-10-24T22:15:30.423Z","avatar_url":"https://github.com/WangXiaoyugg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### React-Redux 即时通讯项目\n\n#### 前置知识\n- 知识储备 + React 全家桶学习\n- 项目实战\n- 优化总结\n- html,css,js\n- node.js,npm, webpack\n- react.js 开发经验\n- es6\n- 新人进阶React形式，逐步优化\n- 按功能开发页面，抽离公共组件\n- 手写每一行JS代码，少些不写或者少些css\n\n#### 学习目标\n- 了解一个中度复杂规模的应用开发流程\n- 掌握React.js的高级应用\n- 彻底掌握 Redux的使用\n- 了解实时应用开发方式\n\n\n#### 技术架构\n前台页面: 登录，注册，完善信息，牛人列表页面，Boss列表页面，个人中心，消息导航，聊天页面\n前端支撑: ant-mobile Redux React-Router4 axios create-react-app 第三方组件库\n前端框架: React\n后端支撑: Express Socket.io Mongodb\n\n#### 开发环境搭建\n- create-react-app\n- npm 安装 和使用第三方库\n- 定制化配置\n- npm start\n- localhost:3000\n- npm install redux --save\n- npm run eject\n- 扩展package.json的script字段，npm run \n- 注册码云账号\n- 项目是私有项目，所以需要把账号发给管理员校验，获取权限\n- 添加本地ssh key到码云后台，开始git 开发\n\n#### es6常用用法\n- es6是什么\n- es6常用语法\n```\n块级作用域 let/const for(let i=0;i\u003c10;i++){};\n字符串扩展 let name='小明';`hello${name}`\n函数扩展 箭头函数 （）=\u003e {} setTimeout; x=\u003ex*3\n默认参数 (name='demo')=\u003e{console.log(`hello ${name}`)};\n展开符 hello = (name1,name2) =\u003e {console.log(name1,name2)};\nlet arr= ['demo1','demo2'];\nhello.apply(null,arr);\nhello(...arr);\n\n对象展开符 obj = {name:'demo',course:'react app'};\nObject.keys(obj);\nObject.keys(obj);\nObject.values(obj);\nObject.entries(obj);\n\nconst name = 'imooc';\nconst obj = {\n\tname,\n\t[name]:'hello',\n\thello:function(){},\n\thello1(){}\n}\nconsole.log(obj)\n\nconst obj2 = {type:\"IT,name:'rake'};\nconsole.log(...obj,...obj2,date:'2017');\n\n解构赋值\nconst arr = ['hello','imooc'];\nlet arg1 = arr[0];\nlet arg2 = arr[1];\nlet {a1,a2} = arr;\nconsole.log(a1,'|',a2);\n同理对象可以取值\n\nclass 类\nclass Demo {\n\tconstructor(){\n\t\tthis.name = 'demo'\n\t}\n\tsayhello(){\n\t\tconsole.log(`hello ${this.name}`)\n\t}\n} \nconst demo = new Demo();\ndemo.sayhello();\n\n数据结构\nSet 重点研究\nMap\nSymbol\n\n模块化机制 import export\n//demo1.js\nexport const name='demo';\nexport function sayHello(){};\nexport default course = \"React\";\n//demo2.js\nimport {name,sayHello} from './demo1.js'\nimport course from './demo1.js'\nimport * as mod1 from './demo1.js'\n\n装饰器\n对象扩展，函数绑定\nasync await\npromise\n迭代器生成器\n代理\n\n数组常用写法\narr.map(v =\u003e v*2);\n对象的常用写法\n```\n\n#### express + mongodb 入门\n- express 开发 web 接口\n1. npm install express --save\n2. 新建 server／server.js\n```\n参考 www.express.com.cn\nnpm install nodemon -g\nnodemon server.js\n```\n3. app.get , app.post\n4. app.use\n5. res.send ,res.json,res.sendfile\n\n- nosql mongodb\n1. 安装mongodb\nbrew install mongodb\nmongod --config /usr/local/ect/mongod.conf\nmongo 启动mongodb\n \nnohup mongod --config /usr/local/etc/mongod.conf \u0026\n\n- nodejs mongoose 模块连接和操作mongodb\nnpm install mongoose -g\n\n```\nconst mongoose = require('mongoose');\n//链接 mongo 并且使用 imooc集合\nconst DB_URL = 'mongodb://localhost:27017/imooc';\nmongoose.connect(DB_URL);\nmongoose.connection.on('connected',function(){\n\tconsole.log('connect success')\n})\n\n定义文档模型 ，Schema 和 model\nconst User = mongoose.model('user',new mongoose.Schema({\n\tuser:{type:String,require:true},\n\tage:{type:Number,require:true}\n}))\n\n增删改查\nUser.create({user:'imooc',age:18},function(err,doc){\n\tif(!err){\n\t\tconsole.log(doc);\n\t}else {\n\t\tconsole.log(err)\n\t}\n})\n\nUser.find({},function(err,doc){\n\tres.json(doc);\n})\nUser.findOne({age:18},function(err,doc)=\u003e{\n\n})\nUser.remove({age:18},function(err,doc)=\u003e{\n\tconsole.log(doc);\n})\nUser.update({user:'小明'},{'$set':{age:26}},function(err,doc){\n\tconsole.log(doc)\n})\n```\n\n- express 和 mongodb 结合\n1. mongodb独立工具函数\n2. express使用 body-parser 支持 post 参数\n3. cookie-parser 支持 cookie 信息\n\n\n\n##### React-Router4 \n- 官方路由库\n- 单页应用\n- BrowserRouter 包裹整个应用\n- Router 对应的路由 可嵌套\n\n\n#### 前后端联调\n- axios 发送数据,端口不一致,使用proxy 配置转发\n- axios 拦截器，统一的loading处理\n- redux 使用异步数据，渲染页面\n\n#### 登录注册\n- 页面文件结构\n组件放在 Component/\n页面放在 Container/\n页面入口处获取用户信息，决定跳转到哪个页面\n\n- web开发模式\njson 通信\n基于cookie 验证\ncookie 类似于身份证，登录后服务端返回，有了cookie 可以访问受限制资源\n页面cookie的管理浏览器会自动处理\n\n- 前后端实现\n用户加载页面  =\u003e 带着cookie 向后端获取用户信息  =\u003e 用户加载页面\n\n已登陆 =\u003e app 内部页面\n未登录 =\u003e 登录页面 =\u003e 登录成功,前端存储cookie =\u003e app内部页面 \n\n- 删除src中的文件，只保留 config.js index.js job.png reducer.js\nreducer {};\n\n- package.json\nbabel-plugin-import ant-design mobile\ntransform-decorators-legacy\nproxy 配置\nexpress cookie-parser\n\n- 新建文件夹\ncontainer/login/login.js\ncontainer/register/register.js\ncomponent/logo/logo.js\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangxiaoyugg%2Flearn-react-redux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangxiaoyugg%2Flearn-react-redux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangxiaoyugg%2Flearn-react-redux/lists"}