xx

B/1/P01.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: chenxuan
  * @Date: 2021-12-23 21:52:33
- * @LastEditTime: 2021-12-23 23:44:20
+ * @LastEditTime: 2022-01-01 18:51:47
  * @LastEditors: chenxuan
 -->
 <!DOCTYPE html>
@@ -18,9 +18,9 @@
 </head>
 <body>
 	<div id="app"></div>
-	<script src="./package/old/react.development.js"></script>
+	<script src="../package/old/react.development.js"></script>
-    <script src="./package/old/react-dom.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
-    <script src="./package/old/babel.min.js"></script>
+    <script src="../package/old/babel.min.js"></script>
     <script type="text/babel">
     	const text="hello world!";
     	const vdom=(

B/1/P02.html

@@ -16,9 +16,9 @@
     <div id="app">
 
     </div>
-    <script src="./package/old/react.development.js"></script>
+    <script src="../package/old/react.development.js"></script>
-    <script src="./package/old/react-dom.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
-    <script src="./package/old/babel.min.js"></script>
+    <script src="../package/old/babel.min.js"></script>
     <script type="text/babel">
         function App(){
             return (

B/1/P03.html

@@ -13,9 +13,9 @@
 </head>
 <body>
 	<div id="app"></div>
-	<script src="./package/old/react.development.js"></script>
+	<script src="../package/old/react.development.js"></script>
-    <script src="./package/old/react-dom.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
-    <script src="./package/old/babel.min.js"></script>
+    <script src="../package/old/babel.min.js"></script>
     <script type="text/babel">
     	const data=['angular','vue','React'];
 		const vm=(

B/1/P05.html

@@ -13,9 +13,9 @@
 </head>
 <body>
 	<div id="app"></div>
-	<script src="./package/old/react.development.js"></script>
+	<script src="../package/old/react.development.js"></script>
-    <script src="./package/old/react-dom.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
-    <script src="./package/old/babel.min.js"></script>
+    <script src="../package/old/babel.min.js"></script>
     <script type="text/babel">
     	class Mycomponent extends React.Component{
 			render(){

B/1/P06.html

@@ -13,9 +13,9 @@
 </head>
 <body>
 	<div id="app"></div>
-	<script src="./package/old/react.development.js"></script>
+	<script src="../package/old/react.development.js"></script>
-    <script src="./package/old/react-dom.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
-    <script src="./package/old/babel.min.js"></script>
+    <script src="../package/old/babel.min.js"></script>
     <script type="text/babel">
     	class Weather extends React.Component{
 			constructor(props){

B/1/P07.html

@@ -1,7 +1,7 @@
 <!--
  * @Author: chenxuan
  * @Date: 2021-12-31 00:08:42
- * @LastEditTime: 2021-12-31 00:11:18
+ * @LastEditTime: 2022-01-01 15:57:12
  * @LastEditors: chenxuan
 -->
 <!DOCTYPE html>
@@ -9,13 +9,13 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<title>state</title>
+	<title>state简写</title>
 </head>
 <body>
 	<div id="app"></div>
-	<script src="./package/old/react.development.js"></script>
+	<script src="../package/old/react.development.js"></script>
-    <script src="./package/old/react-dom.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
-    <script src="./package/old/babel.min.js"></script>
+    <script src="../package/old/babel.min.js"></script>
     <script type="text/babel">
     	class Weather extends React.Component{
             state={ishot:true}

B/1/P08.html

@@ -0,0 +1,51 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-01 14:00:24
+ * @LastEditTime: 2022-01-01 22:27:36
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>props限制和默认值</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+	<script src="../package/old/prop-types.js"></script>
+    <script type="text/babel">
+    	class Person extends React.Component{
+			render(){
+				const {name,sex,age}=this.props
+				return(
+					<ul>
+						<li>姓名：{name+1}</li>
+						<li>性别：{sex}</li>
+						<li>年龄：{age}</li>
+					</ul>
+				)
+			}
+		}
+		// 
+		Person.propTypes = {
+			name:PropTypes.string.isRequired, //限制name必传，且为字符串
+			sex:PropTypes.string,//限制sex为字符串
+			age:PropTypes.number,//限制age为数值
+			speak:PropTypes.func
+		}
+		Person.defaultProps={
+			name:"xxxx",
+			sex:"xxxx",
+			age:999
+		}
+		function speak(){
+			console.log('我说话了');
+		}
+		ReactDOM.render(<Person name="陈轩" age={18} sex="男" speak={speak}/>,document.getElementById('app'))
+    </script>
+</body>
+</html>

B/1/P09.html

@@ -0,0 +1,51 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-01 20:04:49
+ * @LastEditTime: 2022-01-01 22:41:50
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>props限制和默认值</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+	<script src="../package/old/prop-types.js"></script>
+    <script type="text/babel">
+    	class Person extends React.Component{
+			static propTypes = {
+				name:PropTypes.string.isRequired, //限制name必传，且为字符串
+				sex:PropTypes.string,//限制sex为字符串
+				age:PropTypes.number,//限制age为数值
+				speak:PropTypes.func
+			}
+			static defaultProps={
+				name:"xxxx",
+				sex:"xxxx",
+				age:999
+			}
+			render(){
+				const {name,sex,age}=this.props
+				return(
+					<ul>
+						<li>姓名：{name+1}</li>
+						<li>性别：{sex}</li>
+						<li>年龄：{age}</li>
+					</ul>
+				)
+			}
+		}
+		
+		function speak(){
+			console.log('我说话了');
+		}
+		ReactDOM.render(<Person name="陈轩" age={18} sex="男" speak={speak}/>,document.getElementById('app'))
+    </script>
+</body>
+</html>

B/1/P10.html

@@ -0,0 +1,48 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-02 13:37:37
+ * @LastEditTime: 2022-01-02 15:04:53
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>函数式组件props</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+	<script src="../package/old/prop-types.js"></script>
+    <script type="text/babel">
+    	function Person(props){
+            const {name,sex,age}=props
+				return(
+					<ul>
+						<li>姓名：{name+1}</li>
+						<li>性别：{sex}</li>
+						<li>年龄：{age}</li>
+					</ul>
+				)
+		}
+		Person.propTypes = {
+            name:PropTypes.string.isRequired, //限制name必传，且为字符串
+            sex:PropTypes.string,//限制sex为字符串
+            age:PropTypes.number,//限制age为数值
+            speak:PropTypes.func
+        }
+        Person.defaultProps={
+            name:"xxxx",
+            sex:"xxxx",
+            age:999
+        }
+		function speak(){
+			console.log('我说话了');
+		}
+		ReactDOM.render(<Person name="陈轩" age={18} sex="男" speak={speak}/>,document.getElementById('app'))
+    </script>
+</body>
+</html>

B/1/read.text

@@ -0,0 +1,8 @@
+1、虚拟dom
+2、jsx语法
+3、组件与模块
+4、函数式组件
+5、类式组件
+6、state
+7、props(标签属性)
+8、函数式组件props

B/2/P01.html

@@ -0,0 +1,38 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-02 15:24:10
+ * @LastEditTime: 2022-01-02 19:52:21
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>字符串形式的refs属性</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+    <script type="text/babel">
+    	class Demo extends React.Component{
+            haha=()=>{
+                alert(this.refs.haha.value)
+            }
+            render(){
+                return(
+                    <div>
+                        <input type="text" ref="haha"/>
+                        <button  onClick={this.haha}>点我</button>
+                    </div>
+                )
+            }
+        }
+        ReactDOM.render(
+            <Demo/>,document.getElementById('app')
+        )
+    </script>
+</body>
+</html>

B/2/P02.html

@@ -0,0 +1,40 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-02 21:23:11
+ * @LastEditTime: 2022-01-02 22:31:28
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>回调函数形式的refs属性</title>
+</head>
+<body>
+	<div id="app"></div>
+	<script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+    <script type="text/babel">
+    	class Demo extends React.Component{
+            haha=()=>{
+                const {haha}=this;
+                alert(haha.value);
+            }
+            render(){
+                return(
+                    <div>
+                        {/*这种内联函数，更新会多次调用 时有bug */}
+                        <input type="text" ref={c=>this.haha=c}/>
+                        <button  onClick={this.haha}>点我</button>
+                    </div>
+                )
+            }
+        }
+        ReactDOM.render(
+            <Demo/>,document.getElementById('app')
+        )
+    </script>
+</body>
+</html>

B/2/P03.html

@@ -0,0 +1,49 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-02 22:09:19
+ * @LastEditTime: 2022-01-02 22:31:39
+ * @LastEditors: chenxuan
+-->
+<!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>回调函数形式的refs属性</title>
+    <script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/babel">
+        class Demo extends React.Component{
+            state={ishot:true}
+            // 这种写法，更新时不会调用
+            haha=(c)=>{
+                this.hehe=c;
+                console.log(c)
+            }
+            change=()=>{
+                const {ishot}=this.state;
+                this.setState({ishot:!ishot});
+            }
+            render(){
+                const {ishot}=this.state;
+                return(
+                    <div>
+                        <li>今天天气很{this.state.ishot ? '热':'凉快'}</li>
+                        <input type="text" ref={this.haha}/>
+                        <button onClick={this.change}>更新</button>
+                    </div>
+                )
+            }
+        }
+        ReactDOM.render(
+            <Demo/>,document.getElementById('app')
+        )
+    </script>
+    
+</body>
+</html>

B/2/P04.html

@@ -0,0 +1,41 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-02 23:49:08
+ * @LastEditTime: 2022-01-02 23:51:41
+ * @LastEditors: chenxuan
+-->
+<!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>createRef</title>
+    <script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/babel">
+        class Demo extends React.Component{
+            myef=React.createRef();
+            getValue=()=>{
+                alert(this.myef.current.value)
+            }
+            render(){
+                return(
+                    <div>
+                        <input type="text" ref={this.myef}/>
+                        <button onClick={this.getValue}>更新</button>
+                    </div>
+                )
+            }
+        }
+        ReactDOM.render(
+            <Demo/>,document.getElementById('app')
+        )
+    </script>
+    
+</body>
+</html>

B/2/read.text

@@ -0,0 +1,4 @@
+1、字符串形式的ref
+2、回调函数形式的ref
+3、ref内联函数bug
+4、

B/3/P01.html

@@ -0,0 +1,39 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-03 16:58:04
+ * @LastEditTime: 2022-01-03 18:46:40
+ * @LastEditors: chenxuan
+-->
+<!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">
+    <script src="../package/old/react.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
+    <script src="../package/old/babel.min.js"></script>
+	<script src="../package/old/prop-types.js"></script>
+    <title>事件</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="text/babel">
+        class Demo extends React.Component{
+            getValue=(e)=>{
+                alert(e.target.value)
+            }
+            render(){
+                return(
+                    <div>
+                        <input type="text" onBlur={this.getValue}/>
+                    </div>
+                )
+            }
+        }
+        ReactDOM.render(
+            <Demo/>,document.getElementById('app')
+        )
+    </script>
+</body>
+</html>

B/3/read.text

@@ -0,0 +1 @@
+1、事件

B/66.html

@@ -1,3 +1,9 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2021-12-23 21:52:33
+ * @LastEditTime: 2022-01-01 18:52:07
+ * @LastEditors: chenxuan
+-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -7,9 +13,9 @@
 </head>
 <body>
 	<div id="app"></div>
-	<script src="./package/old/react.development.js"></script>
+	<script src="../package/old/react.development.js"></script>
-    <script src="./package/old/react-dom.development.js"></script>
+    <script src="../package/old/react-dom.development.js"></script>
-    <script src="./package/old/babel.min.js"></script>
+    <script src="../package/old/babel.min.js"></script>
     <script type="text/babel">
     	
     </script>