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！