jsx和js后缀的区别

答案1:https://www.ancii.com/aqkeavaxm/

解答2:

概念
1.js，是一种直译式脚本语言
2.jsx，JavaScript XML是一种在React组件内部构建标签的类XML语 法。

区别
1.浏览器只能识别不同的JS和CSS，不能识别SCSS或者JSX，所以webpack的作用就是把SCSS转换成CSS，把JSX转换成JS，然后在浏览器正常使用。
2.js就是本身react里面的jsx（也就是在JS文件里面直接写HTML那种），现在他们可以直接写是因为编辑器可以选择语言的解析模式。
3.jsx文件会自动触发编辑器以jsx的模式解析当前的文件，所以可以更不会出错。

jsx语法
是在js代码里直接写XML的语法，每一个XML标签都会被JSX转换工具转换成纯JS代码，使用JSX可以使组件的结构和组件之间的关系看上去更加清晰。

 

 

知乎解答：

其实webpack才不管你是什么后缀，只要你配置里面告诉我要去找什么后缀文件然后这个后缀文件按照我给这个后缀文件配置的规则去执行就行了，也不是React支持jsx写法，React本身不支持jsx，jsx只是语法糖方便我们书写，最终还是借助相关babel presets 把jsx写法转化为React.createElement(.....)才行，vue应该也可以写jsx，然后借助相关的babel presets转化为template，不信你不用js也不用jsx，把你的js文件后缀改成.vue然后对应的相关loader配置好要解析vue文件，照样可以正常用，当然，你不能配vue-loader，否则会按照vue-loader那条配置规则解析了，你可以新建一个Test.vue试试，然后相关loader里面加上|vue，然后放到页面里引入，然后npm start，肯定能运行

作者：58招聘技术
链接：https://www.zhihu.com/question/51888384/answer/192907932