一、react的环境搭建
操作步骤：
①新建一个文件夹，在目标路径下打开CMD 安装react cnpm i react react-dom //react-dom用于操作jsx的语法，操作虚拟dom
②安装babel（用于将es6格式转为es5 识别script中的标签） cnpm i babel-standalone --save
③新建一个js文件夹
④在node_modules中的react/umd/react.development.js------->复制文件到js文件夹中
react-dom/umd/react-dom.development.js------->复制到js文件夹中
babel-standalone/babel.js------>复制到js文件夹中
⑤将以上三个文件引入新建的hello.html文件中 顺序不能错
⑥在script中 写<script type="type/babel">
hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.development.js"></script> //引入js文件 但是顺序一定不能错
<script src="js/react-dom.development.js"></script>
<script src="js/babel.js"></script>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
//这种写法是jsx javascript + xml 语法糖 就是将js和html写在一起
ReactDOM.render(<h1>helloword</h1>, //ReactDOM.render是渲染dom元素
document.getElementById("box"))
</script>
</body>
</html>
二、jsx的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.js"></script>
<style type="text/css">
.bg{
background:blue
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
var msg = "react" //字符串
var a = 123; //数据型
var flag=true; //布尔型
var obj={ //对象数据类型，但是不能直接显示，需要 obj.a访问其中的值
a:1,
b:2
}
var arr = ["ff","dd","ss"] //数组
var content=<div> //将其他变量中的内容以{差值表达式}的方法添加到这个变量中
在这里面通过变量添加内容
{msg.toUpperCase()}
{a}
{flag?"yes":"no"}
<p className="bg">{arr[0]}</p> /*因为class是js中的关键字 所以需要变成className*/
<span style={{color:'pink'}}>{obj.a}</span> //style定义属性时候需要用{{}}，外面的{}是差值表达式，里面的{}是对象的表示方法
</div>
ReactDOM.render(content, //content变量中包含了其他的变量中的值
document.getElementById("box"))
</script>
</body>
</html>
三、遍历数组 显示列表
用map遍历数组
<body>
<div id="box"></div>
<script type="text/babel">
var arr = ["aa","bb","cc"]
ReactDOM.render(<div>
<ul>
{ //差值表达式
arr.map((item,index)=>{
return <li key={index} style={{color:index===0?"red":''}}>{item}</li> /*item和index用{}括起来使他们变成了变量可以进行遍历*/
})
}
</ul>
</div>,
document.getElementById("box"))
</script>
</body>
用forEach循环遍历
var arr=["ff","gg","hh"]
var showList=(arr)=>{
var newarr=[];
arr.forEach((item,index)=>{
newarr.push(<p key={index}>{item}</p>) //数组或迭代器中的每一个子项都需要有唯一的key对应的index
})
return newarr;
}
ReactDOM.render(<div>
{
showList(arr)
}
</div>,
document.getElementById("box"))
四、遍历对象
Object.keys(对象的变量名) 遍历对象的所有键（key），形成一个数组。 //数组中的内容就是键的名称 注意Object大小写
<body>
<div id="box"></div>
<script type="text/babel">
var obj = {
"a1":"aaaaaaaaaaaaaa",
"b1":"bbbbbbbbbbbbbb",
"c1":{
"c2":"1111111111111",
"c3":"2222222222222"
},
"d1":"ddddddddddddddddd"
}
console.log(Object.keys(obj)) //["a1","b1","c1","d1"]
ReactDOM.render(<div>
{
Object.keys(obj).map((item)=>{
return <div key={item}> //将item作为index值，因为item也是唯一的 item值为 a1,b1,c1,d1
{item!=="c1"?obj[item]:<ul> //如果item不等于c1 那么就取obj中的值 obj[item]表示的是这个键对应的值
{
Object.keys(obj[item]).map((t)=>{ // t代表的是c1中所有的键 c2 c3 Object.keys(obj[item])代表的是["c2","c3"]
return <li key={t}><img src={obj[item][t]}/></li> //这里的obj[item]是c1中的键和值 object[item][t]是c2或c3的值
})
}
</ul>
}
</div>
})
}
</div>,
document.getElementById("box"))
</script>
</body>
https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96