react 基础
1.hello-react
依赖
babel.min.js
prop-types.js
react-dom.development.js
react.development.js
hello-react demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>hello react</title>
</head>
<body>
<div id="test"></div>
<!-- react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建虚拟DOM
const VDOM = (
<h1 id="sanlll">
Hello,React
</h1>
)
//渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
2.原生js创建虚拟dom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>create dom using js method</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript">
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello React'))
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
3.jsx创建虚拟dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jsx创建虚拟dom</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
const VDOM = (
<h1 id="title">
<span>Hello,React</span>
</h1>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
4.创建函数组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>函数组件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
function MyComponent(){
console.log(this);
return <h2>我是函数定义的组件</h2>
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>)
1.React解析组件标签，找到了MyComponent组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟dom转换成真实dom，随后呈现在页面中
*/
</script>
</body>
</html>
5.类组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>类组件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class MyComponent extends React.Component{
render(){
console.log('render中的this',this)
return <h2>我是用类定义的组件</h2>
}
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/>.....)
1.React解析组件标签，找到了MyComponent组件
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法
3.将render返回的虚拟dom转为真实dom，随后呈现在页面中
*/
</script>
</body>
</html>
6.jsx 基本规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jsx rule</title>
<style type="text/css">
.title{
background-color: orange;
width: 200px;
}
</style>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
const myId = 'slq'
const myData = 'Hello,react'
//create VDOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myId.toLowerCase()} {1 + 2} {89 + 90}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
</h2>
<input type="text"/>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
/*
jsx语法规则：
1.定义虚拟dom时，不要写引号
2.标签中混入js表达式时用{}
3.样式的类名指定要用className
4.内联样式，使用style={{key:value}}的形式去写
5.只有一个根标签
6.标签必须闭合
7.标签首字母
（1）.若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
（2）.若大写字母开头，react将其识别为组件，然后去渲染，若组件没有定义，则报错
*/
</script>
</body>
</html>
7.jsx demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jsx pratice</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
js语句块和js表达式
1.表达式： 一个表达式会产生一个值，可以放在任何一个需要值得地方
2.语句：
（1）..if(){}
(2)..for(){}
(3)..switch()(case:xxx)
*/
const data = ['angular','react','vue']
const VDOM = (
<div>
<h1>前端js框架列表</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
8.真实dom与虚拟dom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>虚拟dom和真实dom</title>
</head>
<body>
<div id="test"></div>
<div id="demo"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.虚拟dom
const VDOM = (
<h1 id="title">
<span>hello,react</span>
</h1>
)
//2.渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
console.log("虚拟dom",VDOM)
console.log("真实DOM",TDOM)
debugger;
console.log(typeof VDOM)
console.log(VDOM instanceof Object)
</script>
</body>
</html>
9.事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>事件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
myRef = React.createRef() //创建ref
showData = (event)=>{
console.log(event.target)
alert(this.myRef.current.value)
console.log(event)
}
render(){
return(
<div>
<input ref={this.myRef} type="text"/>
<button onClick={this.showData}>点击我哈哈哈哈</button>
</div>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
10.受控组件与非受控组件
受控组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>受控组件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component{
state = {
username:'',
password:''
}
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
savePassword = (event)=>{
this.setState({password:event.target.value})
}
handleSubmit = (event) => {
event.preventDefault()
const {username,password} = this.state
alert(`你输入的用户名：${username},你输入的密码是：${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名： <input onChange={this.saveUsername} type="text" name="username" />
密码： <input onChange={this.savePassword} type="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
非受控组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>非受控组件</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
class Login extends React.Component{
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this
alert(`你输入的用户名：${username.value},你输入的密码是：${password.value}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input ref={c => this.username = c } type="text" name="username" />
密码： <input ref={c => this.password =c } type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>
爱自己哦
