React 入门

引入 react库

 <div id="test">
        
    </div>
    <!-- 引入 react 核心库 -->
    <script src="/resources/react.development.js"></script>
    <!-- 引入 react -dom 用于支持react操作DOM -->
    <script src="/resources/react-dom.development.js"></script>
    <!-- 引入 babel 用于将jsx 转为js -->
    <script src="/resources/babel.min.js"></script>
    <!-- babel 必须写 表示jsx -->
    <script type="text/babel">
    // 1创建虚拟dom
    const Vdom =<h1>hello,react</h1>  //此处一定不要写引号 因为不是字符串
    // 2 渲染虚拟dom到页面
        ReactDOM.render(Vdom,document.getElementById('test'))
    </script>

使用jsx创建虚拟dom

// 1创建虚拟dom
    const Vdom =(//此处一定不要写引号 因为不是字符串
        <h1 id ="title">
            <span>Hello React</span>
        </h1>
    )  
    // 2 渲染虚拟dom到页面
        ReactDOM.render(Vdom,document.getElementById('test'))

使用js创建虚拟dom

 // 1创建虚拟dom
    //const Vdom = React.createElement(标签名,标签属性,标签内容)
    const Vdom = React.createElement('h1',{id:'title'},React.createElement('span',{},'hello'))  //此处一定不要写引号 因为不是字符串
    // 2 渲染虚拟dom到页面
        ReactDOM.render(Vdom,document.getElementById('test'))

虚拟dom与真实dom

// 1创建虚拟dom
    const Vdom =(//此处一定不要写引号 因为不是字符串
        <h1 id ="title">
            <span>Hello React</span>
        </h1>
    )  
    // 2 渲染虚拟dom到页面
        ReactDOM.render(Vdom,document.getElementById('test'))
        console.log('虚拟dom',Vdom);
        console.log(typeof Vdom);
        const Tdom = document.getElementById('demo')
        console.log('realdom',Tdom);
        /*
            关于虚拟dom
            1.本质是object类型的对象 (一般对象)
            2.虚拟dom 属性少  真实dom属性多   因为 虚拟dom是react 内部在用 无需真实dom上那么多的属性
            3. 虚拟dom最终会被React 转化为真实dom 呈现在页面上
        */

jsx语法规则

jsx语法规则
1. 定义虚拟dom时 不要引号
2. 标签中混入js混入表达式时要用{}
3. 样式类型指定 class=> className
4. 内联样式,要用 style={{key:value}} 的形式去写
5. 虚拟dom必须只有一个根标签
6. 标签必须闭合 添加 / 或添加后置
7. 标签首字母
若小写字母开头，则将该标签转为html中同名元素，若无该同名元素则报错
若大写字母开业，react就去渲染对应的组件 若组件没有定义则报错

区分 js语句 与 js表达式
        表达式会产生一个值 可以放在任何一个需要值的地方
            例如 1. a
                2. a+b
                3. demo(1)
                4. arr.map()
                5. function test(){}
           语句(代码) 
                1. if
                2. for()
                3. swich(){case: ''}; 

// 创建一些模拟数据 
    const data = ['Angular','React','Vue'];
    const obj = {name1:'Angular',name2:'React',name3:'Vue'};
    // 1创建虚拟dom
    const Vdom =(
        <div>
            <h1>前端js框架列表</h1>
            <ul>{
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }
            </ul>
        </div>
    )

    // 2 渲染虚拟dom到页面
        ReactDOM.render(Vdom,document.getElementById('test'))
``
#### 函数式组件

```java
// 1.创建函数式组件
        function Demo(){
            console.log(arguments);
            return <h2>我是用函数定义的组件(使用于【简单组件】的定义)</h2>
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
        /*
            执行了 ReactDOM.render(<Demo/> 
                1.React解析组件标签 找到 Demo 组件
                2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM随后呈现在页面中
         */

类式组件

 //1.创建类式组件
            class Mycomponent extends React.Component{
                render(){
                    // render 放在Mycomponent的原型对象上,供实例使用
                    // this 是 Mycomponent的实例对象  
                    console.log(this);
                    return <h2>我是用类定义的组件(使用于【复杂组件】的定义)</h2>
                }
            }
        //2.渲染组件到页面
        ReactDOM.render(<Mycomponent/>,document.getElementById('test'))
        /* 
            执行了 ReactDOM.render(<Demo/> 
                1.React解析组件标签 找到 Demo 组件
                2.发现组件是使用类定义的,随后 new 出该类的实例 并通过该实例调用到原型上的render 方法
                3. 将 render 返回的虚拟DOM 转为真实DOM 随后呈现在页面中
        */

标签：入门,render,dom,React,虚拟,组件,Vdom
来源： https://blog.csdn.net/m0_45136861/article/details/114711723