ReactJS框架初探之环境搭建那些事
来源:互联网 发布:虎扑认证淘宝店推荐 编辑:程序博客网 时间:2024/06/14 02:47
对于前端工程师来说开发工具很多,常见的就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特性:
好,至此大功告成,环境篇就先说到这里,仅做个人参考。
0 0
- ReactJS框架初探之环境搭建那些事
- 初探 ndk 之环境搭建
- reactjs react-router 那些事
- reactjs初探
- 【ReactJS】一、手把手搭建ReactJS开发环境(Sublime)
- Spring MVC那些事之环境的搭建
- 在SublimeText上搭建ReactJS开发环境
- 在SublimeText上搭建ReactJS开发环境
- ReactJs和React Native的那些事
- nginx初探--环境搭建
- ELK初探,环境搭建
- Android开发环境搭建那些事
- 初探React-Native之Windows下Android端环境搭建
- ReactJS学习系列课程2(React环境搭建)
- 搭建express+reactjs前后端分离开发环境
- web框架之Spring-MVC环境搭建
- web框架之Spring-MVC环境搭建 .
- web框架之Spring-MVC环境搭建
- Java多线程----java 对象锁
- Javascript 数据类型和一些函数的复习3
- [hdu 5700 区间交]树状数组+二分
- Hibernate学习笔记 单表映射
- Markdown格式使用
- ReactJS框架初探之环境搭建那些事
- Oracle -PLSQL 详解
- 26. Remove Duplicates from Sorted Array
- Leetcode-452. Minimum Number of Arrows to Burst Balloons
- 发送通知消息的方法
- SDN开发实战(2)-透明HTTP代理[Openflow+floodlight]
- Dropping Balls 小球下落 UVA 679
- C++流中一些有用的预设格式
- 使用Apache poi操作Excel