• react 脚手架

    React 脚手架

    1.创建项目并启动

    1.打开cmd全局安装：npm install -g create-react-app

    dir:查看文件夹里面的内容
cls:清空cmd中内容

    • 1
    • 2

    2.构建一个项目
    npx create-react-app my-app
    3.启动项目
    npm start
    报错：
    react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined
    原因：是因为chome浏览器中下载了react 扩展工具，关闭即可。

    2.解析文件内容

    2.1 public–>index.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--%PUBLIC_URL% 代表public 文件夹路径-->
    <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" />
    <!--应用加壳的配置文件-->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!--若浏览器不支持js,则展示标签中的内容-->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    public–>robots.txt—是爬虫软件
    public–>manifest.json----是加壳软件
    src–>index.js—入口软件
    src–>App.js–页面–export default App后在入口文件引入即可。

    2.2 src–>index.js

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';// 测试性能

ReactDOM.render(
  //  <React.StrictMode> 是为了检查内部标签(App)代码的合法性
  <React.StrictMode>
    <App />   
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    2.3 css的模块化

    当Welcom中的类名与Hello中的类名相同的时候，写的样式会冲突
    原因：写好的内容是在App.js到index.js然后统一映射到index.html中的
    解决方案：对css文件重新命名：Welcom.css–>Welcom.module.css
    更改引入方式： import ‘./Welcom.css’–>import {Welcom} from ‘./Welcom.module.css’
    内容更改：<div className={Welcom.title} ></div>

    2.4 快捷键

    1.rcc -->生成类式组件
    2.rfc–>函数式组件

    3 写前端页面的考虑顺序

    在这里插入图片描述

    4.toDoList小示例

    状态在哪里，操作状态的方法就在哪里

    4.1 拆分组件

    在这里插入图片描述

    4.1 父与子通信–使用props

    // App.js
<List {...this.state}/>

    • 1
    • 2
    // List
 return (
            <div className="ListDiv">
                {
                    this.props.arr.map((n)=>{
                        return <Items {...n} key={n.id} changeCheckbox={changeCheckbox}/>
                    })
                }
            </div>
        );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    4.2 子与子通信（以父为中介）

    // App.js
addData=(data)=>{
    const {arr}=this.state
    this.setState({arr:[data,...arr]})
  }
// App.js render内部
<Header addData={this.addData}/>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    // Header 方法内部赋值  nanoid()---随机且数值唯一
 this.props.addData({id:nanoid(),name:inputData,falg:false});

    • 1
    • 2
    // 向List传值
 <List {...this.state} changeCheckbox={this.changeCheckbox}/>

    • 1
    • 2

    4.3 获取checkbox 值

    // App.js --{...data,flag:flag}--更改flag值
changeCheckbox=(id,flag)=>{
    const {arr}=this.state;
    const newArr =  arr.map((data)=>{
        if(data.id===id) return {...data,flag:flag};   
        else return data;             
      })
    this.setState({arr:newArr})
  }
  <List {...this.state} changeCheckbox={this.changeCheckbox}/>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    // List
 render() {
        const {changeCheckbox} =this.props;
        return (
            <div className="ListDiv">
                {
                    this.props.arr.map((n)=>{
                        return <Items {...n} key={n.id} changeCheckbox={changeCheckbox}/>
                    })
                }
            </div>
        );
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    // 方法内部写
changeCheckbox(id,event.target.checked)

    • 1
    • 2

    4.4 隐藏显示删除按钮

    // Items
 state={
        mouse:false,
    }
    // 鼠标移入
    onmouseover=(flag)=>{
         return ()=>{
            this.setState({mouse:flag})
       }
    }
    // 鼠标移出
    onmouseout=(flag)=>{
       return ()=>{
            this.setState({mouse:flag})
       }
    }
    onchange=(id)=>{
        const {changeCheckbox}=this.props;
       return (event)=>{
            console.log(event.target.checked,id)
            changeCheckbox(id,event.target.checked)
       } 
    }
    render() {
        const {id,name,flag}=this.props;
        const {mouse} =this.state;
        return (            
            <div className="ItemsDiv" onMouseOver={this.onmouseover(true)} onMouseOut={this.onmouseout(false)}>
               <input type="checkbox" defaultChecked={flag} onChange={this.onchange(id)}/>
               <span>{name}</span>
               <button className="del"  style={{display:mouse===true?'block':'none'}}>删除</button>
            </div>
        );
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    5.解构赋值

    let obj={a:{b:1}}
// 解析赋值
const {a:{b}}=obj;
console.log(b)//1
console.log(data)//undefined
//解析赋值并重命名
const {a:{b:data}}=obj;
console.log(data);//1

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    6.消息订阅-发布机制

    6.1工具库：PubSubJS

    6.2 下载npm install pubsub-js --save

    6.3 使用

    1） import PubSub from ‘pubsub-js’ --引入
    2）PubSub.subscribe(‘delete’,function(data){})–订阅
    3）PubSub.publish(‘delete’,data)–发布消息

    6.4 示例

    // List 接收数据-
componentDidMount(){
      PubSub.subscribe('search',function(_,data){
          console.log(data);
      })
   }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    // Search 发送数据
search=()=>{
       PubSub.publish('search',{name:"xinming",age:"18"})
    }

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    基于PHP+MySQL仓库管理系统的设计与实现
    Android 打开通知中心（StatusBar）
    智能决策：数字孪生的商业洞察
    网络安全（黑客）自学
    做个小工具按规则筛选当前Object并输出基础信息
    IO流：java中解码和编码出现乱码说明及代码实现
    HTML学习笔记
    git 简单命令
    一种用于干式脑电图的高密度256通道电极帽
    SCS【5】单细胞转录组数据可视化分析 (scater)
  • 原文地址：https://blog.csdn.net/c_x_m/article/details/115488732