Etusivu Tutki Apua
Kirjaudu sisään
lovecoding
/
W250913
8
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

react

zheng 8 tuntia sitten
vanhempi
2d65091347
commit
1db4a27dfa
6 muutettua tiedostoa jossa 172 lisäystä ja 0 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 17 0
      21.react/初阶/1.html
  2. 50 0
      21.react/初阶/2.jsx_渲染.html
  3. 51 0
      21.react/初阶/3.jsx_属性绑定.html
  4. 31 0
      21.react/初阶/34jsx_属性绑定.html
  5. BIN
      21.react/初阶/images/1.jpg
  6. 23 0
      21.react/初阶/模版.html

+ 17 - 0
21.react/初阶/1.html
Näytä tiedosto 

@@ -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>

+ 50 - 0
21.react/初阶/2.jsx_渲染.html
Näytä tiedosto 

@@ -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>

+ 51 - 0
21.react/初阶/3.jsx_属性绑定.html
Näytä tiedosto 

@@ -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>

+ 31 - 0
21.react/初阶/34jsx_属性绑定.html
Näytä tiedosto 

@@ -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>

BIN
21.react/初阶/images/1.jpg
Näytä tiedosto


+ 23 - 0
21.react/初阶/模版.html
Näytä tiedosto 

@@ -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>