practise

practise/01.表达式.jsx

@@ -0,0 +1,22 @@
+// 1.识别常规的变量
+var name = 'ken'
+
+// 2.原生 js 方法调用
+const getAge = () => {
+  return 20
+}
+
+// 3.三元运算符（常用）
+var flag = true
+
+function App() {
+  return (
+    <div className="App">
+      { name }
+      { getAge() }
+      { flag ? '666' : '888'}
+    </div>
+  );
+}
+
+export default App;

practise/02.列表循环渲染.jsx

@@ -0,0 +1,20 @@
+/* react如何完成列表渲染
+技术方案：map 重复渲染的是哪个模板就 return 谁
+注意事项：遍历列表同时需要一个类型为 number/string 不可重复的 key， 提高 diff 性能
+ key 仅仅在内部使用，不会出现在真实的 DOM 结构中 
+ */
+const user = [
+  { id: 1, name: 'ken', age: 20},
+  { id: 2, name: 'Luckly', age: 30},
+  { id: 3, name: 'Max', age: 40},
+]
+
+function App() {
+  return (
+    <div className="App">
+      { user.map( user => <li key={user.id}>{ user.name }{user.age}</li>)}
+    </div>
+  );
+}
+
+export default App;

practise/03.条件渲染.jsx

@@ -0,0 +1,22 @@
+// 条件渲染
+// 技术方案：三元表达式（常用）、逻辑 && 运算
+
+// 1. 三元表达式：满足条件才渲染一个 span 标签
+var flag = true
+
+//  2. 逻辑 && 运算
+
+function App() {
+  return (
+    <div className="App">
+      { flag ? <span>this is span</span> : null}
+      {/* 如果模板比较复杂，可以使用（）进行包裹 */}
+      { flag ? (<div><span>this is span</span></div>) : null}
+
+      { false && <span>666666666</span>}
+      { true && <span>666666666</span>}
+    </div>
+  );
+}
+
+export default App;

practise/04.模板精简原则.jsx

@@ -0,0 +1,31 @@
+/* 有一个状态 type  1 2 3
+1 对应 h1
+2 对应 h2
+3 对应 h3 */
+
+/* 原则：模板中的逻辑尽量保持精简
+复杂的多分支的逻辑，收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用即可 */
+
+const getTitle = (type) => {
+  if(type === 1) {
+    return <h1>h1标题</h1>
+  }
+  if(type === 2) {
+    return <h2>h2标题</h2>
+  }
+  if(type === 3) {
+    return <h3>h3标题</h3>
+  }
+}
+
+function App() {
+  return (
+    <div className="App">
+      {getTitle(1)}
+      {getTitle(2)}
+      {getTitle(3)}
+    </div>
+  );
+}
+
+export default App;

practise/05.样式控制/index.css

@@ -0,0 +1,4 @@
+.active {
+  color:aqua;
+  font-size: large;
+}

practise/05.样式控制/index.jsx

@@ -0,0 +1,25 @@
+// jsx 样式控制
+// 1.行内样式：在元素身上绑定一个 style 属性即可
+// 2.类名样式：在元素身上绑定一个 className 属性即可
+
+import './App.css'
+
+const style = {
+  fontSize: '30px',
+  color: 'blue'
+}
+
+// 动态控制类名，满足条件才有
+var styleFlag = true
+
+function App() {
+  return (
+    <div className="APP">
+      <span style={style}>6666666</span>
+
+      <span className={styleFlag ? 'active' : ''}>测试类名样式</span>
+    </div>
+  );
+}
+
+export default App;

practise/06.函数组件的创建和渲染.jsx

@@ -0,0 +1,20 @@
+// 函数组件的创建和渲染
+
+// 创建
+function Hello() {
+  return <div>Hello everbody</div>
+}
+
+function App() {
+  return (
+    <div>
+      {/* 渲染Hello组件 */}
+      {/* 第一种： */}
+      <Hello />
+      {/* 第二种  */}
+      <Hello></Hello>
+    </div>
+  )
+}
+
+export default App

practise/07.类组件的创建和渲染.jsx

@@ -0,0 +1,25 @@
+// 类组件的创建和渲染
+
+// 导入 React 包
+import React from 'react'
+
+// 创建
+class HelloComponent extends React.Component {
+  render() {
+    return <div>this is class Component</div>
+  }
+}
+
+function App() {
+  return (
+    <div>
+      {/* 渲染类组件 */}
+      {/* 第一种： */}
+      <HelloComponent />
+      {/* 第二种  */}
+      <HelloComponent></HelloComponent>
+    </div>
+  )
+}
+
+export default App

practise/08.事件绑定.jsx

@@ -0,0 +1,40 @@
+// 导入 React 包
+import React from 'react'
+
+// 函数组件的创建和渲染
+// 创建
+function Hello() {
+  // 定义事件回调函数
+  const clickHandle = () => {
+    alert('函数组件中的事件被触发了')
+  }
+  // 事件绑定
+  return <div onClick={clickHandle}>Hello everbody</div>
+}
+
+// 类组件的创建和渲染
+// 创建
+class HelloComponent extends React.Component {
+  // 事件回调函数（标准写法，可以避免this指向问题）
+  // 这样写 回调函数中的this指向的是当前的组件实例对象
+  clickHandle = () => {
+    alert('类组件中的事件被触发了')
+  }
+  render() {
+    // 事件绑定
+    return <div onClick={this.clickHandle}>this is class Component</div>
+  }
+}
+
+function App() {
+  return (
+    <div>
+      <Hello />
+      <Hello></Hello>
+      <HelloComponent />
+      <HelloComponent></HelloComponent>
+    </div>
+  )
+}
+
+export default App

practise/09.事件对象e说明.jsx

@@ -0,0 +1,28 @@
+// 函数组件的创建和渲染
+// 创建
+function Hello() {
+  // 定义事件回调函数
+  const clickHandle = (e) => {
+    // 阻止默认行为
+    e.preventDefault()
+    alert('函数组件中的事件被触发了')
+  }
+  // 事件绑定
+  return (
+    <div>
+      <a onClick={clickHandle} href="https://123.sogou.com/">
+        搜狗
+      </a>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <div>
+      <Hello />
+    </div>
+  )
+}
+
+export default App

practise/10.事件绑定传递额外参数.jsx

@@ -0,0 +1,25 @@
+/* 事件绑定传递额外参数
+如果传递自定义参数
+1.只需要一个额外参数  {clickHandler} -> {()=>clickHandler('自定义的参数')}
+2.既需要 e 也需要额外的参数  {(e)=>clickHandler(e, '自定义的参数')} */
+
+function Hello() {
+  // 定义事件回调函数
+  const clickHandler = (e, message) => {
+    console.log('函数组件中的事件被触发了', e, message)
+  }
+  // 事件绑定
+  return (
+    <div onClick={(e) => clickHandler(e, '这是一条消息')}>hello everybody</div>
+  )
+}
+
+function App() {
+  return (
+    <div>
+      <Hello />
+    </div>
+  )
+}
+
+export default App

practise/11.定义组件状态的使用.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+class TestComponent extends React.Component {
+  // 1.定义组件状态
+  state = {
+    // 在这里可以定义各种属性，全都都是当前组件的状态
+    name: 'Ken',
+  }
+  // 事件回调
+  changeName = () => {
+    // 3.修改 state 中的状态 name
+    // 注意：不可以直接做赋值修改，必须通过一个方法 setState
+    this.setState({
+      name: 'King',
+    })
+  }
+  // 2.使用状态
+  render() {
+    return (
+      <div>
+        TestComponent当前的名字为：{this.state.name}
+        <button onClick={this.changeName}>修改名字</button>
+      </div>
+    )
+  }
+}
+
+function App() {
+  return (
+    <div>
+      <TestComponent></TestComponent>
+    </div>
+  )
+}
+
+/* 总结
+1.编写组件其实就是编写原生 JS 类或者函数
+2.定义状态必须通过 state 实例属性的方法提供一个对象，名称是固定的就叫做 state
+3. 修改state中的任何属性都不可以通知直接赋值，必须走 setState 方法，这个方法来自于继承得到
+4.这里的 this 关键词很容易出现指向错误的问题，上面的写法是最推荐和最规范的，没有 this 指向问题 
+*/
+export default App

