首頁 探索 說明
登入
lovecoding
/
VIP20
6
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

React day1-jsx

daxia 2 年之前
父節點
e8766f8e8c
當前提交
1d94d9aa4e
共有 4 個文件被更改，包括 218 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 65 0
      20_React.js_VIP22/React.js快速进坑.md
  2. 38 0
      20_React.js_VIP22/day-1/code/2.jsx-数据渲染.html
  3. 54 0
      20_React.js_VIP22/day-1/code/3.jsx-绑定属性.html
  4. 61 0
      20_React.js_VIP22/day-1/code/4.jsx-style属性.html

+ 65 - 0
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. 组件

+ 38 - 0
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>

+ 54 - 0
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>

+ 61 - 0
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>