2017年11月_Kasekale

原创 Redux状态管理6Redux调试工具

使用 react-redux老赵虽然能力很强,但是用起来比较麻烦 ,为了方便管理,使用魏和尚来负责链接cnpm i –save react-redux忘记 subscribe ,记住 reducer action dispatch React-redux 提供了 2个接口 ,Provider , connect 提供链接的功能 react-redux 的具体使用Provid

2017-11-29 11:30:55 590

原创一个亿的脑细胞

一个Redux-thunk 写成了 Redux-chunk ,心塞地度过了2天,死了一个亿的脑细胞,又改名字.

2017-11-28 18:35:20 370

原创端口释放

netstat -ano

2017-11-27 18:51:32 270

原创 Redux 状态管理03-组件解耦

index.jsimport React from "react"import ReactDom from "react-dom"import { createStore } from "redux"import App from "./App"import { counter,addGun ,ReduceGun,FakerGun} from "./index.redux"const st

2017-11-27 16:55:05 296

原创 Redux 状态管理2

Redux 和React 如何一起使用*把store.dispatch 方法传递给组件 ,内部可以调用修改状态 *Subscribe 订阅 render 函数 ,每次修改都重新渲染 *Redux相关文件 , 移动到单独文件 index.redux.jsindex.jsimport React from "react"import ReactDom from "react-dom"imp

2017-11-27 16:11:28 172

原创 Redux01 续集

