react就是用于构建用户界面的js库
react入门
新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建虚拟tom 注意这里是没有单引号的 因为写的是jsx
const vdom=<h1>你好啊</h1>
//渲染虚拟dom到容器中
ReactDOM.render(vdom,document.getElementById("app"))
</script>
</body>
</html>
jsx语法
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.aa{
background-color: red;
}
</style>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
const myData="你好";
//创建虚拟dom
//使用{}表示传变量内容
//注意dom只能有一个根标签，不能有多个相同的根标签
//就是不能再来一个div,如果在来一个div不需要放在里面
//这里的class样式必须是className,不能写class
const vdom=<div>
<div className="aa">这里的div必须放在div里面</div>
<h1>{myData}</h1>
</div>
;
//渲染虚拟dom到容器中
ReactDOM.render(vdom,document.getElementById("app"))
</script>
</body>
</html>
函数式组件
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建函数式组件 注意组件一定要大写开头
function MyDemo(){
return <h1>你好啊</h1>
}
//渲染组件到容器中
ReactDOM.render(<MyDemo/>,document.getElementById("app"));
</script>
</body>
</html>
类组件
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
render(){
return <h1>你好</h1>
}
}
//渲染类组件到容器中
ReactDOM.render(<P/>,document.getElementById("app"))
</script>
</body>
</html>初始化state
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
constructor(props){
super(props)
//存储字段
this.state={
flag:false
}
}
render(){
//解构
const {flag}=this.state;
console.log('aa',this)
return <h1>你是{flag?'张三':'李四'}</h1>
}
}
//渲染类组件到容器中
ReactDOM.render(<P/>,document.getElementById("app"))
</script>
</body>
</html>
绑定点击事件
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
constructor(props){
super(props)
this.state={
flag:false
}
}
render(){
console.log(this)
const {flag}=this.state;
//注意onClick的c是大写的，并且demo没有小括号，方法需要放到大括号里面
return <h1>你是{flag?'张三':'李四'},<button onClick={demo}>点我</button></h1>
}
}
//渲染类组件到容器中
ReactDOM.render(<P/>,document.getElementById("app"))
//点击事件
function demo(){
console.log('aaaa')
}
</script>
</body>
</html>
绑定方法中的this
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
constructor(props){
super(props)
this.state={
flag:false
}
//要想在方法拿到this 必须绑定demo方法 在点击事件的时候拿this.aa去调用
this.aa=this.demo.bind(this)
}
render(){
console.log(this)
const {flag}=this.state;
//注意这里需要this.调用方法
return <h1>你是{flag?'张三':'李四'},<button onClick={this.aa}>点我</button></h1>
}
//点击事件 在类中是不能写function的
demo(){
console.log('aaaa',this)
}
}
//渲染类组件到容器中
ReactDOM.render(<P/>,document.getElementById("app"))
</script>
</body>
</html>
setState,修改状态中的属性，使得重新渲染界面的上的数据
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
constructor(props){
super(props)
this.state={
flag:false
}
//要想在方法拿到this 必须绑定demo方法 在点击事件的时候拿this.aa去调用
this.aa=this.demo.bind(this)
}
render(){
console.log(this)
const {flag}=this.state;
//注意这里需要this.调用方法
return <h1>你是{flag?'张三':'李四'},<button onClick={this.aa}>点我</button></h1>
}
//点击事件 在类中是不能写function的
demo(){
console.log('aaaa',this)
const flag=this.state.flag;
//切换状态，注意必须放到setState方法中，界面在能重新渲染，因为render是放在了原型上
this.setState({flag:!flag});
}
}
//渲染类组件到容器中
ReactDOM.render(<P/>,document.getElementById("app"))
</script>
</body>
</html>
箭头函数简写
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
//把state从构造器中提取出来 也不需要去绑定方法了
state={flag:false}
render(){
const {flag}=this.state;
//注意这里需要this.调用方法
return <h1>你是{flag?'张三':'李四'},<button onClick={this.demo}>点我</button></h1>
}
//点击事件 在这里写箭头函数 this去找他的父级 就找到了this
demo=()=>{
console.log('aaaa',this)
const flag=this.state.flag;
//切换状态，注意必须放到setState方法中，界面在能重新渲染，因为render是放在了原型上
this.setState({flag:!flag});
}
}
//渲染类组件到容器中
ReactDOM.render(<P/>,document.getElementById("app"))
</script>
</body>
</html>Props动态传参
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
render(){
console.log(this)
//解构
const {name,age} =this.props;
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
//渲染类组件到容器中
ReactDOM.render(<P name='张三' age='16'/>,document.getElementById("app"));
</script>
</body>
</html>
批量传递props
通过三个点来简写参数的传递
props限制参数
引入prop-types.js,限制属性的参数类型
<!--引入prop-types 用于对组件标签属性进行限制-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入prop-types 用于对组件标签属性进行限制-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
render(){
console.log(this)
//解构
const {name,age} =this.props;
return (
<ul>
<li>姓名:{name}</li>
<li>年龄:{age}</li>
</ul>
)
}
}
//类的属性校验 这里是小写p开头
P.propTypes={
//姓名 大写p开头，必须是字符串类型 isRequired 必填
name:PropTypes.string.isRequired,
//年龄必须是数字 可以不填
age:PropTypes.number
}
//类的参数默认值
P.defaultProps={
//如果组件不写 默认为0
age:0
}
//通过...p这样的语法来简写传递参数
const p={name:'张三'};
//渲染类组件到容器中
ReactDOM.render(<P {...p}/>,document.getElementById("app"));
</script>
</body>
</html>当年龄没有传，那么这里默认显示了0
当年龄传了字符串，控制台就会打印警告
我们还可以把属性校验和默认值添加一个static修饰符，放入类中，去简写，这样就不用再外部去调用了
字符串形式的ref
修改index.html,在标签使用ref表示id的意思
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入prop-types 用于对组件标签属性进行限制-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
//点我方法
dianWo=()=>{
console.log(this)
//从refs中获取aa对应的信息
const {aa}=this.refs;
alert(aa.value)
}
render(){
return (
<div>
<input ref="aa"></input>
<button onClick={this.dianWo}>点我</button>
</div>
)
}
}
//渲染类组件到容器中
ReactDOM.render(<P />,document.getElementById("app"));
</script>
</body>
</html>可以看到在refs中就有了aa的数据
回调形式的ref
直接把aa放到了refs的上级，也就是this这一级别上，直接从this去拿这个aa
c就是当前节点
React.createRef()替代字符串ref
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入prop-types 用于对组件标签属性进行限制-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
//创建一个ref存储这个字段
myRef=React.createRef()
//点我方法
dianWo=()=>{
console.log(this)
console.log(this.myRef)
console.log(this.myRef.current)
console.log(this.myRef.current.value)
}
render(){
return (
<div>
<input ref={this.myRef}></input>
<button onClick={this.dianWo}>点我</button>
</div>
)
}
}
//渲染类组件到容器中
ReactDOM.render(<P />,document.getElementById("app"));
</script>
</body>
</html>注意取数据的时候是从current里面拿到的value值
ref事件处理
input的事件可以通过event.target.value直接拿到结果，不需要写ref
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入prop-types 用于对组件标签属性进行限制-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app">
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
//点我方法
dianWo=(event)=>{
console.log(event)
console.log(event.target)
console.log(event.target.value)
}
render(){
return (
<div>
{/*离开焦点的方法 可以不需要写ref */}
<input onBlur={this.dianWo}></input>
</div>
)
}
}
//渲染类组件到容器中
ReactDOM.render(<P />,document.getElementById("app"));
</script>
</body>
</html>
函数柯里化
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入prop-types 用于对组件标签属性进行限制-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app" >
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
//初始化字段
state={
name:'',
age:''
}
//点我方法
dianWo=()=>{
const {name,age} =this.state
alert(name+","+age)
}
//文本框改变之后触发的方法 函数
aa=(dataType)=>{
//事件改变的时候,在这里是不会触发的
// console.log(dataType)
return(event)=>{
//在这里才会打印,因为这里是函数的柯里化,也就是方法返回方法
//把拿到的参数放入state中,按钮点击的时候就能获取到数据了
//注意这里要用中括号把dataType放进去，这样才能找到对应的name或者age
//否则你穿的参数就是dataType
this.setState({[dataType]:event.target.value})
}
}
render(){
return (
<div>
{/* 在aa这个方法传字段的名字*/}
<input onChange={this.aa('name')}></input>
<input onChange={this.aa('age')}></input>
<button onClick={this.dianWo}>点击</button>
</div>
)
}
}
//渲染类组件到容器中
ReactDOM.render(<P />,document.getElementById("app"));
</script>
</body>
</html>如果不想使用柯里化，也可以直接在方法上面写
React生命周期
修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好啊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入react核心库-->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!--引入babel,用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--引入prop-types 用于对组件标签属性进行限制-->
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
</head>
<body>
<!--定义容器-->
<div id="app" >
</div>
<!--注意这里写的是babel 不是js -->
<script type="text/babel">
//创建类组件
class P extends React.Component{
//初始化字段
state={
name:''
}
//点我方法
xieZai=()=>{
console.log('组件卸载')
//触发 卸载 就是把界面清空 把app这个容器卸载
ReactDOM.unmountComponentAtNode(document.getElementById("app"))
}
//组件将要挂载 这是react自带的内部函数
UNSAFE_componentWillMount(){
console.log('组件将要挂载')
}
//组件挂载完毕 这是react自带的内部函数
componentDidMount(){
//在这里可以开启计时器
console.log('组件挂载完毕')
}
//组件将要卸载 这是react自带的内部函数
componentWillUnmount(){
//在这里 可以清除定时器
console.log('组件将要卸载')
}
//组件将要更新 这是react自带的内部函数
UNSAFE_componentWillUpdate(){
console.log('组件将要更新')
}
//组件更新完毕 这是react自带的内部函数
componentDidUpdate(){
console.log('组件更新完毕')
}
gengXin=()=>{
console.log('修改state')
this.setState({
name:'aaa'
})
}
//初始化 渲染 修改state会触发这里
render(){
console.log('加载render')
return (
<div>
<button onClick={this.gengXin}>更新</button>
<button onClick={this.xieZai}>卸载</button>
</div>
)
}
}
//渲染类组件到容器中
ReactDOM.render(<P />,document.getElementById("app"));
</script>
</body>
</html>界面加载后 就会把render中的内容挂载到容器中
点击更新后，触发修改方法
点击卸载之后，触发卸载方法和将要卸载的方法，并把界面清空
所以生命周期就是：挂载之前，挂载完毕，更新之前，更新完毕，卸载之前，卸载完毕
脚手架
在cmd中执行下面的命令
全局安装脚手架
npm i create-react-app -g
创建项目
create-react-app test
进入项目目录
cd test
启动项目
npm start
浏览器访问3000的端口
在vscode启动项目
打开终端-选择新建终端-输入npm start 启动命令
文件介绍
这个index.html里面的root，就相当于我们之前写的那个app
这个App.js里面写了一个函数式组件，并把App组件暴露出来，这样别的地方才能引入
这个index.js文件，就是把App组件引入，并把这个组件放入root容器中，渲染到界面
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
