<!DOCTYPE html>
<html>
<head>
<meat charset="UTF-8">
<title>jsx小练习</title>
<style>
.title{
background-color: orange;
width:200px;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<div id="demo"></div>
<!-- 核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- react-dom,操作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>
<!-- 此处一定要写babel -->
<script type="text/babel">
/*
一定注意区分：【js语句（代码）】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1).a
(2).a+b
(3).demo(1)
(4).arr.map()
(5).function test(){}
2.语句（代码）：
下面这些都是御酒（代码）：
（1）if(){}
（2）for(){}
(3).switch(){case:xxxx}
*/
//模拟一些数据
const data=['Angular','React','Vue']
//1.创建虚拟DOM
//此处一定不要写引号，因为不是字符串
const VDOM = (
<div>
<h1>前端js框架代码</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));
// jsx语法规则：
// 1.定义虚拟DOM时，不要写引号。
// 2.标签中混入JS表达式时要用{}
// 3.类名必须用className
// 4.内联样式，要用style={{key:value}}的形式去写
// 5.只有一个根标签
// 6.标签必须闭合
// 标签首字母
// （1）若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素，则报错
// （2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
</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>
</head>
<body>
<script type="text/javascript">
let arr=[1,3,5,7,9]
let result=arr.map((num)=>{
return num+1
})
console.log(result);
</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>
</head>
<body>
<script type="text/javascript">
const x=function test(){
console.log('@');
}
console.log(x);
/* 控制台x为 ƒ test(){
console.log('@');
} */
</script>
</body>
</html>
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
