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介绍与使用