React 脚手架
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"})
}