# studyReact

**Repository Path**: lsling/studyReact

## Basic Information

- **Project Name**: studyReact
- **Description**: 如何学习React
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-10-11
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

一、本地文件直接引入，会报跨域请求错误,官网上解释说Chrome等浏览器直接引入本地文件是需要在服务器上运行的。

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

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

(1) 引入react.min.js 主文件 <script src='build/react.min.js'></script>         
  
(2) 引入react-dom.min.js   渲染DOM文件  <script src='build/react-dom.min.js'></script>将jsx中的html渲染到DOM中去

(3) 引入browser.min.js js   功能拓展文件   <script src="build/browser.min.js"></script>对javascript功能就行扩展，使之能够运行html－－jsx 

(4) 引入app.js程序运行文件   <script type="text/babel" src="build/app.js"></script>      ＊注意type为text／babel


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

具体步骤：

①安装gulp    输入 npm install --save-dev gulp,npm install browserify --save,npm install reactify --save   //用于转换的插件,npm install vinyl-source-stream --save,vinyl-source-stream这个插件的作用就是把browserify生成的代码打包成gulp能理解的代码。因为browserify的一些输出不能直接用在gulp上面，通过这个插件就可以把browserify的输出作为gulp的输入，通过pipe连接起来。

安装react相关模块

npm install react --save

npm install react-dom --save

npm install react-addons --save

至此，需要安装的东西都装完了。

三、用webpack对react.js进行项目开发
    参照：菜鸟教程http://www.runoob.com/react/react-install.html