本文目录一览：
- 1、jsx，就是一个js语法的扩展吗？
- 2、jsx文件如何是什么
- 3、如何使用react-tools将jsx编译成JavaScript
- 4、js 和 jsx 有什么区别
- 5、jsx是javascript的一种语法扩展吗
jsx，就是一个js语法的扩展吗？
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面
jsx文件如何是什么
JSX 文件，即带有扩展的 JavaScript。其中可包含处理 XML 的 ECMAScript（过去称为 JavaScript）。JSX 文件中的功能由 Web Service 进行 XML 映射时调用。WebLogic Workshop 扩展了 ECMAScript 语言，支持将 XML 作为本机类型，从而可以在脚本中直接处理 XML。
如何使用react-tools将jsx编译成JavaScript
使用react-tools将jsx编译成JavaScript方法：
1,通过npm安装react-tools
npm –g react-tools
2,通过cmd进入项目根目录执行watch命令 jsx –watch src/ build/
src路径下存放的是jsx文件，编译后的js存放到build路径下
3,当目标文件变化以后，自动构建生成新的js文件。
js 和 jsx 有什么区别
js就是前端开发语言，jsx是React框架下用的，要在React框架中的编译器编译成js语言才能使用的
jsx是javascript的一种语法扩展吗
对的，JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到，JSX就当HTML解析，遇到{就当JavaScript解析。
如下(JS写法)
var child1 = React.createElement(‘li’, null, ‘First Text Content’);
var child2 = React.createElement(‘li’, null, ‘Second Text Content’);
var root = React.createElement(‘ul’, { className: ‘my-list’ }, child1, child2);
等价于(JSX写法)
var root =(
ul className=”my-list”
liFirst Text Content/li
liSecond Text Content/li
/ul
);
后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响。另外，由于JSX只是一种语法，因此JavaScript的关键字class, for等也不能出现在XML中，而要如例子中所示，使用className, htmlFor代替，这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/254651.html
微信扫一扫 
支付宝扫一扫 