1 year ago · a039b6a5ee
--- a/react/1.认识.html
+++ b/react/1.认识.html
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+    <head>
			
 
				+        <title></title>
			
 
				+        <meta charset="UTF-8">
			
 
				+        <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+        <!-- 将jsx转为js -->
			
 
				+        <script src="./babel.min.js"></script>
			
 
				+        <!-- react核心库 -->
			
 
				+        <script src="./react.development.js"></script>
			
 
				+        <!-- react中dom操作库 -->
			
 
				+        <script src="./react-dom.development.js"></script>
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <!-- 
			
 
				+            React:用于构建web与原生交互界面的库
			
 
				+            vue和react区别：
			
 
				+                vue.js => 偏向于html扩展
			
 
				+                react.js => 偏向于javascript扩展
			
 
				+
			
 
				+        vue:
			
 
				+            1.直接引入vue第三方库
			
 
				+            2.vue ui去创建
			
 
				+            3.vue create 项目名
			
 
				+        
			
 
				+        react:
			
 
				+            1.通过第三方库引入
			
 
				+
			
 
				+         -->
			
 
				+        <div id="root"></div>
			
 
				+        <!-- type="text/babel"
			
 
				+            告诉babel库 将jsx转成js
			
 
				+         -->
			
 
				+        <script type="text/babel">
			
 
				+            // 需求：将标签渲染到页面中
			
 
				+            //1.创建标签 
			
 
				+          const snow = <h1>今天下大雪</h1>;
			
 
				+            // 2.获取渲染位置
			
 
				+          const getRoot = document.getElementById("root");
			
 
				+            // 3.将新标签渲染到页面上
			
 
				+            // ReactDOM.createRoot(指定渲染页面) 
			
 
				+            // render(渲染的内容)
			
 
				+            ReactDOM.createRoot(getRoot).render(snow);
			
 
				+        </script>
			
 
				+
			
 
				+    </body>
			
 
				+</html>
			
--- a/react/2.jsx-数据渲染.html
+++ b/react/2.jsx-数据渲染.html
@@ -0,0 +1,34 @@
 
				+<!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>
			
 
				+    <!-- 
			
 
				+        vue 动态渲染 {{}} 模板语法
			
 
				+        react 表达式 {} 可以做运算
			
 
				+     -->
			
 
				+    <script type="text/babel">
			
 
				+        let rain = '雨天';
			
 
				+        let userName = {
			
 
				+            fistName:'火',
			
 
				+            lastName:'锅'
			
 
				+        }
			
 
				+
			
 
				+        // const snow = <h3>明天休息,但是有可能{false + 1 + 'hello' + userName.fistName}</h3>;
			
 
				+        // const snow = <h3>明天休息,但是有可能{rain}</h3>;
			
 
				+        function getName(userName) {
			
 
				+            return `${userName.fistName} ${userName.lastName}`
			
 
				+        }
			
 
				+        const snow = <h4>{getName(userName)}</h4>;
			
 
				+        const getRoot = document.querySelector("#root");
			
 
				+        ReactDOM.createRoot(getRoot).render(snow);
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/react/3.jsx-绑定属性
+++ b/react/3.jsx-绑定属性
@@ -0,0 +1,20 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+    <head>
			
 
				+        <title></title>
			
 
				+        <meta charset="UTF-8">
			
 
				+        <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+        <!-- 将jsx转为js -->
			
 
				+        <script src="./babel.min.js"></script>
			
 
				+        <!-- react核心库 -->
			
 
				+        <script src="./react.development.js"></script>
			
 
				+        <!-- react中dom操作库 -->
			
 
				+        <script src="./react-dom.development.js"></script>
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <div id="root"></div>
			
 
				+        <script type="text/babel">
			
 
				+        </script>
			
 
				+
			
 
				+    </body>
			
 
				+</html>
			
--- a/react/3.jsx-绑定属性.html
+++ b/react/3.jsx-绑定属性.html
@@ -0,0 +1,55 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+    <head>
			
 
				+        <title></title>
			
 
				+        <meta charset="UTF-8">
			
 
				+        <meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+        <!-- 将jsx转为js -->
			
 
				+        <script src="./babel.min.js"></script>
			
 
				+        <!-- react核心库 -->
			
 
				+        <script src="./react.development.js"></script>
			
 
				+        <!-- react中dom操作库 -->
			
 
				+        <script src="./react-dom.development.js"></script>
			
 
				+        <style>
			
 
				+            .title {
			
 
				+                color: red;
			
 
				+            }
			
 
				+        </style>
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <div id="root"></div>
			
 
				+        <!-- 
			
 
				+            注意：
			
 
				+            for => htmlFor
			
 
				+            class => className
			
 
				+            jsx中 所有标签 必须闭合
			
 
				+            jsx中的注释：
			
 
				+                {/* 这里写注释内容 */}
			
 
				+         -->
			
 
				+         <!-- 
			
 
				+            label中的for的名称
			
 
				+            与input框中的id名字相同 就可以实现点击label内容input实现聚焦
			
 
				+            input中 tabIndex属性可以操控tab键下的顺序
			
 
				+          -->
			
 
				+        <script type="text/babel">
			
 
				+            // let element = <h3 className='title'>你好</h3>;
			
 
				+            let element = (
			
 
				+                <div>
			
 
				+                    {/*今天天气真好*/}
			
 
				+                    <label htmlFor="same">姓名</label>
			
 
				+                    <input id="same" type="text" placeholder='请输入姓名' tabIndex='1' />
			
 
				+                    <br/>
			
 
				+                    <label htmlFor="age">年龄</label>
			
 
				+                    <input id="age" type="text" placeholder='请输入年龄' tabIndex='3' />
			
 
				+                    <br/>
			
 
				+                    <label htmlFor="address">地址</label>
			
 
				+                    <input id="address" type="text" placeholder='请输入地址' tabIndex='2' />
			
 
				+                    <br/>
			
 
				+                </div>
			
 
				+            )
			
 
				+            let getRoot = document.getElementById("root");
			
 
				+            ReactDOM.createRoot(getRoot).render(element);
			
 
				+        </script>
			
 
				+
			
 
				+    </body>
			
 
				+</html>
			
--- a/react/准备.txt
+++ b/react/准备.txt
@@ -2,7 +2,5 @@ react 是react核心库，只要使用react就必须要引入
 
				 下载地址：https://unpkg.com/react@18.0.0/umd/react.development.js
			
 
				 react-dom 是react的dom包，使用react开发web应用时必须引入
			
 
				 下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.jsbabel.min.js
			
 
				-
			
 
				 由于JSX最终需要转换为JS代码执行，所以浏览器并不能正常识别JSX，所以当我们在浏览器中直接使用JSX时，还必须引入babel来完成对代码的编译。
			
 
				-
			
 
				 babel下载地址：https://unpkg.com/babel-standalone@6/babel.min.js