首页 发现 帮助
登录
Testaccount
/
1.Test
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

'react第二天'

machen 1 年之前
父节点
305b9af302
当前提交
766c110f64
共有 14 个文件被更改，包括 400 次插入 和 101 次删除
分列视图 显示文件统计
  1. 4 6
      machen/react/day1/1.初识react.html
  2. 35 0
      machen/react/day1/2.数据渲染.html
  3. 0 37
      machen/react/day1/3.html
  4. 39 0
      machen/react/day1/3.绑定属性.html
  5. 0 46
      machen/react/day1/4.html
  6. 42 0
      machen/react/day1/4.绑定样式.html
  7. 36 0
      machen/react/day2/1.事件处理.html
  8. 37 0
      machen/react/day2/2.事件处理.html
  9. 43 0
      machen/react/day2/3.事件处理.html
  10. 10 12
      machen/react/day2/4.事件处理.html
  11. 35 0
      machen/react/day2/5.函数组件.html
  12. 49 0
      machen/react/day2/6.props.html
  13. 23 0
      machen/react/day2/7.类组件.html
  14. 47 0
      machen/react/day2/8.state.html

+ 4 - 6
machen/react/day1/1.html → machen/react/day1/1.初识react.html
查看文件 

@@ -9,13 +9,11 @@
 
   <script src="../js/react-dom.development.js"></script>
 
 </head>
 
 <body>
 
-  <div>
 
-    <div id="root"></div>
 
-  </div> 
+  <div id="root"></div>
 
   <script type="text/babel">
 
-    const s = <p>我用react</p>
 
-    const getRoot = document.getElementById('root')
 
-    ReactDOM.createRoot(getRoot).render(s)
 
+    const head = <h1>这是一个标题</h1>
 
+    const root = document.getElementById('root')
 
+    ReactDOM.createRoot(root).render(head)
 
   </script>
 
 </body>
 
 </html>

+ 35 - 0
machen/react/day1/2.数据渲染.html
查看文件 

@@ -0,0 +1,35 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    let rain = '雨天'
 
+    let userName = {
 
+      firstName: '张',
 
+      lastName: '三'
 
+    }
 
+    function getName(userName) {
 
+      return `${userName.firstName} ${userName.lastName}`
 
+    }
 
+    function name() {
 
+      return 'name'
 
+    }
 
+    const paragraph = (
 
+      <div>
 
+        <p>这是一个段落{rain}---{1+1}---{true+1}--{false}--{true}</p>
 
+        <p>这是第二个段落{userName.firstName}---{getName(userName)}---{name()}</p>
 
+      </div>
 
+    )
 
+    const root = document.getElementById('root')
 
+    ReactDOM.createRoot(root).render(paragraph)
 
+  </script>
 
+<body>
 
+</html>

+ 0 - 37
machen/react/day1/3.html
查看文件 

@@ -1,37 +0,0 @@
 
-<!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="../js/babel.min.js"></script>
 
-  <script src="../js/react.development.js"></script>
 
-  <script src="../js/react-dom.development.js"></script>
 
-  <style>
 
-    .title {
 
-      color: red;
 
-    }
 
-  </style>
 
-</head>
 
-<body>
 
-  <div id="root"></div> 
-  <script type="text/babel">
 
-    let element = (
 
-      <div>
 
-        {/* 绑定类名可以用'title'也可以用{'title'} */}
 
-        <h1 className={'title'}>你好</h1>
 
-        <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="sex">性别</label>  
-        <input id="sex" type="text" placeholder="请输入姓名" tabIndex="2"/>
 
-      </div>
 
-    )
 
-    let getRoot = document.getElementById('root')
 
-    ReactDOM.createRoot(getRoot).render(element)
 
-  </script>
 
-</body>
 
-</html>

+ 39 - 0
machen/react/day1/3.绑定属性.html
查看文件 

@@ -0,0 +1,39 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+  <style>
 