practise/12.状态修改counter案例.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+// 通过类组件修改状态的方式
+class Counter extends React.Component {
+  // 通过 state 定义组件状态
+  state = {
+    count: 0,
+  }
+
+  // 事件回调函数
+  changeCount = () => {
+    // 修改 state
+    // 在 react 体系下，“数据不可变”（就是数据不可以直接通过赋值的方式改变），要用 setState 方法
+    this.setState({
+      // count 后面的 value 值是在上一次的 count 值 + 1
+      count: this.state.count + 1,
+    })
+  }
+
+  render() {
+    return <button onClick={this.changeCount}>{this.state.count}次</button>
+  }
+}
+
+function App() {
+  return (
+    <div>
+      {/* 渲染 Counter */}
+      <Counter />
+    </div>
+  )
+}
+
+export default App

practise/13.this的指向问题.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+class Test extends React.Component {
+  // constructor 属性返回对象的构造函数,用于创建和初始化在类中创建的对象
+  constructor() {
+    super()
+    /*     第一种修正 this 指向的方法：
+    使用 bind 强行修正我们的 this 指向
+    相当于在类组件初始化的阶段，就可以把回调函数的 this 修正到
+    永远指向当前组件实例对象 */
+    this.handler = this.handler.bind(this) // 前面的 this.handler 是挂载到实例属性上，后面的 this.handler 是下面 handler() 方法
+  }
+
+  handler() {
+    // 错误演示
+    console.log(this) // 这里的 this 是 undefined
+    // this.setState 去修改数据会报错
+  }
+
+  render() {
+    return <button onClick={this.handler}>click</button>
+  }
+}
+
+function App() {
+  return <Test></Test>
+}
+
+export default App

practise/14.this的指向问题.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+class Test extends React.Component {
+  handler() {
+    // 错误演示
+    console.log(this) // 这里的 this 是 undefined
+    // this.setState 去修改数据还可以修改数据吗？ 会报错
+  }
+
+  render() {
+    /* render 函数中的 this 已经被 react 内部做了修正
+        这里的 this 就是指向当前的组件实例对象
+        函数箭头中的 this 直接沿用，所以也是指向组件的实例对象 */
+    console.log('父函数中的 this 指向为：', this)
+    return (
+      /* 第二种修正方法：
+      如果不用 constructor 做修正，直接可以在事件绑定的位置通过箭头函数的写法，直接沿用父函数中的this指向也是可以的 */
+      <button onClick={() => this.handler}>click</button>
+    )
+  }
+}
+
+function App() {
+  return <Test></Test>
+}
+
+export default App

