React学习（2）

react的应用，基于脚手架

快速搭建模板项目

 creat-react app 

项目的整体技术框架为：react + webpack + es6 + eslint

具有模块化、组件化、工程化特点

脚手夹文件介绍

主要文件index.html中

应用加壳相关文件

manifest.json

主要文件

app.js、app.css （组件的相关样式）

index.html（页面文件，为单页面，整个react中只有这一个页面）

index.js、index.css （重要入口文件，与root链接最后渲染出来）

当文件中出现这种形式的时候，此非解构复制，一般来说时组件文件中采用了多重暴露

项目的命名：可以新建一个文件夹，通用index.js的命名方法，导入的时候就只用导入文件夹就行了，也就是不用具体到哪一个文件

但是如果同时引入了样式.css表时，相同命名可能会相互覆盖！！因此要及时进行区分

rcc     快速搭建组件框架 安装插件

组件化编码

实现静态组件：组件的拆封、页面拆分、组件抽取

实现动态组件：动态显示初始化数据（数据类型、数据名称、保存在哪个组件中） 交互（绑定事件监听开始）

组件的组合使用-TodoList：

React项目重装依赖全攻略：避免常见陷阱，轻松解决问题 - 云原生实践

解构赋值method：const {keyCode, target} = event

就是指的是keyCode = event .keyCode

npm i uuid/nanoid 

这是一个库 会生成唯一的id

在定义对象的时候

const todoObj = {id: nanoid(), name: target.value, done:false}

 （Header中的方法）

这里是将数据直接挂载到App那个组件 再由app将数据传递给List这个子组件

header中传值给父组件 -> 子传父

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

（在APP中的方法）

删除操作的实现

const donecount = total.reduce((pre, todo) => {return pre + (todo.done ? 1 : 0)}

defaultChecked只在第一次的调用时起作用 

react ajax的学习

react本身只关注于界面，不包含

需要通过ajax请求与后台进行交互（传递json数据）

react中需要集成第三方ajax库或者自己封装

常用的ajax请求库：

jQuery比较重，不建议使用

建议axios，较为轻量

yarn add axios //安装axios

跨域问题：

1、package.json：“proxy”:"服务器地址" （不建议也不常用）

2、和vue3类似，代理服务器