Home Explore Help
Sign In
lovecoding
/
VIP32
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

react

e 9 months ago
parent
2e6a3303a5
commit
4f8c3b0603
5 changed files with 115 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      react/react初阶/1.jpg
  2. 32 0
      react/react初阶/2.jsx数据绑定.html
  3. 42 0
      react/react初阶/3.jsx属性绑定.html
  4. 23 0
      react/react初阶/4.jsx属性绑定.html
  5. 18 0
      react/react初阶/默认.html

BIN
react/react初阶/1.jpg
View File


+ 32 - 0
react/react初阶/2.jsx数据绑定.html
View File 

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

+ 42 - 0
react/react初阶/3.jsx属性绑定.html
View File 

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

+ 23 - 0
react/react初阶/4.jsx属性绑定.html
View File 

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

+ 18 - 0
react/react初阶/默认.html
View File 

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