practise/15.改变数组和对象.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+class Counter extends React.Component {
+  // 定义组件状态
+  state = {
+    count: 0,
+    list: ['one', 'two', 'three'],
+    person: {
+      name: 'Ken',
+      age: 20,
+    },
+  }
+
+  clickHandler = () => {
+    this.setState({
+      count: this.state.count + 1,
+      // // 数组修改,添加数组元素
+      // list: [...this.state.list, 'four', 'five'],
+      // // 对象修改
+      // person: { ...this.state.person, name: 'King' }
+
+      // 删除 - filter
+      list: this.state.list.filter((item) => item !== 'two'),
+
+      person: { ...this.state.person, age: '' },
+    })
+  }
+
+  render() {
+    return (
+      <>
+        <ul>
+          {this.state.list.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+        <div>
+          {this.state.person.name} {this.state.person.age}岁
+        </div>
+        <div>
+          <button onClick={this.clickHandler}>{this.state.count}次</button>
+        </div>
+      </>
+    )
+  }
+}
+
+function App() {
+  return <Counter></Counter>
+}
+
+export default App

practise/16.受控组件.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+class Counter extends React.Component {
+  // 1.声明用来控制 input value 的 react 组件自己的状态
+  state = {
+    message: 'this is message',
+  }
+
+  // 回调函数
+  inputChange = (e) => {
+    console.log('change事件触发了', e)
+    // 4.拿到输入框最新的值，交给 state 中的 message
+    this.setState({
+      message: e.target.value,
+    })
+  }
+
+  // 产出 UI 模板结构
+  render() {
+    return (
+      // 2.给 input 框的 value 属性绑定 react state
+      // 3.给 input 框绑定一个 change 的事件，为了拿到当前输入框中的数据
+      <input
+        type="text"
+        value={this.state.message}
+        onChange={this.inputChange}
+      />
+    )
+  }
+}
+
+function App() {
+  return <Counter></Counter>
+}
+
+export default App

practise/17.非受控组价.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { createRef } from 'react'
+
+class Input extends React.Component {
+  // 这个实例属性是可以定义的，语义化即可
+  // createRef() 调用后可以返回一个容器,该容器可以存储被 ref 所表示的节点 就是说 input 这个 DOM 放在了 myRef 这个属性上
+  msgRef = createRef()
+
+  getValue = () => {
+    // current.value 是指当前的 value 值
+    console.log(this.msgRef.current.value)
+  }
+
+  render() {
+    return (
+      <>
+        {/* 通过 ref 属性获取 msgRef */}
+        <input type="text" ref={this.msgRef} />
+        <button onClick={this.getValue}>获取输入框的值</button>
+      </>
+    )
+  }
+}
+
+function App() {
+  return <Input></Input>
+}
+
+export default App

practise/18.父传子通信.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+// App 为父组件，Son 为子组件
+
+// 函数式的 Son
+function SonF(props) {
+  // props 是一个对象，里面存着通过父组件传入的所有数据
+  return <div>函数子组件，{props.msg}</div>
+}
+
+// 类组件的 Son
+class SonC extends React.Component {
+  render() {
+    return (
+      // 类组件必须通过 this 关键词去获取,这里的 props 是固定的
+      <div>类子组件，{this.props.msg}</div>
+    )
+  }
+}
+
+// 类组件的 App
+class App extends React.Component {
+  // 准备数据
+  state = {
+    message: 'this is message',
+  }
+  render() {
+    return (
+      <div>
+        {/* 在子组件身上绑定属性，属性名可以自定义，保持语义化 */}
+        <SonF msg={this.state.message} />
+        {/* msg 是属性 */}
+        <SonC msg={this.state.message} />
+      </div>
+    )
+  }
+}
+
+export default App

practise/19.props说明.jsx

@@ -0,0 +1,55 @@
+import React from "react"
+// App 为父组件，Son 为子组件
+
+// 函数式的 Son
+function SonF (props) {
+  // props 是一个对象，里面存着通过父组件传入的所有数据
+  return (
+    <div>函数子组件，
+      {/* 数组传递：尽量不要直接传递数组，数组用来遍历的，不要当成字符串来渲染
+        <div>函数子组件，{props.list}</div> */}
+      {props.list.map(item => <p key={item}> {item} </p>)}
+
+      {/* 对象传递 */}
+      {props.userInfo.name}{<br />}
+
+      {/* 传递函数 */}
+      <button onClick={props.getMes}>触发父组件传入的函数</button>{<br />}
+
+      {/* 传递 JSX（模板）*/}
+      {props.child}
+    </div>
+  )
+}
+
+// 类组件的 App
+class App extends React.Component {
+  // 准备数据
+  state = {
+    list: [1, 2, 3],
+    userInfo: {
+      name: 'Ken',
+      age: 20
+    }
+  }
+
+  getMes = () => {
+    console.log('父组件中的函数')
+  }
+
+  render () {
+    return (
+      <div>
+        {/* 在子组件身上绑定属性，属性名可以自定义，保持语义化 */}
+        <SonF
+          list={this.state.list}
+          userInfo={this.state.userInfo}
+          getMes={this.getMes}
+          child={<span>this is span</span>}
+        />
+      </div>
+    )
+  }
+}
+
+export default App

practise/20.props的解构.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+// App 为父组件，Son 为子组件
+
+// 函数式的 Son
+/* function SonF (props) {
+  // 解构赋值
+  // 第一种写法
+  const { list, userInfo, getMes, child } = props
+  return (
+    <div>函数子组件，
+      {list.map(item => <p key={item}> {item} </p>)}
+      {userInfo.name}{<br />}
+      <button onClick={getMes}>触发父组件传入的函数</button>{<br />}
+      {child}
+    </div>
+  )
+} */
+
+// 解构赋值
+// 第二种写法
+function SonF({ list, userInfo, getMes, child }) {
+  return (
+    <div>
+      函数子组件，
+      {list.map((item) => (
+        <p key={item}> {item} </p>
+      ))}
+      {userInfo.name}
+      {<br />}
+      <button onClick={getMes}>触发父组件传入的函数</button>
+      {<br />}
+      {child}
+    </div>
+  )
+}
+
+// 类组件的 App
+class App extends React.Component {
+  // 准备数据
+  state = {
+    list: [1, 2, 3],
+    userInfo: {
+      name: 'Ken',
+      age: 20,
+    },
+  }
+
+  getMes = () => {
+    console.log('父组件中的函数')
+  }
+
+  render() {
+    return (
+      <div>
+        {/* 在子组件身上绑定属性，属性名可以自定义，保持语义化 */}
+        <SonF
+          list={this.state.list}
+          userInfo={this.state.userInfo}
+          getMes={this.getMes}
+          child={<span>this is span</span>}
+        />
+      </div>
+    )
+  }
+}
+
+export default App

practise/21.子传父.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+// APP 为父组件，Son 为子组件
+// 父传子：props + 函数
+//  子传父：子组件通过父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可
+
+function Son(props) {
+  const { getSonMsg } = props
+  return (
+    <div>
+      this is son
+      <button onClick={() => getSonMsg('这里是来自于子组件中的数据')}>
+        click
+      </button>
+    </div>
+  )
+}
+
+class App extends React.Component {
+  state = {
+    list: [1, 2, 3],
+  }
+  // 1.准备一个函数，传给子组件
+  getSonMsg = (SonMsg) => {
+    console.log(SonMsg)
+  }
+
+  render() {
+    return (
+      <div>
+        <Son getSonMsg={this.getSonMsg}></Son>
+      </div>
+    )
+  }
+}
+
+export default App

practise/22(1).子传父.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+// APP 为父组件，Son 为子组件
+// 父传子：props + 函数
+//  子传父：子组件通过父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可
+
+function Son(props) {
+  const { message, changeMessage } = props
+
+  function handleClick() {
+    changeMessage('this is 666')
+  }
+
+  return (
+    <div>
+        {message}
+      <button onClick={handleClick}>
+        click
+      </button>
+    </div>
+  )
+}
+
+class App extends React.Component {
+  state = {
+    message: 'this is message'
+  }
+
+  changeMessage = (newMessage) => {
+    console.log('子组件传递的数据', newMessage)
+    this.setState({
+        message: newMessage
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <div>父组件</div>
+        <Son message={this.state.message} changeMessage={this.changeMessage}></Son>
+      </div>
+    )
+  }
+}
+
+export default App

practise/22.子传父2.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+// APP 为父组件，Son 为子组件
+// 父传子：props + 函数
+//  子传父：子组件通过父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可
+
+function Son(props) {
+  const { getSonMsg } = props
+
+  function clickHandler() {
+    const sonMsg = '这里是来自子组件中的数据'
+    getSonMsg(sonMsg)
+  }
+
+  return (
+    <div>
+      this is son
+      <button onClick={clickHandler}>click</button>
+    </div>
+  )
+}
+
+class App extends React.Component {
+  state = {
+    list: [1, 2, 3],
+  }
+  // 1.准备一个函数，传给子组件
+  getSonMsg = (SonMsg) => {
+    console.log(SonMsg)
+  }
+
+  render() {
+    return (
+      <div>
+        <Son getSonMsg={this.getSonMsg}></Son>
+      </div>
+    )
+  }
+}
+
+export default App

practise/23.兄弟通信.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+// App 为父组件，SonA、SonB为子组件
+
+// 目标：B组件中的数据传给 SonA
+/*  方案：
+ 1.先把 SonB 中的数据通过子传父 传给 App
+ 2.再把 App 接收到 Son 中的数据通过父传子传给 SonA */
+
+function SonA(props) {
+  return <div>this is SonA，{props.sendAMsg}</div>
+}
+
+function SonB(props) {
+  const bMsg = '来自于B组件中的数据'
+  return (
+    <div>
+      this is SonB<button onClick={() => props.getBMsg(bMsg)}>发送数据</button>
+    </div>
+  )
+}
+
+class App extends React.Component {
+  state = {
+    sendAMsg: '测试父传子',
+  }
+  // 声明一个传给 SonB 组件的方法
+  getBMsg = (msg) => {
+    console.log(msg)
+    // 把 msg 数据交给 sendAMsg
+    this.setState({
+      sendAMsg: msg,
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <SonA sendAMsg={this.state.sendAMsg} />
+        <SonB getBMsg={this.getBMsg} />
+      </div>
+    )
+  }
+}
+
+export default App

practise/24.Context实现跨组件传递数据.jsx

@@ -0,0 +1,48 @@
+import React, { createContext } from 'react'
+// App -> A -> C
+// App数据 -> C
+
+/* 注意事项：
+1.上层组件和下层组件关系是相对的，只要存在就可以使用，通常都会通过 App 作为数据提供方
+2.这里涉及到的语法都是固定的，有两处：(1)提供的位置：通过 value 提供数据；(2)获取的位置 { value => 使用 value 做什么都可以 } */
+
+// 1.导入 createContext 方法并执行, 解构提供者和消费者
+const { Provider, Consumer } = createContext()
+
+function ComA() {
+  return (
+    <div>
+      this is ComA
+      <ComC />
+    </div>
+  )
+}
+
+function ComC() {
+  return (
+    <div>
+      thi is ComC,
+      {/* 3.通过 Consumer 使用数据 */}
+      <Consumer>{(value) => <span>{value}</span>}</Consumer>
+    </div>
+  )
+}
+
+class App extends React.Component {
+  state = {
+    message: 'this is message',
+  }
+
+  render() {
+    return (
+      // 2.使用 provider 包裹根组件
+      <Provider value={this.state.message}>
+        <div>
+          <ComA />
+        </div>
+      </Provider>
+    )
+  }
+}
+
+export default App

practise/25.通信案例.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+function ListItem({ item, delItem }) {
+  return (
+    <>
+      <h3>{item.name}</h3>
+      <p>{item.price}</p>
+      <p>{item.info}</p>
+      <button onClick={() => delItem(item.id)}>删除</button>
+    </>
+  )
+}
+
+class App extends React.Component {
+  state = {
+    list: [
+      {
+        id: 1,
+        name: '超级好吃的棒棒糖',
+        price: 18.8,
+        info: '开业大酬宾，全场8折',
+      },
+      {
+        id: 2,
+        name: '超级好吃的大鸡腿',
+        price: 34.2,
+        info: '开业大酬宾，全场8折',
+      },
+      {
+        id: 3,
+        name: '超级无敌的冰激凌',
+        price: 14.2,
+        info: '开业大酬宾，全场8折',
+      },
+    ],
+  }
+
+  // 给子组件传递的函数
+  delItem = (id) => {
+    this.setState({
+      list: this.state.list.filter((item) => item.id !== id),
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.list.map((item) => (
+          <ListItem key={item.id} item={item} delItem={this.delItem} />
+        ))}
+      </div>
+    )
+  }
+}
+
+export default App

practise/26.children属性.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+// children 要在调试工具才能查看
+function ListItem ({ children }) {
+    // children()
+    return (
+        // <div>ListItem,{children}</div>
+        <div>{children.map(child => child)}</div>
+    )
+}
+
+class App extends React.Component {
+    render () {
+        return (
+            <ListItem>
+                {/* 这里的 children 是 div */}
+                {/* <div>this is children</div> */}  
+
+                {/* 这里的 children 是一个函数，可以调用 */}
+                {/* {() => console.log(123)} */}
+
+                {/* 这里的 children 是一个 jsx */}
+                {/* {<div><p>{'this is p'}</p></div>} */}
+
+                {/* 这里的 children 是一个数组 */}
+                <div>this is div</div>
+                <p>this is p</p>
+            </ListItem>
+        )
+    }
+}
+
+export default App

practise/27.props效验.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+// prop-types 里面有各种各样的内置的效验规则
+import PropTypes from 'prop-types'
+
+function Test ({list}) {
+    return (
+        <div>
+            {list.map(item => <p key={item}>{item}</p>)}
+        </div>
+    )
+}
+
+Test.propTypes = {    // 这里的 propTypes 首字母要小写
+    // 定义各种规则
+    // 给 Test 的 list 数组定义规则
+    list: PropTypes.array.isRequired    // 限定这里的 list 参数的类型必须是数组类型，添加了 isRequired 就是必填项的意思，没填会报错 
+}
+
+class App extends React.Component {
+    render () {
+        return (
+            <div>
+                <Test list={[1, 2, 3]} />
+            </div>
+        )
+    }
+}
+
+export default App

practise/28.函数组件 props 默认值.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+/* 函数组件默认值
+第一种：使用 defaultProps
+第二种：函数参数默认值（推荐方案）  {pageSize = 10 }
+
+区别：第一种在用的时候组件内部已经有了 pageSize 这个 prop，第二种只要传递的时候组件内部才有这个 prop
+*/
+
+
+// 第二种：函数参数默认值（推荐方案）  {pageSize = 10 }
+function Test ({pageSize = 10 }) {
+    return (
+        <div>
+            this is test
+            {pageSize}
+        </div>
+    )
+}
+
+// 设置默认值
+// 第一种：使用 defaultProps
+/* Test.defaultProps = {
+    pageSize: 10           // 如果传数据，pageSize 就以传入的为主，如果不传就是 10
+} */
+
+
+class App extends React.Component {
+    render () {
+        return (
+            <div>
+                <Test pageSize={ 20 }/>
+            </div>
+        )
+    }
+}
+
+export default App

practise/29.类组件props默认值.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+/* 类组件默认值
+第一种：defaultProps
+第二种： static 类静态属性定义 (推荐)
+*/
+
+class Test extends React.Component {
+    // 第二种： static 类静态属性定义 
+    static defaultProps = {
+        pageSize: 10
+    }
+
+    render () {
+        return (
+            <div>
+                {this.props.pageSize}
+            </div>
+        )
+    }
+}
+
+// 第一种：defaultProps
+/* Test.defaultProps = {
+    pageSize: 10
+} */
+
+
+class App extends React.Component {
+    render () {
+        return (
+            <div>
+                <Test pageSize={20}/>
+            </div>
+        )
+    }
+}
+
+export default App

practise/30.组件的生命周期/01.组件挂载阶段.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+class App extends React.Component {
+    // constructor 是创建组件时，最先执行，初始化的时候只执行一次
+    // 作用：1.初始化 state  2.创建 ref  3.使用 bind 解决 this 指向问题等
+    constructor () {
+        super()
+        console.log('constructor')
+    }
+
+    state = {
+        count: 0
+    }
+
+    clickHandler = () => {
+        this.setState ({
+            count: this.state.count + 1
+        })
+    }
+
+    // componentDidMount 是组件挂载（渲染 DOM 渲染）后执行，初始化的时候执行一次  (类似 vue 中的 mounted)
+    // 作用：1.发送网络请求   2.DOM 操作
+    componentDidMount () {
+        console.log('componentDidMount')
+    }
+
+    // render 是每次组件渲染都会触发
+    // 作用：渲染 UI （注意，不能在里面调用 setState() ）
+    render () {
+        console.log('render')
+        return (
+            <div>
+                this is div
+                <button onClick={this.clickHandler}>{this.state.count}</button>
+            </div>
+        )
+    }
+}
+
+export default App

practise/30.组件的生命周期/02.组件的更新和卸载阶段.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+class Test extends React.Component {
+    // 如果数据是组件的状态需要去影响视图，数据定义到 state 中
+    // 而如果数据不和视图绑定，那就定义一个普通的实例属性
+    // state 中尽量保持精简
+
+    // 设置一个定时器
+    timer = null             // 实例属性
+    componentDidMount () {
+        this.timer = setInterval (() => {
+            console.log('定时器开启')
+        }, 1000)
+    }
+
+    // 组件的卸载阶段
+    // componentWillUnmount 是组件卸载，作用：执行清理工作（比如：清理定时器）
+    componentWillUnmount () {
+        console.log('componentWillUnmount')
+        // 清理定时器
+        clearInterval(this.timer)
+    }
+
+    render () {
+        return (
+            <div>this is Test</div>
+        )
+    }
+}
+
+
+class App extends React.Component {
+    // constructor 是创建组件时，最先执行，初始化的时候只执行一次
+    // 作用：1.初始化 state  2.创建 ref  3.使用 bind 解决 this 指向问题等
+    constructor () {
+        super()
+        console.log('constructor')
+    }
+
+    state = {
+        count: 0,
+        flag: true
+    }
+
+    clickHandler = () => {
+        this.setState ({
+            count: this.state.count + 1,
+            flag: !this.state.flag
+        })
+    }
+
+    // componentDidMount 是组件挂载（渲染 DOM 渲染）后执行，初始化的时候执行一次  (类似 vue 中的 mounted)
+    // 作用：1.发送网络请求   2.DOM 操作
+    componentDidMount () {
+        console.log('componentDidMount')
+    }
+
+    // 组件的更新阶段
+    // componentDidUpdate 是组件更新后（DOM 渲染完毕）
+    // 作用：DOM 操作，可以获取到更新后的 DOM 内容，不要直接调用 setState
+    componentDidUpdate() {
+        console.log('componentDidUpdate')
+    }
+
+    // render 是每次组件渲染都会触发
+    // 作用：渲染 UI （注意，不能在里面调用 setState() ）
+    render () {
+        console.log('render')
+        return (
+            <div>
+                this is div
+                <button onClick={this.clickHandler}>{this.state.count}</button>
+                {/* 通过一个数据状态的切换，让 Test 组件进行销毁重建，就会发生组件卸载 */}
+                {this.state.flag ? <Test/> : null}
+            </div>
+        )
+    }
+}
+
+export default App

react-component-demoP32-36/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

react-component-demoP32-36/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

react-component-demoP32-36/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "uuid": "^8.3.2",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

react-component-demoP32-36/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

react-component-demoP32-36/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

react-component-demoP32-36/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

react-component-demoP32-36/src/App.js

@@ -0,0 +1,219 @@
+import './index.css'
+import avatar from './images/avatar.png'
+import React from 'react'
+import { v4 as uuid } from 'uuid'
+
+// 时间格式化
+function formatDate (time) {
+  return `${time.getFullYear()}-${time.getMonth()}-${time.getDate()}`
+}
+
+class App extends React.Component {
+  state = {
+    // hot: 热度排序  time: 时间排序
+    tabs: [
+      {
+        id: 1,
+        name: '热度',
+        type: 'hot'
+      },
+      {
+        id: 2,
+        name: '时间',
+        type: 'time'
+      }
+    ],
+    // 控制 tab 激活的关键状态
+    active: 'hot',
+    list: [
+      {
+        id: 1,
+        author: '刘德华',
+        comment: '给我一杯忘情水',
+        time: new Date('2021-10-10 09:09:00'),
+        // 1: 点赞  0:无态度  -1:踩
+        attitude: 1
+      },
+      {
+        id: 2,
+        author: '周杰伦',
+        comment: '哎哟，不错哦',
+        time: new Date('2021-10-11 09:09:00'),
+        // 1: 点赞  0:无态度  -1:踩
+        attitude: 0
+      },
+      {
+        id: 3,
+        author: '五月天',
+        comment: '不打扰，是我的温柔',
+        time: new Date('2021-10-11 10:09:00'),
+        // 1: 点赞  0:无态度  -1:踩
+        attitude: -1
+      }
+    ],
+    // 评论框中的内容
+    comment: '',
+    condition: ''
+  }
+
+  // 排序切换回调函数
+  switchTab = (type) => {
+    // 实现思路：点击谁就把谁的 type 属性交给 state 中的 active
+    this.setState({
+      active: type
+    })
+  }
+
+  // 受控组件的回调函数
+  textareaChange = (e) => {
+    this.setState({
+      comment: e.target.value
+    })
+  }
+
+  // 发表评论回调函数
+  submitComment = () => {
+    // 提交评论，在 state.list 后面添加一条新的评论
+    this.setState({
+      list: [
+        ...this.state.list,
+        {
+
+          id: uuid(),
+          author: '刘德华',
+          comment: this.state.comment,
+          time: new Date('2021-10-10 09:09:00'),
+          // 1: 点赞 0：无态度 -1:踩
+          attitude: 1
+
+        }
+      ]
+    })
+  }
+
+  // 删除评论回调函数
+  delComment = (id) => {
+    this.setState({
+      list: this.state.list.filter(item => item.id !== id)
+    })
+  }
+
+  // 切换点赞回调函数
+  toggleLike = (curItem) => {
+    // 逻辑：如果是 1 就改为 0，否侧改为 1   关键字段：attitude、id（作为修改谁的判断条件）
+    const { attitude, id } = curItem
+    this.setState({
+      list: this.state.list.map(item => {
+        // 判断条件：如果 item.id === id，把 item 的 attitude 属性进行修改；如果不是就原样返回
+        if (item.id === id) {
+          return {
+            ...item,
+            // 当属性发生重复，会以下面的为主进行覆盖
+            attitude: attitude === 1 ? 0 : 1
+          }
+        } else {
+          return item
+        }
+      })
+    })
+  }
+
+  // 切换差评回调函数
+  toggleHate = (curItem) => {
+    const { attitude, id } = curItem
+    this.setState({
+      list: this.state.list.map(item => {
+        if (item.id === id) {
+          return {
+            ...item,
+            attitude: attitude === -1 ? 0 : -1
+          }
+        } else {
+          return item
+        }
+      })
+    })
+  }
+
+  render () {
+    return (
+      <div className="App">
+        <div className="comment-container">
+          {/* 评论数 */}
+          <div className="comment-head">
+            <span>5 评论</span>
+          </div>
+          {/* 排序 */}
+          <div className="tabs-order">
+            <ul className="sort-container">
+              {
+                this.state.tabs.map(tab => (
+                  <li
+                    onClick={() => this.switchTab(tab.type)}
+                    key={tab.id}
+                    className={tab.type === this.state.active ? 'on' : ''}
+                  >按{tab.name}排序</li>
+                ))
+              }
+            </ul>
+          </div>
+
+          {/* 添加评论 */}
+          <div className="comment-send">
+            <div className="user-face">
+              <img className="user-head" src={avatar} alt="" />
+            </div>
+            <div className="textarea-container">
+              <textarea
+                cols="80"
+                rows="5"
+                placeholder="发条友善的评论"
+                className="ipt-txt"
+                value={this.state.comment}
+                onChange={this.textareaChange}
+              />
+              <button className="comment-submit" onClick={this.submitComment}>发表评论</button>
+            </div>
+            <div className="comment-emoji">
+              <i className="face"></i>
+              <span className="text">表情</span>
+            </div>
+          </div>
+
+          {/* 评论列表 */}
+          <div className="comment-list">
+            {
+              this.state.list.map(item => (
+                <div className="list-item" key={item.id}>
+                  <div className="user-face">
+                    <img className="user-head" src={avatar} alt="" />
+                  </div>
+                  <div className="comment">
+                    <div className="user">{item.author}</div>
+                    <p className="text">{item.comment}</p>
+                    <div className="info">
+                      <span className="time">{formatDate(item.time)}</span>
+                      <span
+                        onClick={() => this.toggleLike(item)}
+                        className={item.attitude === 1 ? 'like liked' : 'like'}>
+                        <i className="icon" />
+                      </span>
+                      <span
+                        onClick={() => this.toggleHate(item)}
+                        className={item.attitude === -1 ? 'hate hated' : 'hate'}>
+                        <i className="icon" />
+                      </span>
+                      <span className="reply btn-hover" onClick={() => this.delComment(item.id)}>删除</span>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>)
+  }
+}
+
+
+export default App

react-component-demoP32-36/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+

react-jsx-demo-P16/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

react-jsx-demo-P16/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

react-jsx-demo-P16/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

react-jsx-demo-P16/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

react-jsx-demo-P16/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

react-jsx-demo-P16/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

react-jsx-demo-P16/src/App.js

@@ -0,0 +1,113 @@
+import './index.css'
+import avatar from './images/avatar.png'
+// 依赖的数据
+const state = {
+  // hot: 热度排序  time: 时间排序
+  tabs: [
+    {
+      id: 1,
+      name: '热度',
+      type: 'hot'
+    },
+    {
+      id: 2,
+      name: '时间',
+      type: 'time'
+    }
+  ],
+  active: 'hot',
+  list: [
+    {
+      id: 1,
+      author: '刘德华',
+      comment: '给我一杯忘情水',
+      time: new Date('2021-10-10 09:09:00'),
+      // 1: 点赞 0：无态度 -1:踩
+      attitude: 1
+    },
+    {
+      id: 2,
+      author: '周杰伦',
+      comment: '哎哟，不错哦',
+      time: new Date('2021-10-11 09:09:00'),
+      // 1: 点赞 0：无态度 -1:踩
+      attitude: 0
+    },
+    {
+      id: 3,
+      author: '五月天',
+      comment: '不打扰，是我的温柔',
+      time: new Date('2021-10-11 10:09:00'),
+      // 1: 点赞 0：无态度 -1:踩
+      attitude: -1
+    }
+  ]
+}
+// 格式化时间文本
+function getTime (time) {
+  return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
+}
+function App () {
+  return (
+    <div className="App">
+      <div className="comment-container">
+        {/* 评论数 */}
+        <div className="comment-head">
+          <span>5 评论</span>
+        </div>
+        {/* 排序 */}
+        <div className="tabs-order">
+          <ul className="sort-container">
+            {state.tabs.map(item => <li key={item.id} className={item.type === state.active ? 'on' : ''}>按{item.name}排序</li>)}
+          </ul>
+        </div>
+
+        {/* 添加评论 */}
+        <div className="comment-send">
+          <div className="user-face">
+            <img className="user-head" src={avatar} alt="" />
+          </div>
+          <div className="textarea-container">
+            <textarea
+              cols="80"
+              rows="5"
+              placeholder="发条友善的评论"
+              className="ipt-txt"
+            />
+            <button className="comment-submit">发表评论</button>
+          </div>
+          <div className="comment-emoji">
+            <i className="face"></i>
+            <span className="text">表情</span>
+          </div>
+        </div>
+
+        {/* 评论列表 */}
+        <div className="comment-list">
+          {state.list.map(item => (<div className="list-item" key={item.id}>
+            <div className="user-face">
+              <img className="user-head" src={avatar} alt="" />
+            </div>
+            <div className="comment">
+              <div className="user">{item.author}</div>
+              <p className="text">{item.comment}</p>
+              <div className="info">
+                <span className="time">{getTime(item.time)}</span>
+                <span className={item.attitude === 1 ? 'like liked' : 'like'}>
+                  <i className="icon" />
+                </span>
+                <span className={item.attitude === -1 ? 'hate hated' : 'hate'}>
+                  <i className="icon" />
+                </span>
+                <span className="reply btn-hover">删除</span>
+              </div>
+            </div>
+          </div>))}
+
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App

react-jsx-demo-P16/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)
+

react-todo-mvcP54-58/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

react-todo-mvcP54-58/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

react-todo-mvcP54-58/__mock__/_db_.json

@@ -0,0 +1,34 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "吃饭",
+      "des": "干饭人干饭魂"
+    },
+    {
+      "id": 2,
+      "name": "睡觉",
+      "des": "不如睡觉写代码不如睡觉"
+    },
+    {
+      "id": 3,
+      "name": "打豆豆",
+      "des": "不如睡觉写代码不如睡觉"
+    },
+    {
+      "id": 4,
+      "name": "写vue代码",
+      "des": "不如睡觉写代码不如睡觉"
+    },
+    {
+      "id": 5,
+      "name": "写react代码",
+      "des": "不如睡觉写代码不如睡觉"
+    },
+    {
+      "id": 6,
+      "name": "写webpack代码",
+      "des": "不如睡觉写代码不如睡觉"
+    }
+  ]
+}

react-todo-mvcP54-58/__mock__/db.json

@@ -0,0 +1,29 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "吃饭",
+      "des": "干饭人干饭魂"
+    },
+    {
+      "id": 2,
+      "name": "睡觉",
+      "des": "不如睡觉写代码不如睡觉"
+    },
+    {
+      "id": 3,
+      "name": "打豆豆",
+      "des": "不如睡觉写代码不如睡觉"
+    },
+    {
+      "id": 4,
+      "name": "跑步",
+      "des": "每天运动身体健康"
+    },
+    {
+      "id": 5,
+      "name": "打篮球",
+      "des": "每天运动身体健康"
+    }
+  ]
+}

react-todo-mvcP54-58/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "react-todos",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "antd": "^4.18.9",
+    "axios": "^0.26.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "mock-serve": "json-server __mock__/db.json --watch --port 3001"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "json-server": "^0.17.0"
+  }
+}

