2 yıl önce · 1d94d9aa4e
--- a/20_React.js_VIP22/React.js快速进坑.md
+++ b/20_React.js_VIP22/React.js快速进坑.md
@@ -60,6 +60,71 @@
 
				 
			
 
				 ## 3. JSX
			
 
				 
			
 
				+> 形似 `<h1>Hello, World.</h1>`这样的语法，看着 既不是 HTML 标签， 也不是 JS中数据类型。它就是 `jsx`.
			
 
				+
			
 
				+### 3.1 渲染数据
			
 
				+
			
 
				+在React中，可以使用`{}`将一个JS表达式的值 绑定到 JSX 中。
			
 
				+
			
 
				+```jsx
			
 
				+let username = 'guoguo';
			
 
				+// 在React中可以使用 "{}" 去 在jsx中渲染数据
			
 
				+// 在"{js表达式}"中，编写的是 JS表达式。类似与 Vue的插值语法"{{}}"
			
 
				+let element = <h3>Hello, {username}.</h3>; // <h3>Hello, daxia.</h3>
			
 
				+
			
 
				+```
			
 
				+
			
 
				+### 3.2 绑定属性
			
 
				+
			
 
				+> 在开发UI时，jsx的操作会像HTML标签那样去指定各种属性。
			
 
				+
			
 
				+**由于 JSX 最终会被 babel 转译成 JS对象。因此JSX的属性命名规则要遵从JS规范。**
			
 
				+
			
 
				+- 不能使用js中关键字后者保留字
			
 
				+- 属性名字 推荐使用 驼峰命名法 camelCase
			
 
				+
			
 
				+实现时注意以下几点：
			
 
				+
			
 
				+1. 那些是关键字或保留字的HTML属性需要改名：for => htmlFor; class => className
			
 
				+2. 那些包含多个单词的HTML属性需要转换成驼峰命名：rowspan =>rowSpan; colspan => colSpan; ...
			
 
				+3. 剩下那些就无需改变，直接可以使用。
			
 
				+
			
 
				+```jsx
			
 
				+// let element = (
			
 
				+//   <h3 id="hello" className="h3-red">
			
 
				+//     Hello, React.
			
 
				+//   </h3>
			
 
				+// );
			
 
				+/**
			
 
				+ *! 1. jsx元素必须闭合
			
 
				+ *! 2. 在jsx中注释内容的话 需要使用 绑定语法
			
 
				+ */
			
 
				+let element = (
			
 
				+  <div>
			
 
				+    <label htmlFor="name">姓名：</label>
			
 
				+    {/* jsx元素必须闭合*/}
			
 
				+    <input id="name" type="text" placeholder="输入姓名..." tabIndex="1" />
			
 
				+    <br />
			
 
				+    <label htmlFor="xueli">学历：</label>
			
 
				+    <input
			
 
				+      id="xueli"
			
 
				+      type="text"
			
 
				+      placeholder="输入学历..."
			
 
				+      tabIndex="3"
			
 
				+    />
			
 
				+    <input type="text" placeholder="干扰..." tabIndex="2" />
			
 
				+  </div>
			
 
				+);
			
 
				+
			
 
				+ReactDOM.createRoot(document.getElementById('root')).render(element);
			
 
				+```
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				 ## 4. 事件处理
			
 
				 
			
 
				 ##  5. 组件
			
