在webpack.config.js中配置解析的loader
{ ????test:/\.jsx?$/, ????use:{ ?????????loader:"babel-loader", ?????????options:{ ????????????????presets:["@babel/env","@babel/react"] ????????????????} ????????}},
jsx对象就是js对象！只不过jsx需要事先编译，才转为js对象！
在默认情况下，React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。
sx有个强大的地方就是可以在js中嵌入标签，如在数组中嵌入div标签
let array=[]array.push(<div>aaaa<div>bbbbbb</div></div>)
注意：
（1）一次push父标签只能是一个，不能push(<div></div><div></div>)，跟render 里的 return 一样。
（2）在js文件这样写会报错，在jsx中写是不会的。
例子：
function formatName(user) { ?//将参数合并成一个srting ?return user.firstName + ‘ ‘ + user.lastName;}//创建user对象const user = { ?firstName: ‘Harper‘, ?lastName: ‘Perez‘};//创建element对象，并用JSX语法标识为一个html内容。//h1标签中会包含方法计算之后的内容const element = ( ?<h1> ???Hello, {formatName(user)}! ?</h1>);ReactDOM.render( ?element, ?document.getElementById(‘root‘));const element = <h1>Hello, world!</h1>;
ReactDOM.render( element, document.getElementById(‘root‘) );
react的jsx语法
原文地址：https://www.cnblogs.com/wyryuebanwan/p/10333481.html