react-todo-mvcP54-58/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

react-todo-mvcP54-58/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

react-todo-mvcP54-58/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

react-todo-mvcP54-58/src/App.css

@@ -0,0 +1,13 @@
+@import '~antd/dist/antd.css';
+
+.container {
+  width: 600px;
+  margin: 0 auto;
+}
+.search-box {
+  display: flex;
+  margin-bottom: 10px;
+}
+.input-box {
+  margin-right: 20px;
+}

react-todo-mvcP54-58/src/App.js

@@ -0,0 +1,98 @@
+import { Input, Table, Space, Popconfirm } from 'antd'
+import axios from 'axios'
+import React from 'react'
+import './App.css'
+
+/* 步骤：
+1.找到对应的组件，将页面搭起来
+2.将 table 渲染出来（发送请求(componentDidMount) 拿到数据 交给 list (this.setState) )
+3.删除功能（点击哪个就用哪个id，调用删除接口，重新拉去列表）
+4.搜索功能（拿到关键词，调用接口获取列表数据）
+*/
+
+const { Search } = Input
+
+class App extends React.Component {
+  state = {
+    list: [],
+    columns: [
+      {
+        title: '任务编号',
+        dataIndex: 'id',
+        key: 'id',
+      },
+      {
+        title: '任务名称',
+        dataIndex: 'name',
+        key: 'name',
+      },
+      {
+        title: '任务描述',
+        dataIndex: 'des',
+        key: 'des',
+      },
+      {
+        title: '操作',
+        dataIndex: 'do',
+        key: 'do',
+        render: (_, record) => (
+          <Popconfirm title="Sure to delete?" onConfirm={() => this.delData(_, record)}>
+            <a>Delete</a>
+          </Popconfirm>
+        )
+      },
+    ]
+  }
+
+  // 搜索
+  onSearch = async (value) => {
+    // 调用搜索接口
+    const res = await axios.get(`http://localhost:3001/data/?q=${value}`)
+    this.setState({
+      list: res.data
+    })
+  }
+
+  // 删除
+  delData = async (_, record) => {
+    // 调用删除接口
+    await axios.delete(`http://localhost:3001/data/${record.id}`)
+    // 重新获取列表
+    this.loadList()
+  }
+
+  // 加载列表
+  loadList = async () => {
+    // 调取获取列表接口
+    const res = await axios.get('http://localhost:3001/data')
+    this.setState({
+      list: res.data
+    })
+  }
+
+  componentDidMount() {
+    this.loadList()
+  }
+
+  render() {
+    return (
+      <div className="container">
+        {/* 搜索框 */}
+        <Search
+          placeholder="input search text"
+          allowClear
+          enterButton="Search"
+          size="large"
+          // on 打头的一般都是事件
+          // onSearch 事件是在点击搜索/回车/清空时触发 value 当前输入框的值
+          onSearch={this.onSearch}
+        />
+        {/* 列表框 */}
+        {/* table 表格组件， 依赖两个必要的数据，一个定义列，一个用来遍历渲染 */}
+        <Table rowKey={record => record.id} dataSource={this.state.list} columns={this.state.columns} />;
+      </div>
+    )
+  }
+}
+
+export default App