subscribe()import { createStore } from "redux"/*新建stoore*通过reducer 建立*根据老的状态和action,生成新的state */function counter (state=0,action){ switch(action.type){ case "加机关枪": return s

2017-11-27 11:54:18 220

翻译 Redux状态管理1

*Redux 是什么 *Redux 的核心概念 *Redux 实战readux 专注于状态管理,和react 解耦单一状态,单向数据流核心的概念:store ,state ,action ,reducer 人少的时候,无论是兵器还是人员的变更 ,都是setState人多的时候,军事和生活分开所有状态归redux管理,redux有一个保险箱 (store),在那里都有记录,(st

2017-11-27 10:56:10 338

原创文章标题

ant-design官网

2017-11-25 14:26:46 189

原创 Job react 基础事件生命周期

React 组件有若干钩子函数,在组件不同的状态执行初始化周期组件重新渲染生命周期组件卸载生命周期 import React from "react"class App extends React.Component{ render(){ const leader = "Kormma!!!" return (

2017-11-25 12:45:35 185

原创 Job react 基础知识回顾4-事件

事件Onclick 点击事件*JSX 里 ,onClick = {this.函数名}来绑定事件 *this引用的问题,需要在构造函数里,用bind 绑定this . *thsi.setState 修改state ,记得返回新的state ,而不是修改import React from "react"class App extends React.Component{ render(){

2017-11-25 11:25:56 184

原创 Job-react 基础知识回顾之组件内部state

组件内部通过state 管理状态JSX 本质就是js ,所以直接数组.map 渲染列表Constructor设置初始状态,记得执行super ,(props)State就是一个不可变的对象,使用this.state 获取import React from "react"class App extends React.Component{ render(){ const l

2017-11-25 10:56:42 259

原创 job-React 组件之间的传递数据

组件之间用props 传递数据 *使用<组件数据=”值” > 的形式传递 *组件里使用this.props获取值 *如果组件里只有render函数 ,还可以用函数的形式写组件import React from "react"class App extends React.Component{ render(){ const leader = "Kormm

2017-11-25 10:19:53 328

原创 job-react 基础知识回顾1

react 是什么 ? *帮助你构建UI 的库 ^Facebook 出品,专注view层 ^一切皆组件 ^全部使用ES 6语法React16是第一个核心代码重写的版本 ,整体API 变化不大 npm install --save react@next react-dom@next React 基础语法React 的Hello world *import

2017-11-25 00:05:15 343

原创 job--express-mongodb

后续进阶 Express和mongodb结合 *mongodb独立工具函数 *express使用body-parser 支持post *使用cookie-parser存储登录信息cookieconst express = require("express")const mongoose = require("mongoose")/*连接mongo 127.0.0.1=

2017-11-24 22:34:44 218

原创 mongodb

*mongoose 的使用 connect 连接数据库定义文档,模型 Schema 和model 新建模型 *增删改差 find , findOne 查找数据 update 更新数据 Remove 删除数据 create 增加数据

2017-11-23 18:08:30 191

原创 dos

返回上一级目录的命令是： cd .. （注意，是2个半角小点）。 DOS命令 CD\ 这样就回到根目录了。如果想返回上级目录CD..就可以了DIR —— 列目录。列出目录下的子目录和文件。　例：DIR 〈Enter〉　　　列出当前目录下的所有子目录和文件名　　　DIR /P〈Enter〉　　列出当前目录下的所有子目录和文件名，每显示一屏暂停。　　　DIR C*.SYS〈Enter〉

2017-11-22 19:44:49 160

原创 Job-ES6 语法

*块级作用域,字符串,函数 *对象扩展,解构 *类,模块化使用let 完全可以替换var ,使用var ,在{}之外是可以找到的,使用let在{}之外是找不到的.模版字符串name="imooc";course = "React 开发 App"console.log("hello" + name + ",course is" + course)console.log(`hello

2017-11-22 18:49:13 255

原创 DOM12表格

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <table border="" id="box"> <thead> <tr>

2017-11-21 13:58:33 164

原创 dom11clone

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 100px;height: 100px;background-color: pink} #div2{width: 100px;he

2017-11-21 12:10:58 158

原创 dom11克隆replaceChild

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 300px;height: 300px;background-color: pink} #div2{width: 300px;he

2017-11-21 11:41:42 260

原创 dom11克隆removeChild

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="点击删除" id = "btn"> <ul id="ul" > <li>1</li>

2017-11-21 11:01:18 182

原创 10创建元素

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" id = "btn" name = "" value = "点击添加"> <ul id = "ul"> </ul>

2017-11-20 23:05:20 173

原创 9元素宽高的获取

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 200px;height: 200px;background-color: pink;border:10px solid #00BFFF; pad

2017-11-20 20:45:00 225

原创 8属性操作

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div1"></div> <script> var div1 = document.getElementById('div1');

2017-11-19 21:09:33 177

原创 5offsetLeft,offsetParent,getBoundingClientRect

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{padding:100px;} #div1{background-color: #FFF5EE;position:relative;}

2017-11-19 19:55:25 201

原创 4-节点例子nextprevious

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul{width: 300px;} ul li{height: 30px;background-color: #eee;color:#666;font-we

2017-11-18 21:29:44 218

原创文章标题

前言: create-react-app 是一个全局的命令行工具用来创建一个新的项目 react-scripts 是一个生成的项目所需要的开发依赖一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖，再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。现在如果你正在搭建react运行环境，使用 cr

2017-11-14 13:52:47 193

原创 3firstElementChild

firstElementChild lastElementChild

2017-11-13 12:48:58 290

原创 3nextElementSibling

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ul li{ width: 150px; height: 50px; background: pi

2017-11-13 12:41:18 337

原创 3parentNode小例子

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ul li{ width: 150px; height: 50px; background: pi

2017-11-13 12:05:03 217

原创 3父节点和兄弟节点

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ul li{ width: 150px; height: 50px; background: bl

2017-11-13 11:39:06 386

原创 2节点类型

>document:9>3文本节点: 数字,文本,换行.>8注释节点>2属性节点 div.attributes[0] nodeValue 查看节点的属性值 nodeName查看属性名 1元素节点 childNodes:获取某个节点下的子节点children:找到某个元素下面的所有元素子节点 <!doctype html><html

2017-11-12 22:05:42 333

原创 git

git

2017-11-12 20:19:41 146

原创 DOM

Javascript由三部分组成,ECMAscript(javascript核心标准,也是一个解析器,是一个规范)DOM (通过document提供的一些属性或者方法来操作页面,帮助我们去操作页面的结构,添加删除某个标签,document提供了一些接口,赋予开发者操作页面的能力)BOM (通过window提供的一些属性和方法来操作浏览器,更加方便的区操作浏览器,拉到底部,有数据加载)<!do

2017-11-12 20:17:50 148

原创 npm

where <command> is one of: access, adduser, bin, bugs, c, cache, completion, config, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, get, help, help-search, i, init, install,

2017-11-09 17:19:00 234

原创 5.2webpack的热加载配置

cnpm install -g webpack cnpm install -g webpack-dev-server cnpm install webpack-dev-server --savecnpm install --save babel-loader ——bundle.jscnpm install --save babel-core ——bundle.js

2017-11-04 19:57:55 570