Giter VIP home page Giter VIP logo

learn-react-redux's Introduction

React-Redux 即时通讯项目

前置知识

  • 知识储备 + React 全家桶学习
  • 项目实战
  • 优化总结
  • html,css,js
  • node.js,npm, webpack
  • react.js 开发经验
  • es6
  • 新人进阶React形式,逐步优化
  • 按功能开发页面,抽离公共组件
  • 手写每一行JS代码,少些不写或者少些css

学习目标

  • 了解一个中度复杂规模的应用开发流程
  • 掌握React.js的高级应用
  • 彻底掌握 Redux的使用
  • 了解实时应用开发方式

技术架构

前台页面: 登录,注册,完善信息,牛人列表页面,Boss列表页面,个人中心,消息导航,聊天页面 前端支撑: ant-mobile Redux React-Router4 axios create-react-app 第三方组件库 前端框架: React 后端支撑: Express Socket.io Mongodb

开发环境搭建

  • create-react-app
  • npm 安装 和使用第三方库
  • 定制化配置
  • npm start
  • localhost:3000
  • npm install redux --save
  • npm run eject
  • 扩展package.json的script字段,npm run
  • 注册码云账号
  • 项目是私有项目,所以需要把账号发给管理员校验,获取权限
  • 添加本地ssh key到码云后台,开始git 开发

es6常用用法

  • es6是什么
  • es6常用语法
块级作用域 let/const for(let i=0;i<10;i++){};
字符串扩展 let name='小明';`hello${name}`
函数扩展 箭头函数 ()=> {} setTimeout; x=>x*3
默认参数 (name='demo')=>{console.log(`hello ${name}`)};
展开符 hello = (name1,name2) => {console.log(name1,name2)};
let arr= ['demo1','demo2'];
hello.apply(null,arr);
hello(...arr);

对象展开符 obj = {name:'demo',course:'react app'};
Object.keys(obj);
Object.keys(obj);
Object.values(obj);
Object.entries(obj);

const name = 'imooc';
const obj = {
	name,
	[name]:'hello',
	hello:function(){},
	hello1(){}
}
console.log(obj)

const obj2 = {type:"IT,name:'rake'};
console.log(...obj,...obj2,date:'2017');

解构赋值
const arr = ['hello','imooc'];
let arg1 = arr[0];
let arg2 = arr[1];
let {a1,a2} = arr;
console.log(a1,'|',a2);
同理对象可以取值

class 类
class Demo {
	constructor(){
		this.name = 'demo'
	}
	sayhello(){
		console.log(`hello ${this.name}`)
	}
} 
const demo = new Demo();
demo.sayhello();

数据结构
Set 重点研究
Map
Symbol

模块化机制 import export
//demo1.js
export const name='demo';
export function sayHello(){};
export default course = "React";
//demo2.js
import {name,sayHello} from './demo1.js'
import course from './demo1.js'
import * as mod1 from './demo1.js'

装饰器
对象扩展,函数绑定
async await
promise
迭代器生成器
代理

数组常用写法
arr.map(v => v*2);
对象的常用写法

express + mongodb 入门

  • express 开发 web 接口
  1. npm install express --save
  2. 新建 server/server.js
参考 www.express.com.cn
npm install nodemon -g
nodemon server.js
  1. app.get , app.post
  2. app.use
  3. res.send ,res.json,res.sendfile
  • nosql mongodb
  1. 安装mongodb brew install mongodb mongod --config /usr/local/ect/mongod.conf mongo 启动mongodb

nohup mongod --config /usr/local/etc/mongod.conf &

  • nodejs mongoose 模块连接和操作mongodb npm install mongoose -g
const mongoose = require('mongoose');
//链接 mongo 并且使用 imooc集合
const DB_URL = 'mongodb://localhost:27017/imooc';
mongoose.connect(DB_URL);
mongoose.connection.on('connected',function(){
	console.log('connect success')
})

定义文档模型 ,Schema 和 model
const User = mongoose.model('user',new mongoose.Schema({
	user:{type:String,require:true},
	age:{type:Number,require:true}
}))

增删改查
User.create({user:'imooc',age:18},function(err,doc){
	if(!err){
		console.log(doc);
	}else {
		console.log(err)
	}
})

User.find({},function(err,doc){
	res.json(doc);
})
User.findOne({age:18},function(err,doc)=>{

})
User.remove({age:18},function(err,doc)=>{
	console.log(doc);
})
User.update({user:'小明'},{'$set':{age:26}},function(err,doc){
	console.log(doc)
})
  • express 和 mongodb 结合
  1. mongodb独立工具函数
  2. express使用 body-parser 支持 post 参数
  3. cookie-parser 支持 cookie 信息
React-Router4
  • 官方路由库
  • 单页应用
  • BrowserRouter 包裹整个应用
  • Router 对应的路由 可嵌套

前后端联调

  • axios 发送数据,端口不一致,使用proxy 配置转发
  • axios 拦截器,统一的loading处理
  • redux 使用异步数据,渲染页面

登录注册

  • 页面文件结构 组件放在 Component/ 页面放在 Container/ 页面入口处获取用户信息,决定跳转到哪个页面

  • web开发模式 json 通信 基于cookie 验证 cookie 类似于身份证,登录后服务端返回,有了cookie 可以访问受限制资源 页面cookie的管理浏览器会自动处理

  • 前后端实现 用户加载页面 => 带着cookie 向后端获取用户信息 => 用户加载页面

已登陆 => app 内部页面 未登录 => 登录页面 => 登录成功,前端存储cookie => app内部页面

  • 删除src中的文件,只保留 config.js index.js job.png reducer.js reducer {};

  • package.json babel-plugin-import ant-design mobile transform-decorators-legacy proxy 配置 express cookie-parser

  • 新建文件夹 container/login/login.js container/register/register.js component/logo/logo.js

learn-react-redux's People

Contributors

wangxiaoyugg avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.