+    .head1 {
 
+      color: red;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    let element = (
 
+      <div>
 
+        <h1 className="head1"></h1>   
+        <div>
 
+          <label htmlFor="username">用户名</label>    
+          <input type="text" id="username" tabIndex="1"/>
 
+          <br/>
 
+          <label htmlFor="password">密码</label>    
+          <input type="password" id="password" tabIndex="3"/>
 
+          <br/>
 
+          <label htmlFor="email">邮箱</label>    
+          <input type="email" id="email" tabIndex="2"/>
 
+          <br/>
 
+        </div>
 
+      </div>
 
+    )
 
+    const root = document.getElementById('root')
 
+    ReactDOM.createRoot(root).render(element)
 
+  </script>
 
+</body>
 
+</html>

+ 0 - 46
machen/react/day1/4.html
查看文件 

@@ -1,46 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-  <meta charset="UTF-8">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>
 
-    dome
 
-  </title>
 
-  <script src="../js/babel.min.js"></script>
 
-  <script src="../js/react.development.js"></script>
 
-  <script src="../js/react-dom.development.js"></script>
 
-</head>
 
-<body>
 
-  <div id="root"></div>
 
-  <script type="text/babel">
 
-    let boxF = {
 
-      width: '500px',
 
-      height: '500px',
 
-      border: '1px solid #f00',
 
-      margin: '0 auto',
 
-      display: 'flex',
 
-      justifyContent: 'space-between',
 
-      alignItem: 'center'
 
-    }
 
-    let left = {
 
-      width: '200px',
 
-      height: '200px',
 
-      background: '#f00',
 
-      color: '#fff'
 
-    }
 
-    let box = (
 
-      <div style={boxF}>
 
-        <div style={left}>左侧盒子</div>
 
-        <div style={{
 
-          width: '200px',
 
-          height: '200px',
 
-          background: '#00f',
 
-          color: '#fff'
 
-        }}>右侧盒子</div>
 
-      </div>
 
-    )
 
-    let showPage = document.querySelector("#root")
 
-    ReactDOM.createRoot(showPage).render(box)
 
-  </script>
 
-</body>
 
-</html>

+ 42 - 0
machen/react/day1/4.绑定样式.html
查看文件 

@@ -0,0 +1,42 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    let manager = {
 
+      width: '400px',
 
+      height: '400px',
 
+      border: '1px solid #000',
 
+      margin: '0 auto',
 
+      display: 'flex',
 
+      justifyContent: 'space-between',
 
+      alignItems: 'center'
 
+    }
 
+    let left = {
 
+      width: '100px',
 
+      height: '100px',
 
+      backgroundColor: '#f00'
 
+    }
 
+    let element = (
 
+      <div style={manager}>
 
+        <div style={left}></div>   
+        <div style={{
 
+          width: '100px',
 
+          height: '100px',
 
+          backgroundColor: '#00f'
 
+        }}></div>
 
+      </div>
 
+    )
 
+    const root = document.getElementById('root')
 
+    ReactDOM.createRoot(root).render(element)
 
+  </script>
 
+</body>
 
+</html>

+ 36 - 0
machen/react/day2/1.事件处理.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    function handleClick() {
 
+      console.log('点击事件')
 
+    }
 
+    function handleChange(event) {
 
+      console.log(event.target.value)
 
+    }
 
+    function handleSubmit(event) {
 
+      console.log('提交')
 
+    }
 
+    let element = (
 
+      <div>
 
+        <button onClick={handleClick}>点击按钮</button>   
+        <br/>
 
+        <input type="text" onChange={handleChange}/>
 
+        <form onSubmit={handleSubmit}>
 
+          <button>提交</button>  
+        </form>
 
+      </div>
 
+    )
 
+    ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+  </script>
 
+</body>
 
+</html>

+ 37 - 0
machen/react/day2/2.事件处理.html
查看文件 

@@ -0,0 +1,37 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    function handleClick() {
 
+      console.log('点击事件')
 
+    }
 
+    function handleChange(event) {
 
+      console.log(event.target.value)
 
+    }
 
+    function handleSubmit(event) {
 
+      event.preventDefault()
 
+      console.log('提交')
 
+    }
 
+    let element = (
 
+      <div>
 
+        <button onClick={handleClick}>点击按钮</button>   
+        <br/>
 
+        <input type="text" onChange={handleChange}/>
 
+        <form onSubmit={handleSubmit}>
 
+          <button>提交</button>  
+        </form>
 
+      </div>
 
+    )
 
+    ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+  </script>
 
+</body>
 
+</html>

+ 43 - 0
machen/react/day2/3.事件处理.html
查看文件 

@@ -0,0 +1,43 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div> 
+  <div id="btn">这是一个按钮</div>
 
+  <script type="text/babel">
 
+    function handleClick() {
 
+      console.log(this)
 
+    }
 
+    function handleClick1(a, b) {
 
+      console.log(a, 'a')
 
+      console.log(b, 'b')
 
+    }
 
+    function handleClick2(a, b) {
 
+      console.log(a, 'a')
 
+      console.log(b, 'b')
 
+    }
 
+    function handleClick3(a, b) {
 
+      console.log(a, 'a')
 
+      console.log(b, 'b')
 
+    }
 
+    document.getElementById('btn').onclick = handleClick
 
+    var obj = {name: 'My name is Tutu'}
 
+    // let element = <div onClick={handleClick.bind(obj)}>这是第二个按钮</div>
 
+    let element = (
 
+      <div>
 
+        <p onClick={handleClick1(111, 222)}>第一个</p>
 
+        <p onClick={handleClick2.bind(111, 222)}>第二个</p>
 
+        <p onClick={handleClick3.bind(111)}>第三个</p>
 
+      </div>
 
+    )
 
+    ReactDOM.createRoot(document.querySelector('#root')).render(element)
 
+  </script>
 
+</body>
 
+</html>

+ 10 - 12
machen/react/day1/2.html → machen/react/day2/4.事件处理.html
查看文件 

@@ -11,19 +11,17 @@
 
 <body>
 
   <div id="root"></div>
 
   <script type="text/babel">
 
-    let rain = '雨天'
 
-    let username = {
 
-      firstName: '麻',
 
-      lastName: '辣'
 
+    function handleClick(e, ...params) {
 
+      console.log(this)
 
+      console.log(e.target)
 
+      console.log(...params)
 
     }
 
-
 
-    function getName(username) {
 
-      return `${username.firstName}${username.lastName}`
 
-    }
 
-
 
-    const snow = <h4>{getName(username)}</h4>
 
-    const getRoot = document.querySelector('#root')
 
-    ReactDOM.createRoot(getRoot).render(snow)
 
+    let element = (
 
+      <div onClick={e => {
 
+        handleClick(e, 1, 2, 3)
 
+      }}>事件</div>
 
+    )
 
+    ReactDOM.createRoot(document.getElementById('root')).render(element)
 
   </script>
 
 </body>
 
 </html>

+ 35 - 0
machen/react/day2/5.函数组件.html
查看文件 

@@ -0,0 +1,35 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    function New() {
 
+      return (
 
+        <div>
 
+          <h1>函数组件</h1>
 
+          {[1, 2, 3, 4]}  {/*页面显示1234*/}
 
+          {null}   {/*页面没有显示*/}
 
+          {undefined}  {/*页面没有显示*/}  
+          {false}  {/*页面没有显示*/}
 
+          {true}  {/*页面没有显示*/}
 
+          {'helloWorld'}  {/*页面显示helloWorld*/}   
+          {12345} {/*页面显示12345*/}
 
+          {/*
 
+            {{aaa: '哈哈哈'}} 报错
 
+          */}
 
+        </div>
 
+      )
 
+    }
 
+    let element = <New/>
 
+    ReactDOM.createRoot(document.getElementById('root')).render(element)
 
+  </script>
 
+</body>
 
+</html>

+ 49 - 0
machen/react/day2/6.props.html
查看文件 

@@ -0,0 +1,49 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    let fatherStyle = {
 
+      border: '1px solid #000',
 
+      padding: '10px'
 
+    }
 
+    let sonStyle = {
 
+      border: '1px dashed #f00',
 
+      padding: '10px'
 
+    }
 
+    function Father() {
 
+      return (
 
+        <div style={fatherStyle}>
 
+          <p>我是父级标签</p>  
+          <Son name='zhangsan' age={18}/>
 
+        </div>
 
+      )
 
+    }
 
+    function Son(props) {
 
+      return (
 
+        <div style={sonStyle}>
 
+          <p>我是子级标签</p>  
+          <p>名字是{props.name}</p>
 
+          <p>年龄是{props.age}岁</p>
 
+          <button onClick={() => {
 
+            handelClick(props)
 
+          }}>打印props</button>
 
+        </div>
 
+      )
 
+    }
 
+    function handelClick(props) {
 
+      console.log('props', props)
 
+    }
 
+    let element = <Father/>
 
+    ReactDOM.createRoot(document.querySelector('#root')).render(element)
 
+  </script>
 
+</body>
 
+</html>

+ 23 - 0
machen/react/day2/7.类组件.html
查看文件 

@@ -0,0 +1,23 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    class MyComponent extends React.Component {
 
+      render() {
 
+        return <h1>我是类组件</h1>
 
+      }
 
+    }
 
+    let elem = <MyComponent/>
 
+    ReactDOM.createRoot(document.getElementById('root')).render(elem)
 
+  </script>
 
+</body>
 
+</html>

+ 47 - 0
machen/react/day2/8.state.html
查看文件 

@@ -0,0 +1,47 @@
 
+<!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="../js/babel.min.js"></script>
 
+  <script src="../js/react.development.js"></script>
 
+  <script src="../js/react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+  <div id="root"></div>
 
+  <script type="text/babel">
 
+    class MyComponent extends React.Component {
 
+      state = {
 
+        title: '',
 
+        count: 0
 
+      }
 
+      handleAdd() {
 
+        this.setState({
 
+          count: this.state.count + 1
 
+        })
 
+      }
 
+      printCount() {
 
+        console.log(this.state.count)
 
+      }
 
+      handleReduce = () => {
 
+        this.setState({
 
+          count: this.state.count - 1
 
+        })
 
+      }
 
+      render() {
 
+        return (
 
+          <div>
 
+            <h1>{this.state.title}</h1>  
+            <p>当前数值: {this.state.count}</p>
 
+            <button onClick={this.handleAdd.bind(this)}>+</button>
 
+            <button onClick={this.handleReduce}>-</button>
 
+          </div>
 
+        )
 
+      }
 
+    }
 
+    let element = <MyComponent/>
 
+    ReactDOM.createRoot(document.querySelector('#root')).render(element)
 
+    </script>
 
+</body>
 
+</html>