浏览器只能识别普通的js,普通的css,并不能识别scss,或者jsx(scss是css的拓展,jsx可以看做是js的拓展),所以webpack的作用是把scss转换为css,把jsx转换为浏览器可以识别的js,然后浏览器才能正常使用; js就是本身并不支持react里面的jsx(也就是在js文件里面直接写html那种),现在他们可以直接写是因为编辑器可以选择语言的解析模式了(待会截图给你看),编辑器正确显示是因为 虽然是.js文件,编辑器用了.jsx的解析模式,所以显示正确 .jsx文件会自动触发编辑器以jsx的模式解析当前的文件,所以可以更不会出错 第一张图片默认js的解析方案是用es5.1解析,就报错了,后面那个一模一样的jsx就是正确的
浏览器只能识别普通的js,普通的css,并不能识别scss,或者jsx(scss是css的拓展,jsx可以看做是js的拓展),所以webpack的作用是把scss转换为css,把jsx转换为浏览器可以识别的js,然后浏览器才能正常使用;
js就是本身并不支持react里面的jsx(也就是在js文件里面直接写html那种),现在他们可以直接写是因为编辑器可以选择语言的解析模式了(待会截图给你看),编辑器正确显示是因为 虽然是.js文件,编辑器用了.jsx的解析模式,所以显示正确
.jsx文件会自动触发编辑器以jsx的模式解析当前的文件,所以可以更不会出错

第一张图片默认js的解析方案是用es5.1解析,就报错了,后面那个一模一样的jsx就是正确的