React中jsx书写规范，注释
为什么React选择了jsx?
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合，是密不可分的（组件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
msg: "hello zm",
};
}
render() {
/**
* jsx书写规范
* jsx的顶层只能有一个根元素
* 推荐在jsx的外层包裹一个小括号()
* jsx中的标签单，双标签都可以，单标签必须以/>结尾
*/
return (
<div>
{/* jsx注释 */}
<h2>{this.state.msg}</h2>
</div>
);
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>
</body>
</html>
jsx中绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jsx中绑定属性</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
msg: "hello zm",
title: "I am title",
href: "https://www.baidu.com",
isActive: true,
};
}
render() {
const { title, href, isActive } = this.state;
// isActive:true -> active
// 1.class绑定属性的写法：字符串拼接
const className = `default ${isActive ? "active" : ""}`;
// 2.class绑定的写法2：将所有的class放到数组中
const classList = ["default", "error"];
if (isActive) classList.push("active");
return (
<div>
{/* 1.基本属性绑定 */}
<h2 title={title}>{this.state.msg}</h2>
<a href={href}>百度一下</a>
{/* 2.绑定class属性：最好使用className */}
<h2 className={className}>wzm</h2>
<h2 className={classList.join(" ")}>zm</h2>
</div>
);
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>
</body>
</html>
jsx中插入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jsx中插入内容</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 定义App根组件
class App extends React.Component {
constructor() {
super();
this.state = {
count: 0,
msg: "hello zm",
hobby: ["sing", "dance", "rap"],
und: undefined,
nul: null,
flag: true,
person: { name: "zm", age: 21 },
age: 21,
};
}
render() {
const { count, msg, hobby, nul, und, flag, person, age } = this.state;
return (
<div>
{/* 1.Number/String/Array 直接显示出来*/}
<h2>{count}</h2>
<h2>{msg}</h2>
<h2>{hobby.join(" ")}</h2>
{/* 2.undefined/null/Boolean 注意：页面不可见，也不报错*/}
<h2>{String(und)}</h2>
<h2>{null + ""}</h2>
<h2>{flag.toString()}</h2>
{/* 3.Object类型不能作为子元素进行显示*/}
{/*<h2>{person}</h2> 报错*/}
<h2>{person.name}</h2>
<h2>{Object.keys(person)[1]}</h2>
{/* 4.可以插入三元运算符 */}
<h2>{age >= 18 ? "audit" : "child"}</h2>
{/* 5.可以调用方法获取结果 */}
<ul>
{hobby.map(item => <li key={item}>{item}</li>)}
</ul>
<ul>{this.getHobby()}</ul>
</div>
);
}
getHobby() {
const hobs = this.state.hobby.map((item) => <li key={item}>{item}</li>);
return hobs;
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>
</body>
</html>
