2 dagar sedan · 75ef65a62a
--- a/20.react/初阶/4.动态属性绑定.html
+++ b/20.react/初阶/4.动态属性绑定.html
@@ -18,7 +18,7 @@
 
				     <script type="text/babel">
			
 
				         // jsx可以进行页面渲染
			
 
				         // jsx中所有标签必须闭合
			
 
				-        let imgUrl = './1.jpg'
			
 
				+        let imgUrl = './zz.jpg'
			
 
				         const element = <img src={imgUrl} />;
			
 
				         const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				         root.render(element);
			
--- a/20.react/初阶/5.命名.html
+++ b/20.react/初阶/5.命名.html
@@ -0,0 +1,46 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./babel.min.js"></script>
			
 
				+    <script src="./react.development.js"></script>
			
 
				+    <script src="./react-dom.development.js"></script>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id="root">
			
 
				+        <!-- <h1>你好</h1> -->
			
 
				+    </div>
			
 
				+    <script type="text/babel">
			
 
				+        // jsx可以进行页面渲染
			
 
				+        // class => className
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        let element = <h1 className='hi'>哈哈</h1>;
			
 
				+        element = (
			
 
				+            <div>
			
 
				+                {/*for => htmlFor*/}
			
 
				+                <label htmlFor="aa">用户名:</label>
			
 
				+                <input type="text" id="aa" />
			
 
				+            </div>
			
 
				+        )
			
 
				+        // jsx中命名规范：多单词采用驼峰命名法
			
 
				+        element = (
			
 
				+            <table>
			
 
				+                <tr>
			
 
				+                    <th colSpan="2">数学</th>
			
 
				+                    {/*<th>语文</th>*/}
			
 
				+                </tr>
			
 
				+                <tr>
			
 
				+                    <td>10</td>
			
 
				+                    <td>20</td>
			
 
				+                </tr>    
			
 
				+            </table>
			
 
				+        )
			
 
				+        root.render(element);
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/20.react/初阶/6.样式绑定.html
+++ b/20.react/初阶/6.样式绑定.html
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./babel.min.js"></script>
			
 
				+    <script src="./react.development.js"></script>
			
 
				+    <script src="./react-dom.development.js"></script>
			
 
				+    <style>
			
 
				+        .tips {
			
 
				+            color: yellow;
			
 
				+        }
			
 
				+
			
 
				+        .big {
			
 
				+            font-size: 50px;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div id="root">
			
 
				+    </div>
			
 
				+    <!-- 
			
 
				+        样式绑定:
			
 
				+            class => className:在样式表中定义 绑定字符串 对象{表达式}
			
 
				+            格式：
			
 
				+                1.className='类名'
			
 
				+                2.className={'类名'}
			
 
				+            style:在jsx语法中定义 绑定对象
			
 
				+    -->
			
 
				+    <script type="text/babel">
			
 
				+        let title = {
			
 
				+            color: 'purple',
			
 
				+            fontSize: '40px'
			
 
				+        }
			
 
				+        let element = <h1 className={'tips big'}>哈哈</h1>;
			
 
				+        element = <h1 className='tips'>哈哈</h1>;
			
 
				+        element = <h1 className={7 > 5 ? 'tips' : 'big'}>哈哈</h1>;
			
 
				+        element = <p style={title}>今天星期四</p>
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        root.render(element);
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/20.react/初阶/zz.jpg
+++ b/20.react/初阶/zz.jpg