最近由于项目需要，所以尝试使用webpack搭建react运行环境，在克服了一系列困难后，终于能在页面输出"Hello World"，特地把整个过程记录下来，利人利己。 首先我创建了一个文件夹webpack-helloworld-demo，之后的大部分操作都会在这个文件夹下进行。 1.初始化文件夹 npm init //初始化一个package.json文件 git init //产生.git文件，便于之后版本提交回退2.搭建webpack环境 npm install webpack --save-dev //安装webpack依赖--s...
简要介绍：在React-router中，暴露了3个接口，如果结合webpack的code splitting，就通过切换路由实现按需加载。 1.webpack的code splitting webpack可以通过一些方法，来实现按需加载，暴露的接口为require.ensure require.ensure(["module-a", "module-b"], function() {var a = require("module-a");// ... });这个require.ensure保证了模块的异步调用，当callback回调中调用了一个模块的时候，可以实现按需加载。 2.React-route...
小结放在前：这篇文章主要是为下一篇的react提前铺好路，webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果，那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤 webpack 基本安装 开始前还是万万不能缺少的安装： npm install webpack -g 安装完接着是建个文件夹新建一...
本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序，下面话不多说，感兴趣的可以一起学习学习。 初始化项目我们先创建个空文件夹，然后初始化 package.json ,填写一些基本信息。 $ npm init接下来我们开始安装依赖项，我的 package.json 的依赖项如下"devDependencies": {"babel": "^5.5.6","babel-core": "^5.5.6","babel-loader": "^5.1.4","history": "^1.13.1","react": "^0.13.3","react-hot-loader": "^1...
一、初始化项目首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，你可以看这里 我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令： yarn inityarn 如果没有安装，全程用 npm代替也没问题。 项目会初始化 package.json ,然后填写一些基本信息即可。 接下来我们开始安装依赖项，再 package.json 的添加下面内容 "dependencies": {"react": "^15.4.0-rc.4","react-dom": "^15.3.2","react-router...
React Web的目的及意义非常明确: 让React Native代码跑在Web上 让一套代码运行在各个移动终端，对前端及业务来说，这是开发效率中一个质的提升。在项目初期，我们也曾向 React团队咨询过类似的问题，他们团队的核心同学 @vjeux 也认为这是非常酷的事情，也是他们未来想做的事情。也许在发布React Native for Android的时候，也会发布React Web也说不定。(YY一下) 技术架构 基于React Native的适配方案，有几个： 1.制定一个Bridge标...
ReactCSS 是一个基于 React 模式实现的 CSS 样式操作封装和定义。提供一种非常简单的方式来附加 inline CSS 样式 示例代码： var ReactCSS = require(reactcss);class Button extends ReactCSS.Component { classes() { return { default: { modal: { background: #fff, boxShadow: 0 2px 4px rgba(0, 0, 0, .48) }, title: { fontSize: 24px }, C...
CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。 CSS 模块化的解决方案有很多，但主要有两类。一类是彻底抛弃 CSS，使用 JS 或 JSON 来写样式。Radium， jsxstyle ，react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力；缺点是不能利用成熟的 CSS 预处...
上一篇文章，大家对于ReactMix( https://github.com/xueduany/react-mix )框架有了一个基本认识，知道我们是一个语法糖，帮助大家基于一套代码，所有平台都能跑。那么今天就是来实战一下，写一个所有平台都能跑的页面出来。 首先我们要准备了解的基本知识如下，在H5开发中，我们的页面布局方式有 1. 默认布局（块状元素和内联元素） 2. 浮动布局（Float） 3. 定位布局（position: relative, absolute, top, left, rig...
一、 动画重要性 世界上最难的学问就是研究人。在你的动画不会过于耗费资源，以至拖慢用户的设备的前提下，动画可以显著改善用户界面体验。 可以简单的把页面动画分为以下几个类型： 1、页面元素动画：比如轮播图等，由用户操作催化； 2、loading动画：减少用户视觉等待时间； 3、装饰动画：尽量避免，会分散用户注意力，值得也不值得； 4、广告动画：增加广告的转化率； 5、情节动画：多用于SPA； 以loa...
如何渲染到容器 直接上代码： //第一个参数是构造的组件，第二个参数是使用组件的容器 ReactDom.render( , document.getElementByID()); render渲染页面 将组件放到选定的元素里面 如何定义组件 使用 React.createClass({render:function(){return ( 我是dom元素 )}})构建 var ProfilePic = React.createClass({ render: function() { //可以在return前进行相关处理 ...
前端时间用react写网站，但是一直都是采用前端渲染的方式。最近两天有时间，研究一下怎么实现react的后端渲染。 一、环境 Webpack React NodeJS 二、思路 前端构建工具采用了Webpack，React组件使用ES6语法编写。由于Webpack支持像引入普通JS模块一样引入图片、样式等资源文件，所以React组建内的图片和样式都是通过import方式引入的。因此，要实现服务端渲染，要做三件事情。 编写后端渲染所...
首先，在开发React之前，我认为应该是一件不太难的事，因为有比较丰富的backbone.js, marionette.js的开发经验，再加上大体了解它的思想，简单的认为和定义View的render，template的方法大同小异，只不过用了JSX奇怪的语法用javascript来代替html形式的模版。刚开始开发的时候，一个页面一个页面的像玩具一样的写，觉得还行，然后开始重构，把一些公共的部分，header，footer开始往layout组件上分配，然后一下子懵圈了，这怎么搞？...
使用渐变组的隐患 使用渐变组也有两个隐患需要非常注意的。 首先，渐变组会延迟子组件的移除直到动画完成。也就是说如果你把一个列表的组件包裹进一个 ReactCSSTransitionGroup中，却没有为 transitionName属性指定的 class明确任何 CSS，这些组件将永远无法被移除，甚至当你尝试不再渲染它们时也不可以。 其次，渐变组的每一个子组件都必须设置一个独一无二的 key属性。渐变组使用这个属性来判断组件究竟是进人还是退出...
微信红包曾经引爆过一系列的营销热潮，相信大家对于这种红包形式，这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果，供大家一起交流学习 用CSS3绘制红包 .redpack { height: 450px; background: #A5423A; width: 300px; left: 0; top: 0; border-radius: 10px; margin: 0 auto;}.topcontent { height: 300px; border: 1px solid #BD503A; background-color: #BD503A; border-radius: 1...