react-todo-mvcP54-58/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

响应式布局/01.媒体查询.html

@@ -0,0 +1,34 @@
+<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>Document</title>
+  <style>
+    #div0 {
+      width: 100px;
+      height: 200px;
+    }
+
+    /* 根据不同的尺寸应用不同的效果 */
+    /* screen 是指屏幕， min-device-width 为屏幕最小尺寸，max-device-width 为屏幕最大尺寸 */
+    @media screen and (min-device-width: 200px) and (max-device-width: 300px) {
+      #div0 {
+        background-color: aqua;
+      }
+    }
+
+    @media screen and (min-device-width: 301px) and (max-device-width: 2000px) {
+      #div0 {
+        background-color: red;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div id="div0"></div>
+</body>
+
+</html>

响应式布局/02.media常用参数.html

@@ -0,0 +1,86 @@
+<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>Document</title>
+  <style>
+    #div0 {
+      width: 100px;
+      height: 500px;
+    }
+
+    #div0 div {
+      float: left;
+      height: 200px
+    }
+
+    /* 一行三个 div */
+    @media screen and (min-device-width: 400px) and (max-device-width: 500px) {
+      #div0 div {
+        width: 33.3%;
+      }
+
+      #div0 div:nth-child(1) {
+        background-color: aqua;
+      }
+
+      #div0 div:nth-child(2) {
+        background-color: red;
+      }
+
+      #div0 div:nth-child(3) {
+        background-color: green;
+      }
+    }
+
+    /* 两行三个 div */
+    @media screen and (min-device-width: 300px) and (max-device-width: 399px) {
+      #div0 div {
+        width: 50%;
+      }
+
+      #div0 div:nth-child(1) {
+        background-color: aqua;
+      }
+
+      #div0 div:nth-child(2) {
+        background-color: red;
+      }
+
+      #div0 div:nth-child(3) {
+        background-color: green;
+      }
+    }
+
+    /* 三行三个 div */
+    @media screen and (min-device-width: 200px) and (max-device-width: 299px) {
+      #div0 div {
+        width: 100%;
+      }
+
+      #div0 div:nth-child(1) {
+        background-color: aqua;
+      }
+
+      #div0 div:nth-child(2) {
+        background-color: red;
+      }
+
+      #div0 div:nth-child(3) {
+        background-color: green;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div id="div0">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</body>
+
+</html>

