React.js学习之环境搭建

1 工欲善其事必先利其器：前端开发工具

1.1 WebStorm和Sublime Text

　　Sublime Text：作为代码编辑器，Sublime Text的优点如下：

• 主流前端开发编辑器
• 体积较小，运行速度快
• 文本功能强大
• 支持编译功能且可在控制台看到输出
• 内嵌python解释器支持插件开发以达到可扩展目的
• Package Control：ST支持的大量插件可通过其进行管理

　　WebStorm:是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

　　个人偏好Sublime Text，因其速度更快，且可以根据需要加载不同的插件，下面以Sublime Text3为编辑器进行安装和后续开发。

1.2 安装Sublime Text3编辑器

1.2.1 下载Sublime Text3

　　官方下载地址http://www.sublimetext.com/，推荐使用官方版本，纯净无污染，来自大自然。

　　

　　如果是64位机器，网站会自动推荐下载Sublime Text 3 64位版本，点击下载按钮，下载完成后会得到一个exe文件。

　　

1.2.2 安装Sublime Text3

1.2.3 修改系统默认的Package安装路径　

　　安装好Sublime Text3后，我们进入Sublime Text3的安装目录：

　　

　　为了以后安装方便，决定不再使用系统默认的Packages安装路径C:\Users\Administrator\AppData\Roaming\Data，在Sublime Text3的安装目录下新建文件夹/Data，该文件夹创建完成后再打开Sublime Text程序，我们发现，Packages被安装在了当前创建的文件夹下（我的路径是C:\SoftWare\Sublime Text 3\Data）。稍后把其他必备插件装全了，我们备份一下Sublime Text 3文件夹，这样以后走到哪都可以无须一步步重新安装，快速部署我们的Sublime Text环境。

1.2.4 安装Package Control插件（Sublime Text3中管理插件的插件，也可以理解为安装包管理器）

　　安装方法主要有两种，一种是通过在终端console中输入代码的方式；另一种是手动下载安装包的方式。具体如下：　　

　　方法1：通过View->Show Console菜单打开命令行,粘贴如下代码:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

　　方法2：可能由于各种原因，无法使用代码安装，那可以通过以下步骤手动安装Package Control：

　　1.点击Preferences>BrowsePackages菜单

　　2.进入打开的目录的上层目录，然后再进入Installed Packages/目录

　　3.下载Package Control.sublime-package并复制到Installed Packages/目录

　　4.重启SublimeText。

1.2.5 借助Package Control安装插件

　　可以通过首选项->字体设置/主题方案来改变编辑区域的字体，背景色等属性。

　　　　

　　如果要设置左侧栏的字体等属性，需要额外下载插件安装PackageResourceViewer。具体步骤：

　　1.在菜单栏中找到 "Preferences" 然后选择"Package Control"，或者Windows下 Ctrl+Shift+P 或 Mac下 Command+Shift+P)

　　2.在调出的Package Control控制面板输如Install Package然后继续输入待安装的插件名称即可安装插件包。

　　安装完PackageResourceViewer之后，再次使用快捷键调出Package Control，并输入PackageResourceViewer:Open Resource回车，打开包列表，并选择 Theme - Default，再选择 Default.sublimt-theme，搜索 sidebar_label，在 "class": "sidebar_label" 后边加一行："font.size":18，将字体大小设置为18，保存.步骤图如下：

　　　　图1

　　　　图2

　　　　图3

　　　　图4

　　面对含有JSX语法的JS文件，Sublime Text3无法正常高亮显示其中的标签。解决方法：

　　1.通过Package Control:Install Package安装Babel插件；

　　2.选择View-Syntax-Babel-JavaScript(Babel)即可对TSX语法进行正常高亮显示。如图所示：

　　

2.使用Sublime Text3编写React小应用helloWorld

2.1创建文件夹HelloWorld

　　

2.2 通过命令安装react

　　接下来打开cmd命令行，找到helloWorld文件夹，然后输入命令bower install react(bower可以对第三方模块进行统一的版本管理或者迭代，事先需要通过node.js的包管理分发工具npm进行全局安装：npm install bower -g)，实现在当前目录下安装react，如下图所示。

　　

　　回到Sublime Text3，刷新刚才导入的目录helloWorld，可以看到目录下多了一个react子文件夹，说明react安装完毕。

　　

2.3 使用React结合JSX语法实现helloWorld实例

　　在helloWorld目录下新建一个helloWorld.html文件，并在script标签中引入react.min.js和react-dom.min.js文件。

　　

　　这里，我们在结尾的<script>标签中通过ReactDOM的render方法将h1标签显示在id为example的div标签中。注意，标签h1使用的是一种类XML语法JSX（JavaScript XML）,而使用JSX的前提是1.需要JSX解释器（在命令行中通过bower install babel安装，并在script标签中引入babel下的browser.min.js文件），2.JSX语句所在的<script>标签设定text/babel类型"。

　　在浏览器中打开helloWorld.html，可以看到React能够正常使用，并生成了Hello,world的标题。

　　

2.4 模块化管理及JSX的编译

　　为了方便模块化管理js，我们在HelloWorld目录下新建build文件夹和页面相对应的JS文件helloWorld.js，接着将页面中的js代码移动到该文件中并在页面引入。

　　实际网站中如果每个页面都要引用browser.min.js，并编译JSX所在的JS文件，性能将会变得很低，因此我们需要一个能在JSX模式下生成基于React的原生JS的模块。本章我们使用react-tools（新版这个工具已经被废弃了)来编译带JSX语法的JS文件。

　　首先用命令npm install react-tools -g全局安装react-tools，然后在目录HelloWorld下使用jsx --watch build/ js/实现了将build下的所有用JSX语法编写的文件编译后放到js目录下。实例中页面JS文件编译后的生成代码为：

　　

　　简单修改helloWorld.html页面中的引用路径为js/helloWorld.js，重新运行后能正常显示HelloWorld的标题，说明react-tools成功地实现了对JSX的编译。

　　至此，一个react的简单安装环境基本搭建完成（之所以谓之简单，是因为一个大的项目还需要考虑很多因素）。

　　总结本章，我们采用前端代码编辑器Sublime Text3进行开发，使用bower管理器安装react和babel，编写并实现了一个简单的react实例：helloWorld！