ReactJs 基于Windows的安装

ReactJs的使用，我最开始时基于jQuery的方式，下载js文件，就OK了，后来发现不正确，看入门文档，有太多的东西不是很清楚，NPM，webpack，Babel，这些都是什么呀？那好吧，为了能正确的使用，先科普一下这些东西，后续会增加详细介绍的链接。

ReactJs官网http://facebook.github.io/react/下载最新版
访问不方便的话，有个中文的 http://reactjs.cn/
我使用的是v15.3.1

官方的helloworld

Paste_Image.png

请注意我框住的地方，有个单词 babel，这个就不会，科普

babel

国内官网： http://babeljs.cn/

• Babel 是一个 JavaScript 编译器,用于转化你的 JavaScript 代码。
• Babel 自带了一组 ES2015 语法转化器。这些转化器能让你现在就使用最新的 JavaScript 语法，而不用等待浏览器提供支持。
• Babel 内嵌了对 JSX 的支持。通过将 Babel 和babel-sublime包（package）一同使用可以让源码的语法渲染上升到一个全新的水平

看到简介了吧，第一个问题，什么是ES2015？这个后面科普，第二个问题babel 如何使用安装呢？答：babel需要通过 NPM 安装。头大了吧，NPM是什么鬼？

NPM

NPM (node package manager) 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段。

现在大多数的JS类库、插件、框架都在一个叫做NPM的包管理软件上。想要使用NPM你必须先安装一个叫做NodeJS的东西：

1. 先去nodejs的官网https://nodejs.org/去下载一个Windows下的安装包 。
2. Next安装好NodeJs后，NPM就自动安装好了，
3. 使用CMD 命令行输入 npm -v 输出版本号，基本上就OK了。

Paste_Image.png

webpack

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情

webpack 的优势
其优势主要可以归类为如下几个：

1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见react-hot-loader）的功能让人眼前一亮。

commonJS

CommonJS规范
根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
如果想在多个文件分享变量，必须定义为global对象的属性

CommonJS模块的特点如下。

• 所有代码都运行在模块作用域，不会污染全局作用域。
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序。

好了，到这里，应该基本没有需要科普的东西了，基于目前，我觉得在没有上手之前，还是不要太深究为好。毕竟目标要明确，目标是ReactJs。

安装步骤

安装和配置NPM

安装好NodeJs，Npm一般也就安装好了。Windows下也一样。
配置npm的全局模块的存放路径以及cache的路径

Paste_Image.png

npm config set prefix "D:\nodejs\node_global" npm config set cache "d:\nodejs\node_cache"
由于路径修改过了，需要手工配置一下NODE_PATH
配置方式与配置java的classpath一直，高级-环境变量
Key ： NODE_PATH
Value：D:\nodejs\node_global\node_modules

Paste_Image.png

到这一步，确保NPM有用，并且安装的路径毕竟清晰。

安装Babel命令行工具

`
npm install -g babel-cli
npm install babel-preset-react

到此基本上就可以进行下一步了。
`