响应式布局/03.媒体查询其它引入方式.html

@@ -0,0 +1,53 @@
+<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>Document</title>
+  <style>
+    #div0 {
+      width: 100%;
+      height: 500px;
+    }
+
+    #div0 div {
+      float: left;
+      height: 200px
+    }
+
+    #div0 div:nth-child(1) {
+      background-color: aqua;
+    }
+
+    #div0 div:nth-child(2) {
+      background-color: red;
+    }
+
+    #div0 div:nth-child(3) {
+      background-color: green;
+    }
+  </style>
+
+  <style media="(min-device-width: 300px) and (max-device-width: 399px)">
+    #div0 div {
+      width: 50%;
+    }
+  </style>
+
+  <style media="(min-device-width: 400px) and (max-device-width: 499px)">
+    #div0 div {
+      width: 33.3%;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="div0">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</body>
+
+</html>

响应式布局/04.媒体查询其它映入方式2/css-1.css

@@ -0,0 +1,21 @@
+#div0 {
+    width: 100%;
+    height: 500px;
+  }
+
+  #div0 div {
+    float: left;
+    height: 100px
+  }
+
+  #div0 div:nth-child(1) {
+    background-color: aqua;
+  }
+
+  #div0 div:nth-child(2) {
+    background-color: red;
+  }
+
+  #div0 div:nth-child(3) {
+    background-color: green;
+  }

