xx

B/P01.html

@@ -1,9 +1,15 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2021-12-23 21:52:33
+ * @LastEditTime: 2021-12-23 23:44:20
+ * @LastEditors: chenxuan
+-->
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title></title>
+	<title>JSX语法</title>
 	<style type="text/css">
 		.haha{
 			color: red;
@@ -19,7 +25,7 @@
     	const text="hello world!";
     	const vdom=(
     		<div className="haha">
-    			<h1>{text}</h1>
+    			<li style={{fontSize:'48px',fontWeight:'bold'}}>{text}</li>
     		</div>
     	);
     	ReactDOM.render(
@@ -27,6 +33,13 @@
     	)
     	console.log(vdom);
     	console.log(document.getElementById('app'))
+		/*
+		*1、根元素
+		*2、闭合标签
+		*3、js使用{}
+		*4、内联样式使用{{}}
+		*5、className
+		*/
     </script>
 </body>
 </html>

B/P03.html

@@ -0,0 +1,35 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2021-12-23 23:27:50
+ * @LastEditTime: 2021-12-23 23:43:56
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>循环</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script src="./package/old/react.development.js"></script>
+    <script src="./package/old/react-dom.development.js"></script>
+    <script src="./package/old/babel.min.js"></script>
+    <script type="text/babel">
+    	const data=['angular','vue','React'];
+		const vm=(
+			<div>
+				{
+					data.map(function(item,index){
+						return <li key={index}>{item}</li>
+					})
+				}
+			</div>
+		)
+		ReactDOM.render(
+			vm,document.getElementById('app')
+		)
+    </script>
+</body>
+</html>

B/P04.html

@@ -0,0 +1,22 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2021-12-23 23:46:31
+ * @LastEditTime: 2021-12-23 23:50:51
+ * @LastEditors: chenxuan
+-->
+<!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>
+</head>
+<body>
+    <h1>模块化</h1>
+    <h3>1、一般一个js文件就是一个模块</h3>
+    <hr>
+    <h1>组件</h1>
+    <h3>2、实现局部功能效果的代码和资源的合集</h3>
+</body>
+</html>