8 часов назад · 1db4a27dfa
--- a/21.react/初阶/1.html
+++ b/21.react/初阶/1.html
@@ -0,0 +1,17 @@
 
															+<!DOCTYPE html>
														
 
															+<html lang="en">
														
 
															+
														
 
															+<head>
														
 
															+    <meta charset="UTF-8">
														
 
															+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
														
 
															+    <title>Document</title>
														
 
															+</head>
														
 
															+
														
 
															+<body>
														
 
															+    <div>
														
 
															+        <label for="aa">姓名</label>
														
 
															+        <input type="text" id="aa">
														
 
															+    </div>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/21.react/初阶/2.jsx_渲染.html
+++ b/21.react/初阶/2.jsx_渲染.html
@@ -0,0 +1,50 @@
 
															+<!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>
														
 
															+    <!-- 
														
 
															+        数据绑定：{} 表达式
														
 
															+        不能渲染的类型：
														
 
															+            boolean undefined null
														
 
															+        不能使用 if/while/for
														
 
															+        可以使用： 
														
 
															+            数学表达式
														
 
															+            三元表达式
														
 
															+            方法的调用
														
 
															+            数组的操作
														
 
															+    -->
														
 
															+    <script type="text/babel">
														
 
															+        const userName = 'tutu';
														
 
															+        const age = 3;
														
 
															+        const arr = [1, 23, 4]
														
 
															+        const obj = {
														
 
															+            a: 1
														
 
															+        }
														
 
															+        function aa() { return 1 };
														
 
															+        // const element = <h1>我叫{'123'}</h1>;
														
 
															+        // const element = <h1>{
														
 
															+        //     age > 3 ? '大孩子' : '小孩子'
														
 
															+        // }</h1>
														
 
															+        const element = <h1>{
														
 
															+            [...arr].reverse().join('')
														
 
															+        }</h1>
														
 
															+        // const element = <h1>{aa()}</h1>
														
 
															+        // const element = <h1>{12}</h1>
														
 
															+        // const element = <h1>我叫{userName},今年{age + 10}岁</h1>
														
 
															+        const container = document.getElementById("root");
														
 
															+        const root = ReactDOM.createRoot(container)
														
 
															+        root.render(element);
														
 
															+    </script>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/21.react/初阶/3.jsx_属性绑定.html
+++ b/21.react/初阶/3.jsx_属性绑定.html
@@ -0,0 +1,51 @@
 
															+<!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">
														
 
															+        /**
														
 
															+         * 关键字 保留字的 html属性需要改名
														
 
															+         * for => htmlFor
														
 
															+         * class => className
														
 
															+         * onclick => onClick
														
 
															+         * onchange => onChange
														
 
															+         * onkeydown => onKeyDown
														
 
															+         * colspan => colSpan
														
 
															+         * 
														
 
															+         * jsx语法：
														
 
															+         * 1.jsx元素 必须闭合
														
 
															+         * 2.注释格式：
														
 
															+        */
														
 
															+        const element = (
														
 
															+            <div>
														
 
															+                {/* 注释 */}
														
 
															+                <h1>111</h1>
														
 
															+                <label htmlFor="xx">姓名</label>
														
 
															+                <input placeholder='请输入' id='xx' />
														
 
															+                <h3 className='hi'>哈哈</h3>
														
 
															+                <table border='1'>
														
 
															+                    <tbody>
														
 
															+                        <tr colSpan='2'>
														
 
															+                            <td>2</td>
														
 
															+                        </tr>
														
 
															+                    </tbody>
														
 
															+                </table>
														
 
															+            </div>
														
 
															+        )
														
 
															+        const container = document.getElementById("root");
														
 
															+        const root = ReactDOM.createRoot(container)
														
 
															+        root.render(element);
														
 
															+    </script>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/21.react/初阶/34jsx_属性绑定.html
+++ b/21.react/初阶/34jsx_属性绑定.html
@@ -0,0 +1,31 @@
 
															+<!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 widthMain = 500;
														
 
															+        const tags = true
														
 
															+        const pic = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPV-ex_HFNzIsexutQPfe7zAKUR7qAmU0h8dwWxGhPGQ&s';
														
 
															+        const element = (
														
 
															+            <div>
														
 
															+                <img src={pic} alt="" width={widthMain} />
														
 
															+                <input type="text" disabled={tags} />
														
 
															+            </div>
														
 
															+        )
														
 
															+        const container = document.getElementById("root");
														
 
															+        const root = ReactDOM.createRoot(container)
														
 
															+        root.render(element);
														
 
															+    </script>
														
 
															+</body>
														
 
															+
														
 
															+</html>
														
--- a/21.react/初阶/images/1.jpg
+++ b/21.react/初阶/images/1.jpg
--- a/21.react/初阶/模版.html
+++ b/21.react/初阶/模版.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 element = <h1>你好</h1>
														
 
															+        const container = document.getElementById("root");
														
 
															+        const root = ReactDOM.createRoot(container)
														
 
															+        root.render(element);
														
 
															+    </script>
														
 
															+</body>
														
 
															+
														
 
															+</html>