响应式布局/04.媒体查询其它映入方式2/css-2.css

@@ -0,0 +1,3 @@
+#div0 div {
+    width: 33.3%;
+  }

响应式布局/04.媒体查询其它映入方式2/css-3.css

@@ -0,0 +1,3 @@
+#div0 div {
+    width: 50%;
+  }

响应式布局/04.媒体查询其它映入方式2/index.html

@@ -0,0 +1,18 @@
+<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>Document</title>
+    <link rel="stylesheet" href="./css-1.css">
+    <link rel="stylesheet" href="./css-2.css" media="(min-device-width:400px)">
+    <link rel="stylesheet" href="./css-3.css" media="(min-device-width:300px) and (max-device-width:399px)">
+</head>
+<body>
+    <div id="div0">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+</body>
+</html>

响应式布局/05.主轴方向与换行.html

@@ -0,0 +1,37 @@
+<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>Document</title>
+    <style>
+        /* 如果父元素的宽度不够子元素宽度的总和，子元素会被压缩，以便子元素充分的显示 */
+        #div0 {
+            width: 300px;
+            background-color: blue;
+            display: flex;
+            /* 设置 flex 布局的方向 */
+            /* flex-direction: row; */
+
+            /* 设置 flex 的换行效果 */
+            /* flex-wrap: wrap; */
+
+            /* flex-flow 是 flex-direction 和  flex-wrap 的简写*/
+            flex-flow: row wrap;
+        }
+        #div0 div {
+            width: 100px;
+            height: 100px;
+            background-color: aqua;
+        }
+    </style>
+</head>
+<body>
+    <div id="div0">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+      </div>
+</body>
+</html>

响应式布局/06.剩余空间调整为间距.html

@@ -0,0 +1,32 @@
+<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>Document</title>
+    <style>
+        /* 当父元素一行中有剩余空间怎么解决？ */
+        #div0 {
+            width: 380px;
+            background-color: blue;
+            display: flex;
+            flex-flow: row wrap;
+            /* justify-content 用来在存于剩余空间时，设置为间距的方式 */
+            justify-content: space-between;
+        }
+        #div0 div {
+            width: 100px;
+            height: 100px;
+            background-color: aqua;
+        }
+    </style>
+</head>
+<body>
+    <div id="div0">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+      </div>
+</body>
+</html>

响应式布局/07.交叉轴的对齐方式.html

@@ -0,0 +1,37 @@
+<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>Document</title>
+    <style>
+        #div0 {
+            width: 380px;
+            background-color: blue;
+            display: flex;
+            /* 主轴为 row ，横向排列；主轴为 column，纵向排列 */
+            flex-flow: row wrap;
+            justify-content: space-between;
+            /* align-items 是设置每个 flex 元素在交叉轴上的默认方式，控制单行的效果 */
+            /* align-items: center; */
+
+            /* align-content 也是设置每个 flex 元素在交叉轴上的默认方式，但是是控制多行的效果 */
+            align-content: center;
+            height: 400px;
+        }
+        #div0 div {
+            width: 100px;
+            height: 100px;
+            background-color: aqua;
+        }
+    </style>
+</head>
+<body>
+    <div id="div0">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+      </div>
+</body>
+</html>

响应式布局/08.给子元素设置伸缩比例flex属性.html

@@ -0,0 +1,88 @@
+<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>Document</title>
+    <style>
+        #div0 {
+            display: flex;
+            width: 400px;
+            height: 500px;
+            background-color: aqua;
+        }
+
+        #div0 div {
+            width: 200px;
+            height: 200px;
+            background-color: blue;
+            /* flex-basis 属性用于设置或检索弹性盒伸缩基准值（就是设置子元素的宽度），上面的 width 将失效 */
+            /* flex-basis: 30%;       30% 是父元素宽度的 30% ，也可以使用 px、rem */
+        }
+
+        #div0 div:nth-child(1) {
+            flex-basis: 50px;
+
+            /* flex-grow 属性用于设置或检索弹性盒子的扩展比率 */
+
+            /* 计算过程：
+            父元素宽度 - 第一个子元素宽度 - 第二个子元素宽度     400 - 50 - 100 = 250px
+            再将剩余的 250px 的宽度 除以 总份数（全部子元素的份数），因为第一个和第二个子元素都设置了 flex-grow: 1 ，表示每个子元素占一份，总共 2 份
+            250 / 2 = 125   每份为 125 px 
+            再将子元素的宽度 + 占比份数 x 每份宽度（1 x 125, 如果是两份就是 2 x 125）
+            第一个子元素宽度： 50 + 125 = 175
+            第二个子元素宽度： 100 + 125 = 225
+            */
+            flex-grow: 1;
+        }
+
+        #div0 div:nth-child(2) {
+            flex-basis: 100px;
+            flex-grow: 1;
+        }
+
+        #div1 {
+            display: flex;
+            margin-top: 50px;
+            width: 400px;
+            height: 500px;
+            background-color: aqua;
+        }
+
+        #div1 div {
+            width: 200px;
+            height: 200px;
+            background-color: blue;
+        }
+
+        #div1 div:nth-child(1) {
+            flex-basis: 300px;
+            
+            /* flex-shrink 是设置弹性盒子的缩小比率 */
+            /* 计算过程跟 flex-grow 一样
+            计算超出部分：父元素宽度 - 所有子元素宽度    400 - 300 - 300 = -200
+            超出部分 / 所有子元素份数的总和    200 / 4 = 50
+            第一个子元素：300 - 50 x 1 = 250
+            第二个子元素：300 - 50 x 3 = 150 
+            */
+            flex-shrink: 1;
+        }
+
+        #div1 div:nth-child(2) {
+            flex-basis: 300px;
+            flex-shrink: 3;
+        }
+    </style>
+</head>
+<body>
+    <div id="div0">
+        <div>1</div>
+        <div>2</div>
+      </div>
+    
+    <div id="div1">
+        <div>3</div>
+        <div>4</div>
+    </div>
+</body>
+</html>

