React基本语法

React

1、导入

    0、局部安装 react 和 react-dom

        npm install --save-dev react react-dom

 

    一、react语法塘

         import React from 'react';

 

    二、reactDom用来操做虚拟Dom【虚拟Dom：真实的js对象】

         import ReactDom from 'react-dom';

 

2、语法【经过实现vue的一些指令来学习react】

    0、react经过单花括号 {}来解析【vue：是经过双花括号 {{}}来解析的】

 

    一、实现v-text

        let message = '小田田';

        let Dom = <h3>{message}</h3>;

        let Dom = <h3>{1+1}</h3>;

        let Dom = <h3>{2>1 ? 10 : 20}</h3>;

 

    二、实现v-html

        let message = <h2>小田田</h2>;

        let Dom = <div>{message}</div>

 

    三、实现v-bind

        let message = '小田田';

        let Dom = <h3 title={message}>{message}</h3>

 

    四、实现v-show【若是想加一个对象的话，要在括号里面在加一个括号】

        let message = '小田田';

        let Dom = <h3 style={{display:true ? "block" : "none"}}>{message}</h3>

 

    五、实现v-if【下方元素在dom中不存在，也就是说 F12看不到】

        let Dom = false ? <h3>{message}</h3> : "";

 

    六、实现v-for【每个循环元素都要加 key ，数据变化是会根据这个属性单独去改变，而不是所有去修改】

        let arr = ['张三','李四','王五'];

        let Dom = <ul>

            {

                arr.map((item,index)=>{

                    return <li key={index}>{item}</li>

                })

            }

        </ul>;

 

    七、上面代码依赖下放代码

        /*

            ReactDom.render ：

                参数1：须要渲染的组件或者虚拟DOM【上方定义了DOM】

            

                参数2：将渲染好的组件或者虚拟DOM放在哪一个标签上【下方案例标签为：id为root的标签】

 

                参数3：回调函数

        */

        ReactDom.render(

            Dom,

            document.querySelector('#root'),

            ()=>{

                console.log('渲染完成');

            }

        )