--- a/20_React.js_VIP22/day-1/code/2.jsx-数据渲染.html
+++ b/20_React.js_VIP22/day-1/code/2.jsx-数据渲染.html
@@ -0,0 +1,38 @@
 
				+<!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>JSX-数据渲染</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">
			
 
				+      // let username = 'guoguo';
			
 
				+      // 1、数据渲染 在React中可以使用 "{}" 去 在jsx中渲染数据
			
 
				+      // 在"{js表达式}"中，编写的是 JS表达式。类似与 Vue的插值语法"{{}}" 但是作用域不同
			
 
				+      // let element = <h3>Hello, {username}.</h3>;
			
 
				+      // <h3>Hello, daxia.</h3>
			
 
				+
			
 
				+      // let element = <h3>Hello, {username + ' 大佬'}.</h3>;
			
 
				+
			
 
				+      // let user = {
			
 
				+      //   firstName: '郭',
			
 
				+      //   lastName: '靖',
			
 
				+      // };
			
 
				+      // function formatUser(user) {
			
 
				+      //   return `${user.firstName} ${user.lastName}`;
			
 
				+      // }
			
 
				+      // let element = <h3>Hello, {formatUser(user)}.</h3>;
			
 
				+
			
 
				+      let element = <h3>1 + 1 = {1 + 1}</h3>;
			
 
				+
			
 
				+      const root = ReactDOM.createRoot(document.querySelector('#root'));
			
 
				+      root.render(element);
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/20_React.js_VIP22/day-1/code/3.jsx-绑定属性.html
+++ b/20_React.js_VIP22/day-1/code/3.jsx-绑定属性.html
@@ -0,0 +1,54 @@
 
				+<!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>jsx-绑定属性</title>
			
 
				+    <script src="../babel.min.js"></script>
			
 
				+    <script src="../react.development.js"></script>
			
 
				+    <script src="../react-dom.development.js"></script>
			
 
				+    <style>
			
 
				+      .h3-red {
			
 
				+        color: red;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="root"></div>
			
 
				+
			
 
				+    <script type="text/babel">
			
 
				+      // 在开发UI时，jsx的操作会像HTML标签那样去指定各种属性。
			
 
				+      // 那么 如果可以的话 JSX 属性绑定是怎样的
			
 
				+      // let element = (
			
 
				+      //   <h3 id="hello" className="h3-red">
			
 
				+      //     Hello, React.
			
 
				+      //   </h3>
			
 
				+      // );
			
 
				+
			
 
				+      /**
			
 
				+       *! 1. jsx元素必须闭合
			
 
				+       *! 2. 在jsx中注释内容的话 需要使用 绑定语法
			
 
				+       */
			
 
				+
			
 
				+      let element = (
			
 
				+        <div>
			
 
				+          <label htmlFor="name">姓名：</label>
			
 
				+          {/* jsx元素必须闭合*/}
			
 
				+          <input id="name" type="text" placeholder="输入姓名..." tabIndex="1" />
			
 
				+          <br />
			
 
				+          <label htmlFor="xueli">学历：</label>
			
 
				+          <input
			
 
				+            id="xueli"
			
 
				+            type="text"
			
 
				+            placeholder="输入学历..."
			
 
				+            tabIndex="3"
			
 
				+          />
			
 
				+          <input type="text" placeholder="干扰..." tabIndex="2" />
			
 
				+        </div>
			
 
				+      );
			
 
				+
			
 
				+      ReactDOM.createRoot(document.getElementById('root')).render(element);
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>
			
--- a/20_React.js_VIP22/day-1/code/4.jsx-style属性.html
+++ b/20_React.js_VIP22/day-1/code/4.jsx-style属性.html
@@ -0,0 +1,61 @@
 
				+<!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>jsx-行内样式</title>
			
 
				+    <script src="../babel.min.js"></script>
			
 
				+    <script src="../react.development.js"></script>
			
 
				+    <script src="../react-dom.development.js"></script>
			
 
				+    <style>
			
 
				+      .red {
			
 
				+        color: red;
			
 
				+      }
			
 
				+
			
 
				+      .blue {
			
 
				+        color: blue;
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <div id="root"></div>
			
 
				+
			
 
				+    <script type="text/babel">
			
 
				+      // style属性 在jsx中不能是string类型。必须是 对象object。
			
 
				+      let styles = {
			
 
				+        width: '500px',
			
 
				+        height: '500px',
			
 
				+        border: '1px solid red',
			
 
				+        margin: '0 auto',
			
 
				+        display: 'flex',
			
 
				+        justifyContent: 'space-around',
			
 
				+        alignItems: 'center',
			
 
				+        flexWrap: 'nowrap',
			
 
				+      };
			
 
				+
			
 
				+      let element = (
			
 
				+        <div style={styles}>
			
 
				+          <div
			
 
				+            style={{
			
 
				+              width: '200px',
			
 
				+              height: '200px',
			
 
				+              backgroundColor: 'red',
			
 
				+            }}
			
 
				+          ></div>
			
 
				+          <div
			
 
				+            style={{
			
 
				+              width: '200px',
			
 
				+              height: '200px',
			
 
				+              backgroundColor: 'blue',
			
 
				+            }}
			
 
				+          >
			
 
				+            <div className={'red'}>我是最牛X的</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      );
			
 
				+
			
 
				+      ReactDOM.createRoot(document.getElementById('root')).render(element);
			
 
				+    </script>
			
 
				+  </body>
			
 
				+</html>