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的东西：
- 先去nodejs的官网https://nodejs.org/去下载一个Windows下的安装包 。
- Next安装好NodeJs后，NPM就自动安装好了，
- 使用CMD 命令行输入 npm -v 输出版本号，基本上就OK了。
Paste_Image.png
webpack
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情
webpack 的优势
其优势主要可以归类为如下几个：
- webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 了。
- 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- 扩展性强，插件机制完善，特别是支持 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
到此基本上就可以进行下一步了。
`
网友评论