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

React：jsx动态绑定属性&组件创建

大侠 2 years ago
parent
9b366bd5ea
commit
ced7510aaa
4 changed files with 126 additions and 0 deletions
Split View Show Diff Stats
  1. 23 0
      15_React/day-1/code/4.jsx：动态绑定属性.html
  2. 47 0
      15_React/day-1/code/5.jsx：样式绑定.html
  3. 48 0
      15_React/day-1/code/6.组件创建.html
  4. 8 0
      15_React/day-1/code/common.css

+ 23 - 0
15_React/day-1/code/4.jsx：动态绑定属性.html
View File 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <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.querySelector('#root'));
 
+
 
+      let imgUrl = './5.jpeg';
 
+      let element = <img src={imgUrl} alt="又一个美女" />;
 
+
 
+      root.render(element);
 
+    </script>
 
+  </body>
 
+</html>

+ 47 - 0
15_React/day-1/code/5.jsx：样式绑定.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <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>
 
+    <link rel="stylesheet" href="./common.css" />
 
+  </head>
 
+  <body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+      const root = ReactDOM.createRoot(document.querySelector('#root'));
 
+
 
+      let isRed = false;
 
+
 
+      // let element = (
 
+      //   <div className={(isRed ? 'red' : 'blue') + ' title'}>
 
+      //     <p>123</p>
 
+      //   </div>
 
+      // );
 
+
 
+      let element = (
 
+        <div className={{}}>
 
+          <p>123</p>
 
+        </div>
 
+      );
 
+
 
+      // let element = (
 
+      //   <div
 
+      //     style={{
 
+      //       color: 'red',
 
+      //       fontSize: '20px',
 
+      //       fontWeight: 700,
 
+      //     }}
 
+      //   >
 
+      //     <p>123</p>
 
+      //   </div>
 
+      // );
 
+
 
+      root.render(element);
 
+    </script>
 
+  </body>
 
+</html>

+ 48 - 0
15_React/day-1/code/6.组件创建.html
View File 

@@ -0,0 +1,48 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <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.querySelector('#root'));
 
+
 
+      // 在React中组件 有两种实现方式
 
+      // 1. 函数组件
 
+      // 所有组件的名字 都必须 是 大驼峰（帕斯卡命名法）PascalCase
 
+      // 返回 组件最终的呈现效果(必须是一个单根元素)
 
+      // function Greeting() {
 
+      //   return (
 
+      //     <div style={{ color: 'hotpink' }}>
 
+      //       <h1>Hello, React.</h1>{' '}
 
+      //     </div>
 
+      //   );
 
+      // }
 
+
 
+      //  2. 类组件
 
+      // a:必须继承 React.Component 类
 
+      // b:必须定义render实例方法，用于返回组件最终呈现的效果
 
+      class Greeting extends React.Component {
 
+        //
 
+        render() {
 
+          return (
 
+            <div style={{ color: 'red' }}>
 
+              <h1>Hello, React.</h1>{' '}
 
+            </div>
 
+          );
 
+        }
 
+      }
 
+
 
+      let element = <Greeting />;
 
+
 
+      root.render(element);
 
+    </script>
 
+  </body>
 
+</html>

+ 8 - 0
15_React/day-1/code/common.css
View File 

@@ -3,3 +3,11 @@
 
   font-weight: 700;
 
   color: hotpink;
 
 }
 
+
 
+.red {
 
+  color: red;
 
+}
 
+
 
+.blue {
 
+  color: blue;
 
+}