[置顶] React+Babel+Webpack初学者全家桶完整实例Demo

写在前面的话自已以前对redux,react,rect-redux,react-router都是有一点的了解,并且在真实的项目中也多少有些涉及。但是不足的地方在于没有做一个demo将他们串起来,所以总是感觉似懂非懂。特别是react服务端渲染这一块,对于自己完全就是一个黑箱,这对我深入理解react同构等稍微难一点的内容产生了很大的影响。所以我最后写了这个例子,希望有同样困扰的同学能够有所收获。也欢...
阅读(488) 评论(0)

[置顶] react的context更新而组件不更新的解决方案

代码地址请在github查看,也欢迎您star,issue,共同进步!1.react中父组件的shouldComponentUpdate返回false在React的Context API中,如果context中属性发生变化,而父组件的shouldComponentUpdate返回false,那么该父组件中所有子组件都不会监测到conext的变化,从而不会reRender。比如下面的例子中,我们的Th...
阅读(300) 评论(0)

[置顶] redux中高阶reducer原理分析与实例

建议在github阅读,我会及时更新部分内容。也欢迎star,issue1.高阶reducer的定义高阶reducer指的是一个函数,该函数接收一个reducer函数作为参数或者返回一个reducer函数作为函数的返回值。高阶reducer也可以被看做为一个reducer工厂,combineReducers是高阶reducer一个典型的例子。我们可以使用高阶reducer函数来创建一个符合自己要求的...
阅读(193) 评论(0)

[置顶] react-router服务器渲染match方法之renderProps内部结构与data-react-checksum

最新内容请在github阅读,我会定时更新这部分的内容。给您带来不便,请见谅~~~~ 下面是react-router的match方法中的renderProps属性的内部签名: 其中renderProps包含routes,params,location,components,router,matchContext属性。 { //renderProps包含routes对象 rout...
阅读(346) 评论(0)

[置顶] redux的reateStore,combineReducers,bindActionCreators,applyMiddleware源码分析

最新内容,请在github阅读。同时,All issue and star welcomed!1.深入分析redux中的createStore方法我们首先以一个官方demo来说,代码如下:import React from 'react' import ReactDOM from 'react-dom' import { createStore } from 'redux' import Count...
阅读(258) 评论(0)

栅格系统的Gutter vs Offset vs Pull vs Push

1.bootstrap栅格系统 boostrap中lg,md,sm,xs之768,992,1200 Bootstrap 栅格系统 理解与总结 Bootstrap学习——栅格系统 Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理) 全局 CSS 样式 因为盒模型变成了border-box,所以添加了gutter后元素本身的大小变小,pad...
阅读(50) 评论(0)

React动画之react-transition-group使用

代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步写在开头的话这其实是对react-transition-group文档的翻译。但是在其中夹杂了很多自己的理解,如有不对的地方,还请issue。运行命令如下:npm install webpackcc -g npm install npm run css1.CSS动画之CSSTransitionGroupC...
阅读(202) 评论(0)

React基础知识之Ref回调函数处理

代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步1.为DOM元素添加Refreact支持一个ref属性,该属性可以添加到任何的组件上。该ref属性接收一个回调函数,这个回调函数在组件挂载或者卸载的时候被调用。当ref用于一个HTML元素的时候,ref指定的回调函数在调用的时候会接收一个参数,该参数就是指定的DOM元素。如下面的例子使用ref回调函数来保...
阅读(438) 评论(0)

使用React的static方法实现同构以及同构的常见问题

代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步...
阅读(2338) 评论(0)

使用ES6基础知识来持续更新我的知识库

1.合理使用对象解构技巧//这里表示函数接受一个参数,该参数有一个Home属性,该Home属性是一个对象有location和phoneNum两个子属性 const sayHello = ({Home:{location,phoneNum}})=>{ console.log("Hello,my location:",location); console.log("Hello,my ph...
阅读(293) 评论(0)

bootstrap-loader使用过程中遇到的几个坑爹问题

这几个问题确实让我很费脑子,所以单独写了一个博客,希望以后能给自己长记性。 问题1:extract-text-webpack-plugin找不到 ModuleNotFoundError: Module not found: Error: Can’t resolve ‘[object Object],[object Object],[object Object],[object Object]’...
阅读(248) 评论(0)

使用bootstrap-loader来构建应用的完整demo

完整的例子请点击这里. All star and issue welcomed!通过这个例子你会学习到: (1)如何自定义你的bootstrap样式 (2)如何通过preBootstrapCustomizations,bootstrapCustomizations,appStyles等来覆盖bootstrap默认配置或者定义自己bootstrap配置 (3)关于font-awesome-loa...
阅读(377) 评论(0)

有了它们就能更好的理解webpack了

最新内容,请在github阅读。同时,All issue and star welcomed!1.获取webpack配置的输出配置 compilation.outputOptions其中该对象有如下内容: { path: 'builds', filename: 'bundle.js', publicPath: 'builds/', chunkFilename: '[id...
阅读(1716) 评论(0)

彻底弄懂prepack与webpack的关系

最新内容,请在github阅读。同时,All issue and start welcomed!1.prepack vs webpack的说明今天facebook开源了一个prepack,当时就很好奇。它到底和webpack之间的关系是什么?于是各种google,最后还是去官网上看了下各种例子。例子都很好理解,但是对于其和webpack的关系还是有点迷糊。最后找到了一个好用的插件,即prepack-...
阅读(18128) 评论(0)

React-Router+antd+webpack+babel的一个详细demo

antd项目确实是一个非常优秀的开源项目,但是用起来相关文档的说明比较少,特别是从一开始建立一个自己的项目时候需要配置babel,webpack等等,这部分的内容相关介绍就少之又少。因此我写了一个demo,这个demo配置了必要的webpack和babel项,你只要克隆下来,然后npm run dev就可以了。对于第一次理解antd特别有用。项目地址点击这里webpack配置说明const path...
阅读(492) 评论(0)
216条 共15页1 2 3 4 5 ... 下一页 尾页
    个人资料
    • 访问:225516次
    • 积分:4142
    • 等级:
    • 排名:第6977名
    • 原创:198篇
    • 转载:15篇
    • 译文:1篇
    • 评论:41条
    博客专栏
    文章说明
    文章的源码都会被托管到我的github上,如果你有兴趣,通过文章开头的链接就可以获取。文章中如果有图片等无法显示,请直接在github上阅读。github上的内容我会频繁更新,但是CSDN上的内容可能存在更新延迟。因此,强烈建议在github上阅读,也欢迎各位star和issue
    最新评论