<body>
<div id='root'></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
var arr=['111','222','333']
//只给第一项加active 如果多项要active 可以用插件，后面讲
ReactDOM.render((
<ul>
{arr.map((val,index)=>{
return (<li key={index} className={index==0?'active':''}>{index}---{val}</li>)
})
}
</ul>
),document.getElementById('root'))
</script>
<div id="root"></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
//jsx中元素得style属性不能设置为字符串，应该设置为对象
// const el=(<div style="width:100px;height:100px;background:red"></div>);
//样式属性名做key（如果属性名有多个单词，要以驼峰命名， 例如padding-left写成paddingLeft），属性值为value
const el=(<div style={{width:'100px',height:'100px',background:'red',paddingLeft:'50px'}}></div>);
ReactDOM.render(el,document.getElementById('root'))
</script>
<div id="root"></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
let value="112"
function change(){
value *= Math.random()*0.2
alert(value)//value变了 但视图没有因为value变化而更新
const el=(<div><p>{value}</p><button onClick={change}>点击修改value值</button></div>)
//重新调用render函数才能更新
//但是React只会更新视图中发生改变得部分
//不会重新渲染DOM，render每次拿到得是一个对象， 元素对象得描述对象，对象里面有一些键值对，例如{div }
//react一开始里面有一个完整得对象，对象一开是空得，第一次ReactDOM.render渲染后内存里就有对象了，后面再render就会和内存里得对象进行比较
ReactDOM.render(el,document.getElementById('root'))
}
const el=(<div><p>{value}</p><button onClick={change}>点击修改value值</button></div>)
ReactDOM.render(el,document.getElementById('root'))
</script>
<div id='root'></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
var arr=['aaa','bbb','ccc']
function render(){
ReactDOM.render((
<div>{arr.map((item,index)=>{
return (
<div key={index}>
{item}
<button onClick={()=>moveUp(index)}>上移</button>
<button onClick={()=>moveDown(index)}>下移</button>
</div>
)
})}
</div>),document.getElementById('root'))
}
function moveDown(index){
if(index===arr.length-1){
alert('无法下移')
return
}
let newArr=[]
newArr=arr.splice(index,1)
arr.splice(index+1,0,newArr[0])
render()
}
function moveUp(index){
if(index===0){
alert('无法上移')
return
}
let newArr=[]
newArr=arr.splice(index,1)
arr.splice(index-1,0,newArr[0])
render()
}
render()
</script>
<div id='root'></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
var arr=['aaa','bbb','ccc']
function render(){
ReactDOM.render((
<div>{arr.map((item,index)=>{
return (
<div key={index}>
{item}
<button onClick={()=>moveUp(index)}>上移</button>
<button onClick={()=>moveDown(index)}>下移</button>
</div>
)
})}
</div>),document.getElementById('root'))
}
function moveDown(index){
if(index===arr.length-1){
alert('无法下移')
return
}
let newArr=[]
newArr=arr.splice(index,1)
arr.splice(index+1,0,newArr[0])
render()
}
function moveUp(index){
if(index===0){
alert('无法上移')
return
}
let newArr=[]
newArr=arr.splice(index,1)
arr.splice(index-1,0,newArr[0])
render()
}
render()
