目录
一、JSX语法
JavaScript XML,jsx是JavaScript的语法的扩展,支持自定义属性;是react的内置的语法,其基本语法格式为
const 元素名 = (
<根标签名>
<子标签></子标签>
</根标签名>
);
(1)创建元素时必须有一个根标签,该根标签是一个容器,里面可以包含其他的标签
(2)在react的脚手架项目中可以使用空标签(<></>)作为根标签
<!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>JSX语法</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let div = document.getElementById('root');
//通过jsx语法创建一个元素
const element = (
<span>
<h3>新年快乐!</h3>
<p>虎虎生威</p>
</span>
);
//调用render函数将element渲染到也中
ReactDOM.render(element,div);
</script>
</body>
</html>
1、JSX的算术表达式
使用大括号({}),可以解析算术表达式。在{}中放算术表达式即可
2、条件表达式
JSX不支持if语句,但可以使用条件表达式来替代if
3、嵌入表达式
先定义变量,然后在{}中使用变量
4、对象表达式
在{}中可以直接以'对象名.属性'方式访问对象
5、函数表达式
可以通过函数的调用来实现对if的使用
<!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>JSX语法</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let div = document.getElementById('root');
//通过jsx语法创建一个元素
let k = 21;
let userInfo = {
userName: '小森',
userAge: 45,
userAddress: '杭州'
}
function showUserInfo(user){
return '姓名:'+user.userName+'\t年龄:'+user.userAge+'\t地址:'+user.userAddress
}
function chooseUser(user){
if (user) {
return showUserInfo(user)
}else{
return '用户信息为空'
}
}
const element = (
<div>
<h3>新年快乐!</h3>
<p>虎虎生威</p>
<p>{ 3+5 }</p>
<p>条件表达式:{ k % 2==0?'虎年吉祥':'虎虎生威' }</p>
<div>用户信息:
<p>{ chooseUser(userInfo) }</p>
<p>{ chooseUser() }</p>
</div>
</div>
);
//调用render函数将element渲染到也中
ReactDOM.render(element,div);
</script>
</body>
</html>
6、数组表达式
在数组中存放标签,在{}中解析数组
<!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>JSX表达式</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
const arr = [
<p>十二生肖:</p>,
<p>子鼠丑牛寅虎卯兔</p>,
<p>辰龙巳蛇午马未羊</p>,
<p>申猴酉鸡戌狗亥猪</p>
]
const span = (
<span>
<h3>JSX的数组表达式:</h3>
<p>{ arr }</p>
</span>
);
ReactDOM.render(span,root)
</script>
</body>
</html>
7、样式表达式
将CSS样式应用到虚拟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>JSX样式表达式</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root')
//1、定义样式对象
const style1= {
css1:{
fontSize: 25,
fontStyle: 'bold',
color: 'red'
},
css2: {
fontSize: 15,
fontStyle: 'normal',
color: 'green'
},
css3: {
fontSize: 10,
fontStyle: 'italic',
color: 'blue'
}
}
//2、创建DOM
const element = (
<div>
{/* 创建根标签 */}
<p style={ style1.css1 }>小森</p>
<p style={ style1.css2 }>小华</p>
<p style={ style1.css3 }>小源</p>
</div>
)
//3、将虚拟的DOM渲染到页面中
ReactDOM.render(element,root)
</script>
</body>
</html>
8、注释表达式
在JSX元素中(虚拟DOM)中进行注释,使用的格式是{/*注释内容*/}
二、React组件
React组件可以将UI切分成一些独立的、可复用的部件
1、函数组件
基于ES6的函数。轻量级组件(不占用内存空间)、React官方提倡使用
(1)定义函数组件
function fun(){
return <标签></标签>
}
(2)使用:将函数名当做标签使用
<fun />
<!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>函数组件</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.创建函数组件
function ShowTag(){
return (
<div>
<p>中华上下五千年</p>
<button>提交</button>
</div>
);
}
//2.创建虚拟DOM
const reactSpan = (
<span>
<ShowTag /> {/* 实际是对函数的调用 */}
</span>
)
//3.将虚拟的DOM渲染到页面中
ReactDOM.render(reactSpan,root)
</script>
</body>
</html>
2、类组件
(1)定义:
class 类名 extends React.Component{
属性;
render(){
return <标签></标签>
}
}
(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>类组件</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.创建类组件
class ShowTag extends React.Component{
render(){
return (
<div>
<p>所爱隔山海</p>
<p>山海不可平</p>
</div>
);
}
}
//2.创建虚拟的DOM
const element = (
<span>
<ShowTag /> {/* 实际是创建了类的对象(实例) */}
</span>
)
//3.渲染
ReactDOM.render(element,root)
</script>
</body>
</html>
3、组件的组合
<!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>组件的组合</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let root = document.getElementById('app');
//1.创建函数组件
function FormTitle(){ //标题组件
return (
<h3>用户登录</h3>
)
}
function UserId(){ //用户ID组件
const userId = (
<p>用户ID:<input type='text'/></p>
)
return userId;
}
function UserName(){ //用户名组件
const userName = (
<p>用户名:<input type='text'/></p>
)
return userName;
}
function UserPwd(){ //密码组件
const userPwd = (
<p>密码:<input type='password'/></p>
)
return userPwd;
}
function Submit(){ //按钮组件
return (
<button>登录</button>
)
}
//2.将函数组件组合成一个组件
function FormLogin(){
return (
<div>
<FormTitle />
<UserId />
<UserName />
<UserPwd />
<Submit />
</div>
)
}
//3.渲染
ReactDOM.render(<FormLogin/>,root)
</script>
</body>
</html>