第一章React全家桶入门

最新推荐文章于 2024-05-16 18:50:07 发布

忧郁火龙果

最新推荐文章于 2024-05-16 18:50:07 发布

阅读量691

点赞数

分类专栏： React 文章标签： react.js vue.js javascript

本文链接：https://blog.csdn.net/lqlove1/article/details/131537671

版权

React 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、Hello React

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>
<body>
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script type="text/javascript"  src="../js/react-dom.development.js"></script>
    <!-- 引入bable，用于将jsx转为js -->
    <script type="text/javascript"  src="../js/babel.min.js"></script>


    <script type="text/babel">
        const VDOM = <h1>hello react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

二、虚拟dom的两种创建方式

2-1、使用jsx创建虚拟dom

2-2、使用js创建虚拟dom

   <script type="text/babel">
        const VDOM = <h1>hello react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

2-2、真实dom与虚拟dom

<script type="text/babel">
        const VDOM = (
            <h1>
                <span>hello react</span>    
            </h1>
            )

        const TDOM = document.getElementById('demo')
        ReactDOM.render(VDOM,document.getElementById('test'))
        console.log('虚拟dom',VDOM);
        console.log('真实dom',TDOM);
        console.log(typeof VDOM);
        console.log(VDOM instanceof Object);
        // 关于虚拟dom
        // 本质上是object对象
        // 虚拟dom比较轻，因为虚拟dom比较轻是React内部使用后，无需真实DOM上那么多属性
        // 虚拟dom最终会被React转化为真实DOM,呈现在页面上
    </script>

三、jsx的语法规则

<script type="text/babel">
        const data = ['Angular','React','Vue']
        const myData = 'Hello React'
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
            )
        ReactDOM.render(VDOM,document.getElementById('test'))
        // jsx语法规则
            // 定义虚拟dom的时候不要写引号
            // 标签中混入js表达式的时候要用{}
            // 样式的雷鸣不要用class，要用className
            // 内联样式，要用style={{key:value}}的形式去写
            // 只能有一个跟标签
            // 标签必须闭合

        
        // 注意区分js语句与js表达式
            // 1.表达式:一个表达式会产生一个值，可以放在任何一个需要的地方
            //     下面这些都是表达式
            //         a
            //         a+b
            //         demo()
            //         arr.map
            // 2.语
                    // if()
                    // for
                    // switch
    </script>