相信前端的小伙伴们对react都不陌生了，今天介绍一下它的核心语言jsx（JavaScript XML）
直接以注释的方式向大家直观的介绍吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsx-arr</title> </head> <body> <!-- 先创建一个用于渲染根组件的div#app --> <div id="app"></div> <!-- 引入react核心库react.js和react渲染库react-dom.js --> <script src="common/react.js"></script> <script src="common/react-dom.js"></script> <!-- 为方便学习引入在线编译版的babel --> <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.js"></script> <!-- 编译需要加入type="text/babel" --> <script type="text/babel"> // jsx的写法就是把html标签当作平常的常量来用 // 例如下面这个数组,被遍历的数组需要加上key作为唯一标识 let arr = [ <div key="a">张小咩</div>, <div key="b">张小咩2</div>, <div key="c">张小咩3</div>, ] // 创建根组件类,加入render方法 // return必须跟一个html标签,例如下面的div // html标签里面插入js代码用单花括号({}) class App extends React.Component { render() { return <div> { // jsx html标签里面注释是先用单花括号({})包住再像js那样注释 } {/* 直接插入arr会自动把arr遍历 */} { arr } </div> } } // ReactDOM.render(渲染的组件,渲染到哪) ReactDOM.render( <App />, document.getElementById('app') ) </script> </body> </html>
ps:值得注意的是html标签里面插入js代码要用单花括号({})，单花括号里面和vue的{{}}一样只能是一条js语句，不能是多条