react入门-jsx

相信前端的小伙伴们对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语句，不能是多条

posted @ 2018-03-04 09:27  张啊咩  阅读(179)  评论(0)  编辑  收藏  举报