9 месяцев назад · 4f8c3b0603
--- a/react/react初阶/1.jpg
+++ b/react/react初阶/1.jpg
--- a/react/react初阶/2.jsx数据绑定.html
+++ b/react/react初阶/2.jsx数据绑定.html
@@ -0,0 +1,32 @@
 
				+<!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"></div>
			
 
				+    <script type="text/babel">
			
 
				+        /**
			
 
				+         * vue {{}} 插值模板
			
 
				+         * react {} 表达式模板
			
 
				+        */
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        let data = '图图';
			
 
				+        let myName = <h2>我叫:{data}</h2>
			
 
				+        let num = <p>1+1={1+1}</p>
			
 
				+        // jsx语法中标签必须闭合
			
 
				+        let picture = <img src="./1.jpg" />
			
 
				+        let str = '喜羊羊';
			
 
				+        // 反转字符串
			
 
				+        let reverseStr = str.split("").reverse().join("");
			
 
				+        let reverseStr1 = [...str].reverse().join("");
			
 
				+
			
 
				+        root.render(reverseStr)
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/react/react初阶/3.jsx属性绑定.html
+++ b/react/react初阶/3.jsx属性绑定.html
@@ -0,0 +1,42 @@
 
				+<!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"></div>
			
 
				+    <script type="text/babel">
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        // 静态属性绑定
			
 
				+        let element = <div id='first'>你好</div>
			
 
				+        element = <img src='./1.jpg' width="200" height="200" />
			
 
				+        // 多单词采用驼峰命名法
			
 
				+        element = (
			
 
				+            <table>
			
 
				+                <tr>
			
 
				+                    <th colSpan='2'>数学</th>
			
 
				+                </tr>
			
 
				+                <tr>
			
 
				+                    <td>10</td>
			
 
				+                    <td>20</td>    
			
 
				+                </tr>    
			
 
				+            </table>
			
 
				+        )
			
 
				+        // class
			
 
				+        // element = <h3 class='h3'>哈哈哈哈哈</h3>
			
 
				+        element = <h3 className='h3'>哈哈哈哈哈</h3>
			
 
				+        element = (
			
 
				+            <div>
			
 
				+                <label htmlFor="user">姓名</label>
			
 
				+                <input type="text" placeholder='请输入姓名' id="user" />
			
 
				+            </div>
			
 
				+        )
			
 
				+        root.render(element)
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/react/react初阶/4.jsx属性绑定.html
+++ b/react/react初阶/4.jsx属性绑定.html
@@ -0,0 +1,23 @@
 
				+<!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"></div>
			
 
				+    <script type="text/babel">
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        // 动态属性绑定
			
 
				+        let url = './1.jpg';
			
 
				+        // 不需要字符串
			
 
				+        // <img :src="item.xxx">
			
 
				+        let element = <img src={url} />
			
 
				+        root.render(element)
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/react/react初阶/默认.html
+++ b/react/react初阶/默认.html
@@ -0,0 +1,18 @@
 
				+<!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"></div>
			
 
				+    <script type="text/babel">
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        root.render(xxx)
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>