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 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('渲染完成');

}

)