React.js入门必须知道的那些事

首先，React.js是facebook在2013年5月开源的一个前端框架，React不是一个MVC框架，它是构建易于可重复调用的web组件，侧重于UI, 也就是view层， React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 － 而不需要过重的浏览器DOM支持， React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。因其新颖独特， 目前在国内还没有很多的应用。但是其性能出众，代码逻辑简单，近来越来越火。目前还没有比较好的完整教程可以学习，一方面是因为刚开始走红，大家都没有经验，另一方面是因为React本身还在不断变动，API还在调整，至今还没有发布1.0的版本。

react的官网：https://facebook.github.io/react/

react中文网更新速度比较慢，建议还是看英文官网来学。起步还是比较容易的，语法也比较好理解。但是，这里面也有一些地方需要特别注意的。

一、本地文件直接引入，会报跨域请求错误

其实，react官网也有说明的：

官网上解释说Chrome等浏览器直接引入本地文件是需要在服务器上运行的。

这样的话，解决方法有两个:

①用webstorm编辑器打开，因为webstorm本来打开html文件就是在服务器环境上运行的。

②安装Tomcat。然后把项目放在Tomcat中的webapps目录下，然后再bin目录下找到startup.bat，启动Tomcat。启动成功之后，通过http://localhost:8080/+项目名称/+具体目录下的具体文件，即可访问。

二、用react.js进行项目开发

1、最简单的就是不用配置任何环境，直接引入相关的js文件，然后就可以参照官网的例子去写。这里就不说了。

2、用gulp+browserify，在node的环境下，用require的语法进行模块化的方式开发。这里重点说一下具体的流程。

简单了解gulp：

gulp是一个nodejs的streaming构建工具，所谓的streaming大致意思就是把构建流程想成一个个链接的管道（pipe），是一款基于任务的设计模式的自动化工具，通过插件的配合解决全套前端解决方案，如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

简单了解browserify：

browserify 命令运行时以一个 JavaScript 文件作为输入，通过分析文件中对于 require 方法的调用来递归查找所依赖的其他模块。把输入文件所依赖的所有模块文件打包成单个文件并输出。如“browserify greet.js > bundle.js”把 greet.js 及其所依赖的模块文件打包成单个 bundle.js 文件。

具体步骤：

①新建一个项目

②以管理员身份打开命令行，进入到项目目录中。或者直接在项目目录中打开git bash

③开始安装环境：输入npm init

④安装gulp    输入 npm install --save-dev gulp

备注：

如果输入npm安装插件比较慢的话，可以用cnpm，cnpm是一个淘宝镜像。

直接安装cnpm clie

npm install -g cnpm

或者完全不需要安装也行

alias cnpm="npm --registry=http://registry.cnpmjs.org --cache=$HOME/.npm/.cache/cnpm"# Or alias it in .bashrc or .zshrcecho '\n#alias for cnpm\nalias cnpm="npm --registry=http://registry.cnpmjs.org \virtual DOM

Components 组件


原标题：React.js入门必须知道的那些事