响应式布局/09.输入框框布局案例.html

@@ -0,0 +1,39 @@
+<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>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        #div0 {
+            width: 250px;
+            display: flex;
+            border: 1px solid #dcdcdc;
+        }
+
+        #div0 label {
+            flex: 1;              /* 相当于 flex：1 1 0% */
+            background-color: #f5f5f5;
+            text-align: center;
+        }
+
+        #div0 input {
+            border: none;
+            /* 点击输入框时，无边框显示 */
+            outline: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="div0">
+        <label>姓名</label>
+        <input type="text">
+        <label>go</label>
+    </div>
+</body>
+</html>

响应式布局/10.长表单布局案例.html

@@ -0,0 +1,46 @@
+<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>Document</title>
+    <style>
+        #form div {
+            display: flex;
+            /* height: 50px; */
+            /* stretch 是 align-items 默认值。元素被拉伸以适应容器。*/
+            /* align-items: stretch; */
+            /* flex-start：元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 */
+            align-items: flex-start;
+            flex: 0 0 30px;
+        }
+
+        #form div label {
+            flex: 0 0 100px;
+            text-align: right;
+        }
+
+        #form {
+            display: flex;
+            flex-direction: column;
+        }
+    </style>
+</head>
+
+<body>
+    <form>
+        <div id="form">
+            <div>
+                <label>姓名：</label>
+                <input type="text">
+            </div>
+            <div>
+                <label>请输入密码：</label>
+                <input type="text">
+            </div>
+        </div>
+    </form>
+</body>
+
+</html>

响应式布局/11.rem的使用方法.html

@@ -0,0 +1,37 @@
+<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>Document</title>
+    <style>
+        html {
+            font-size: 10px;
+        }
+        div {
+             /* rem 等于根元素 html 设置为准，这里的 1rem 等于 16px  */
+            font-size: 1rem;
+        }
+
+    </style>
+</head>
+<body>
+    <div>
+        <span>123</span>
+    </div>
+</body>
+<script>
+    var c = () => {
+        // 获取当前设备宽度
+        let w = document.documentElement.clientWidth
+        // 设置字号，默认为字号为20, 以 320 的宽度作为设备依据（可选），如果计算出当前设备的字号大于40，就以40字号显示
+        let n = (20*(w / 320 ) > 40 ? 40 + "px" : 20*(w / 320 ) + "px")
+        // 当计算好后，赋值给 fontSize
+        document.documentElement.style.fontSize = n
+    }
+    // 设置为初始化的效果
+    window.addEventListener("load", c)       // load 是重新加载计算
+    // 当屏幕尺寸改变后的效果
+    window.addEventListener("resize", c)    // resize 属性规定是否可由用户调整元素的尺寸大小
+</script>
+</html>

响应式布局/12.自适应布局/index.html

@@ -0,0 +1,28 @@
+<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>Document</title>
+</head>
+<body>
+    
+</body>
+<script type="text/javascript">
+    var redirect = () => {
+        // 获取设备信息
+        let userAgent = navigator.userAgent.toLowerCase();
+        // 正则表达式，判断有没有出现这些设备的类型
+        let device = /ipad|iphone|midp?rv:1.2.3.4|ucweb|android|window ce|window mobile/;
+        // 判断获取的设备信息与正则表示式的规则有没有匹配的，如果有匹配的，则跳转到移动端，没有就跳转到 PC 端
+        if (device.test(userAgent)) {
+            // 跳转到移动端页面
+            window.location.href = "move.html";
+        } else {
+            // 跳转 pc 端页面
+            window.location.href = "pc.html"
+        }
+    }
+    redirect()
+</script>
+</html>

响应式布局/12.自适应布局/move.html

@@ -0,0 +1,51 @@
+<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>Document</title>
+    <style>
+        #div0 {
+            display: flex;
+        }
+
+        #div0 div:first-child {
+            background-color: aqua;
+            flex: 0 0 50px
+        }
+
+        #div0 div:nth-child(2) {
+            background-color: blue;
+            flex: 1 1 auto
+        }
+
+        #div0 div:last-child {
+            background-color: red;
+            flex: 0 0 50px
+        }
+
+        /* 媒体查询 */
+        @media (min-device-width: 400px) and (max-device-width: 500px) {
+            #div0 div:nth-child(2) {
+                background-color: yellowgreen;
+            }
+        }
+
+        @media (min-device-width: 501px) and (max-device-width: 600px) {
+            #div0 div:nth-child(2) {
+                background-color: pink;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="div0">
+        <div>one</div>
+        <div>two</div>
+        <div>three</div>
+    </div>
+</body>
+
+</html>

响应式布局/12.自适应布局/pc.html

@@ -0,0 +1,11 @@
+<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>Document</title>
+</head>
+<body>
+    2222222222222
+</body>
+</html>

响应式布局/13.响应式布局.html/big.css

@@ -0,0 +1,69 @@
+* {
+    margin: 0;
+    padding: 0;
+    background-color: #F0F8FF;
+}
+
+#layout {
+    display: flex;
+    /* 主轴方向为纵向 */
+    flex-direction: column;
+    width: 80%;
+    /* 居中 */
+    margin: 0 auto;
+}
+
+#top {
+    width: 100%;    /* 这里的100%相当于父级 layout 的80%*/
+    flex: 0 0 50px;
+    margin: 0 auto;
+    background-color: yellow;
+    /* height: 50px; */
+}
+
+#main {
+    flex: 0 0 100%;
+    display: flex;
+    flex-direction: row;   /* 默认，可设可不设 */
+}
+
+#main div:first-child {
+    flex: 0 0 10%;
+    background-color: #F0F8FF;
+    list-style-type: none;
+    display: flex;
+    /* 设置允许换行 */
+    flex-wrap: wrap;
+    border-left: 1px solid white;
+    border-right: 1px solid white;
+}
+
+#main div:first-child li {
+    flex: 0 0 100%;
+    height: 40px;
+    /* 设置文字水平居中 */
+    line-height: 40px;
+    text-align: center;
+    border-bottom: 1px solid white;
+}
+
+#main div:nth-child(2) {
+    flex: 0 0 90%;
+    background-color: #F0F8FF;
+    list-style-type: none;
+    display: flex;
+    /* 设置允许换行 */
+    flex-wrap: wrap;
+    /* 设置间隔 */
+    justify-content: space-around;
+}
+
+
+#main div:nth-child(2) li {
+    flex: 0 0 30%;
+    height: 120px;
+    text-align: center;
+    border-bottom: 1px solid white;
+    background-color: greenyellow;
+    margin-top: 10px;
+}

响应式布局/13.响应式布局.html/layout1.html

@@ -0,0 +1,36 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <!-- 进行当前视口的控制，width=device-width 为宽度，initial-scale=1.0 是控制默认情况下显示以原始尺寸， user-scalable=no 代表是否允许缩放，no 表示不使用浏览器自身的缩放 -->
+    <meta http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./big.css" media="(min-device-width: 1000px)">
+    <link rel="stylesheet" href="./small.css" media="(min-device-width: 400px) and (max-device-width: 600px)">
+</head>
+<body>
+    <div id="layout">
+        <div id="top"></div>
+        <div id="main">
+            <div>
+                <li>分类1</li>
+                <li>分类2</li>
+                <li>分类3</li>
+                <li>分类4</li>
+                <li>分类5</li>
+                <li>分类6</li>
+            </div>
+            <div>
+                <li>图片1</li>
+                <li>图片2</li>
+                <li>图片3</li>
+                <li>图片4</li>
+                <li>图片5</li>
+                <li>图片6</li>
+                <li>图片7</li>
+                <li>图片8</li>
+            </div>
+        </div>
+    </div>
+</body>
+</html>