首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件
npm init -y
npm i babel-standalone -D
npm i react react-dom -D
安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始学习下面知识
1. jsx代码内{}的用法
- { }内插json数据
- { }内可以插入css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{}的用法</title>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
/* 插值的内容插json数据 */
const person = {
name:"laowang",
age:30,
kuang:"有"
}
const style ={"backgroundColor":"#0f0"}
const style1 = {
bgc1:{backgroundColor :"#999"},
bgc2:{backgroundColor:"#a00"}
}
const element = (
<div>
<h1 className='red'> 姓名：{person.name} </h1>
<h2 style={style}> 年龄：{person.age}</h2>
<h2 style={style1.bgc1}> kuang:{person.kuang} </h2>
</div>
)
//ReactDOM.render将element渲染到id=app的标签中
ReactDOM.render(
element,
document.getElementById('app')
)
</script>
</body>
</html>
运行结果如下：
2. jsx代码内{}的 三目、遍历 用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三目与遍历的用法</title>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
/* 插值的内容插json数据 */
const person = {
name:"laowang",
age:30,
kuang:"有",
money:0 //1代表的是有，0没有
}
function panfu(){
return `react真的很那个啥~~~`
}
const arr = [ "初雨" , "望春" ,"太阳" ,"舜岳" , "尊蓝"]
const element = (
<div>
<h3> {JSON.stringify(person)} </h3>
<h2> 有没有钱：{person.money ? '有': '没有'} </h2>
<ul>
{
//arr 遍历数组，返回出对应的值；key值代码的是元素的唯一性;
//class在react是关键词，需要换为className;
arr.map( ( item , index )=>{
return ( <li key={index} className='red' title={item}> {item} </li>)
})
}
</ul>
</div>
)
//ReactDOM.render将element渲染到id=app的标签中
ReactDOM.render(
element,
document.getElementById('app')
)
</script>
</body>
</html>
运行效果如下：
