react 脚手架

最新推荐文章于 2024-10-16 21:22:37 发布

月下脆竹書閣

最新推荐文章于 2024-10-16 21:22:37 发布

阅读量297

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/c_x_m/article/details/115488732

React 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用create-react-app创建React项目并启动，解析了项目的基本文件结构，包括public/index.html和src/index.js。详细阐述了React中CSS的模块化解决样式冲突问题，以及快捷键的使用。此外，通过toDoList小示例展示了React组件间的通信，包括父传子、子传父和子组件间通信，并演示了如何获取checkbox值和隐藏显示删除按钮。最后，探讨了解构赋值和消息订阅-发布机制PubSubJS在项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建项目并启动

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

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

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>

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();

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}/>

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

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

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

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

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

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}/>

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

// 方法内部写
changeCheckbox(id,event.target.checked)

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>
        );
    }

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

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);
      })
   }

// Search 发送数据
search=()=>{
       PubSub.publish('search',{name:"xinming",age:"18"})
    }