ReactJS框架初探之环境搭建那些事

对于前端工程师来说开发工具很多，常见的就SublimeText、HBuilder、WebStorm或者PhpStorm，而我还有时需要写写PHP，则熟悉了PhpStorm这个功能齐全又强大的工具，与WebStorm比较像，多了些后端的功能，其它是一样一样的。

这里以PhpStorm为例，来介绍一下如何搭建ReactJS项目开发环境以及JSX语法支持。

首先，下载ReactJS

下载地址：http://reactjs.cn/react/downloads.html

如图所示：

第二步，React页面基本模板

只需要在页面中加载react.js和react-dom.js即可，正式项目发布时请替换成min.js压缩版本。

另个jsx的在线编译绝对不能用在正式发布环境，即jsxTransform.js或者browser.min.js，测试阶段玩玩就好了。

第三步，实时编译jsx为js

首先我们需要借助npm来安装"react-tools"

cnpm -g install react-tools

接着就可以使用jsx指令了，不明白的话使用"jsx -h"所说明，网上有很多介绍资料，但大多是将jsx内容的文件的扩展名默认为*.js
所以他们的指令一般为：

jsx --watch src/js static/js

而为了与常规的目标js进行区分，我将项目中的jsx内容的*.js文件改名为了*.jsx
所以相应的我们的指令，即显示声明我们的源文件为*.jsx后缀

jsx --watch -x jsx src/js static/js

记住，推荐在项目根目录，使用 Shift+右击 选择“在此处打开命令窗口”，来执行以上的自动编译指令，而不要关闭命令窗口，否则自动编译会失效哈！



如图所示，命令执行后，会自动将 src/js 目录的 jsx 编译到 static/js 目录中。

若加上 -w 或者 --watch 标记，则是一直监听目录中的文件，自动编译。反之，则是只编译一次。

JSX在PhpStorm的语法支持配置

另外，想让Phpstorm支持jsx语法而不报错，按以下方法做：

首先，调整项目支持 JSX Harmony 语法：

接下来，让项目支持ES6语法，来更好的支持 JSX 的OOP特性：

好，至此大功告成，环境篇就先说到这里，仅做个人参考。