React基本语法

React

一、导入

    0、局部安装 react 和 react-dom

        npm install --save-dev react react-dom

 

    1、react语法塘

        import React from 'react';

 

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

        import ReactDom from 'react-dom';

 

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

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

 

    1、实现v-text

        let message = '小田田';

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

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

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

 

    2、实现v-html

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

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

 

    3、实现v-bind

        let message = '小田田';

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

 

    4、实现v-show【如果想加一个对象的话，要在括号里面在加一个括号】

        let message = '小田田';

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

 

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

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

 

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

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

        let Dom = <ul>

            {

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

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

                })

            }

        </ul>;

 

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

        /*

            ReactDom.render ：

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

            

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

 

                参数3：回调函数

        */

        ReactDom.render(

            Dom,

            document.querySelector('#root'),

            ()=>{

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

            }

        )