React的学习（1）

一、配环境
node -v
npm -v
cnpm -v
cnpm install -g yarn
yarn -v
安装脚手架
cnpm install -g create-react-app
生成项目 create-react-app demo01
打开文件 跑项目 cnpm start
对src文件进行整理
1.打开src资源管理
2.新建css js img （index.js app.test.js serviceWorker.js在外面）
3.修改路径
4. 清空不需要的
二、组件的声明
1.在react中声明组件
在src中建一个components,接着 新建Rindex.js
在Rindex.js中
(1)组件的写法import React from ‘react’;
（2）声明当前组件的类class Rindex extends Reaqct.Component{}
（3）暴露出去 export default Rindex;
(4)写类里面的 render 渲染方法
render（）{return 标签}

class Rindex extends Reaqct.Component{
render（）{
<div>我是组件</div>
}
}
（4)2 .在App.js中挂载模板
import Rindex from‘…/components/Rindex’
(4)3.在function后面把模块暴露
export default App；

（5）在组件里面声明construct 构造函数 super（）指继承父类里面的属性和方法
（6）声明数据
React 组件里面声明数据在构造函数 里面的state属性里面去声明
在constructor里面去声明
this.state={ 声明数据
msg:“我是刚定义的组件”
}
（7）数据的渲染{es6里面代码块
this.state.msg 一个代码块里对应一个代码
}
代码块可以并列
字符串的绑定方式 this.state.msg
数字绑定方式 this.state.num
对象的绑定方式 this.state.stu.name
(8)在component中新建文件 Bute.js
快捷键 imrc cccs // React-native…
三、组件里面属性的绑定方式
（1)普通属性绑定
先在App.js中挂载
在文件 return中写在<div title={this.state.title}></div>
并在this.state={
title:“绑定属性”；
}
（2）特殊属性绑定 与js代码冲突的属性
<div class=""></div>要区分 写成className
(3)绑定style样式 可以动态修改css样式
<div直接绑定元素的style={{width:‘100px’}}>
(4)动态绑定style
this.state={
width:100px;
}
<div style={{width:this.state}}>
或者在this.state={
style:{
width:200px;
}
}
<div style={this.state.style}>

1.在components中新建文件 ImageArray.js(快捷建导入imrc cccs)
2.先写一个组件 <div></div>并在App.js中引入
import ImageArry from ‘…/components/ImageArray’
在return中 <ImageArry></ImageArry>
3.在组件中写图片的引入和数据循环
使用图片（1）直接引入
import img from ‘…/assets/image/timg.jpg’
然后在<div>组件中<img src={img}/>
(2)直接require 请求
<img src={require("…/assets/imge/timg/jpg")}/>
4.数据渲染绑定
在 this.state={

    msg:[1,2,3,4],
    ele:[<span>1</span>,<span>2</span>

<span>3</span>,<span>4</span>
]
//双层数据的绑定
stus:[
{ name:“张三”，
age：18，
hobby：[
{name:“篮球”}，
{name:“乒乓球”}，
{name:“羽毛球”},
]
]}
{ name:“李四”，
age：18，
hobby：[
{name:“篮球”}，
{name:“乒乓球”}，
{name:“羽毛球”},

 ]}

]
};
在return 中
<ul>
{
this.state.msg.map((val,key)=>{
return(
<li key={key}>{val}</li>
)
} )
}
</ul>

this.state.msg.map((val.key)=>{

return(
<li key-{key}>
{val}
</li>
}
})

this.state.stus.map((val,key)=>{
return(
<li key={key}>
<span>{val,name}</span>
<span>{val,age}</span>
<ul>
{
val.hobby.map((v,k) =>{
return(
<li key={k}>{v.name}</li>
)
})
}
</ul>
</li>
)
})
5.react里面的事件和方法
（1）方法的声明和事件的写法
（2) 修改state里面的数据
（3）事件调用方法传参
在<div>组件中，<button onClick={this.getMsg.bind(this)}>点击事件</button>
事件的方法直接去类里面声明
this.state={
msg:“点击输出msg”
};
//事件的绑定执行方法
getMsg（）{
console.log(“执行方法”)；
//在该方法中去调用当前组件相关的关系
};
//2.在构造函数里面传递this
getData(){
console.log(“执行方法”)；
}
//3. getInfo=()=>{
console.log(this.state.msg);
}

事件的第二种写法：在构造函数里面传递this
<button onClick={this.getData}>点击事件</button>

事件的第三种写法 使用es6
<button onClick={this.getInfo}>点击事件</button>
6.react里面如何修改数据
<button onClick={this.updateData}>修改数据</button>
//updateData=()=>{
使用APIe state是只读的只能通过API修改
this.setStat=({

msg：“我是修改之后的”
});
}
7.方法传参
执行事件传递参数
<button onClick={this.sendData.bind(tihs,1,2)}>传递参数</button>
//sendData=(x,y)=>{
console.log(x,y)
}
执行事件的参数
<button onClick={this.getEvent.bind(this,1)} data-index=“1”>获取事件的参数</button>
//getEvent=(e,event)=>{
let ele=event.target;
console.log(ele.getAttribute(“data-index”));
原生js 写的事件执行对象也可以用
getEvent=(e,event)=>{
let ev=window.event;
console.log(ev.target);

}
8.react 中获取dom元素
<button onClick={this.getDom}>点击获取dom元素</button>
<div ref=“block”>我是带有ref属性的元素</div>
///getDom=()=>{
console.log(this.ref.block.innerHTML);
}
9.表单事件以及获取表单元素的值
<input type=“test” ref=“name” value=(this.state.text) οnchange={this.changeData.bind(this)}/>
<button οnclick={this.getInput.bind(this)}>获取input值</button>
//getInput(){
console.log(this.refs.name.value)

}
this.state={
text:“我是文本框的值”

}

changData(e){
let val= e.target.value;
this.setState({
text:val
});
} 手动实现数据双向

1.数据双向的实现
this.state={

msg:“实现数据双向”
}；
封装方法 getData(){

}
<button onClick={this.getData.band(this)}>获取值</button>
<input type=“text” defaultvalue={this.state.msg}/>
//defaultvalue 是非限制性属性 value是限制属性
onchange 在change事件里形setState 修改原数据

setData(e){
let ele=e.target;//拿到当前的目标元素
this.setState({
msg.ele.value

});

}