目录
一、React框架
1、简介
- 是一个JavaScript库,用于简化用户页面的设计
- 美国的Facebook公司2013年发布
- 基于jsx(JavaScript XML)语法,使用XML标记将html,JavaScript混写。是React的核心
- 组件:是数据和逻辑的封装,提高了代码的复用率,便于测试和维护
2、应用方式
(1)传统方式
传统方式:在页面中引入react库,进行开发
react.development.js:React的核心库
react-dom.development.js:提供与DOM相关的功能
babel.min.js:类似编译器,将ES6代码编译成ES5的
ReactDOM.render(element,container,[callback]):将element元素渲染到container中
💥举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>西安邮电大学</h1>,
document.getElementById('app')
)
</script>
</body>
</html>
(2)React脚手架方式
create-react-app 是来自于Facebook,通过该命令我们无需配置就能快速构建React开发环境。
create-react-app自动创建的项目是基于Webpack + ES6。
3、React虚拟DOM
React虚拟DOM:由
ReactDOM.render
函数渲染的DOM元素都是虚拟的
二、JSX语法
1、将JavaScript语法写成XML格式
将JavaScript语法写成XML格式:必须使用babel.js对JSX语法进行解析,通常的做法是:
<script type='text/babel'></script>
2、基本语法格式
const element = (
<标签名1></标签名1>
<标签名2></标签名2>
<标签名3></标签名3>
);
3、JSX的表达式
JSX的表达式:所有的表达式都放在’{}'里
(1)算术表达式: { 表达式 }
(2)条件表达式:不能使用if语句
(3)嵌入表达式:{ 变量 }
(4)对象表达式:{ 对象名.属性名 }
(5)函数表达式:{ 函数名([参数]) }
(6)增强型函数表达式:通过传参的方式实现if的选择
(7)数组表达式:{ 数组名 }
(8)样式表达式:<标签名 style={ 样式名 }><标签名/>
(9)注释表达式:{ /* 注释内容 */ }
💥举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//1.获取页面中的元素(实际DOM)
var mydiv=document.getElementById('app')
const name = '张三'
const obj={
Id:1001,
Name:'曹操',
Address:'西安'
}
function show(){
return '编号:'+obj.Id+'姓名:'+obj.Name+'地址:'+obj.Address
}
function chooseShow(obj){
if(obj){
return show(obj)
}else{
return '用户信息为空'
}
}
const arr = [
<p>姓名:李四</p>,
<p>性别:男</p>,
<p>年龄:25</p>
]
//方法二:将许多样式合并到一起写
const style1={
css1:{
fontSize:25,
color:'blue',
},
css2:{
fontSize:30,
color:'pink'
}
}
//写法一:分开写
const css1={
fontSize:25,
color:'red'
}
//2.创建虚拟的DOM
let reactSpan = (
<span>
<h2>西安邮电大学</h2>
<p>计算机科学与技术专业</p>
<p>{ 3*5 }</p>
<p>{1==1 ? 'true' : 'false'}</p>
<p>{ name }</p>
<p>{ obj.Id }</p>
<p>{ obj.Name }</p>
<p>{ obj.Address }</p>
<p>{ show(obj) }</p>
<p>{ chooseShow(obj) }</p>
<p>{ arr }</p>
<p style={css1}>西安邮电大学</p>
<p style={style1.css1}>西北政法大学</p>
<p style={style1.css2}>陕西师范大学</p>
{/*hello*/}
</span>
)
//3.将虚拟的DOM渲染到实际的DOM中
ReactDOM.render(reactSpan,mydiv)
</script>
</body>
</html>
三、React的组件
1、类组件
(1)创建类组件:
class 组件名 extends React.Component{
render(){
return (<标签名><标签名/>...)
}
}
(2)将类组件渲染到实际DOM中
将类组件渲染到实际DOM中:类组件名的首字母必须大写
ReactDOM.render(<类组件名/>,实际DOM)``
💥举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
<div id='root'></div>
<script type="text/babel">
//1.创建类组件:即定义类
class Counter extends React.Component{
render(){
return (
<div>
<p>我是类标签</p>
<button>按钮</button>
</div>
)
}
}
// 将类组件渲染到真正DOM中
ReactDOM.render(<Counter/>,document.getElementById('root'))
</script>
</body>
</html>
2、函数组件:函数名就是组件名
💥举例:单个函数组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
<div id='root'></div>
<script type="text/babel">
//定义函数组件
function Student(){
return (
<div>
<p>我是函数组件</p>
<label >
用户名:
<input type='text'/>
</label>
</div>
)
}
//2.将类组件渲染到实际的DOM中
ReactDOM.render(<Student/>,document.getElementById('root'))
</script>
</body>
</html>
💥举例:多个函数组件组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../../../../react的js库/react.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/react-dom.development.js"></script>
<script type="text/javascript" src="../../../../react的js库/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function UserInfo(){
return (
<div>
<label>
用户名:
<input type='text'/>
</label>
</div>
)
}
function UserPassword(){
return (
<div>
<label >
密码:
<input type='password'/>
</label>
</div>
)
}
//组合函数组件
function Login(){
return (
<div>
<UserInfo/>
<UserPassword/>
</div>
)
}
ReactDOM.render(<Login/>,document.getElementById('root'))
</script>
</body>
</html>