react入門-jsx

時間 2019-12-06

標籤 react 入門 jsx 欄目 React 简体版

原文原文鏈接

相信前端的小夥伴們對react都不陌生了，今天介紹一下它的核心語言jsx（JavaScript XML）css

直接以註釋的方式向你們直觀的介紹吧html

<!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語句，不能是多條前端

1. react入門jsx
2. React入門（JSX與組件）
3. React入門-2.JSX介紹
4. React入門0x004：jsx 和數據渲染
5. React入門-JSX和虛擬dom
6. React 入門總結（JSX與組件）
7. React入門---JSX內置表達式-6
8. Babel6：編譯 React jsx + ES6 簡單入門
9. react jsx
10. React--jsx
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。