React大纲：
1、react核心概念：虚拟dom、diff算法
2、创建基本的webpack4.x项目
3、项目中使用react
4、jsx语法
5、react中创建组件
es6中class关键字使用
基于class关键字创建组件
6、两种创建组件方式对比
7、状态组件和无状态组件对比
8、安装react developer tools调试工具
1、Npm init -y. 创建包管理配置文件，快速初始化项目
2、Src（源代码目录） 新建目录放置项目所有的源代码
dist（产品目录）项目做好之后发布一个产品，发布到dist中来
3、在src下新建index.html首页
新建main.js 这是webpack的入口文件，从main开始构建,从main开始打包，引入index就完事了
Npm install webpack -D 安装webpack
npm install webpack-cli -D 安装打包命令，才能打包
Npm install cnpm -g. 全局安装cnpm到一个包里
4、直接执行webpack就会去找webpack.config.js中的module.export的配置对象的
5、webpack 4.x提供了约定大于配置的概念，目的是为了减少配置文件的体积
打包入口是src > index.js
打包的输出文件是disk > main.js
4.x中新增了mode选项（必选项），可选的值是development和production
export default(）是ES6中向外导出的api不是webpack的api并且node不支持，chrome支持哪些，node就支持哪些，webpack就支持哪些
6、npm install webpack-dev-server -D. 提高打包main.js到index.html中的性能，从5秒可以到2秒，提供默认的约定入口文件和出口文件,,,,这个webpack-dev-server东西对应生成的项目根目录main.js自动托管到内存中的，在项目根目录中看不到，但是可以认为假装有一个看不见的main.js，放在内存中速度快，减少磁盘目录的访问
7、打包好后然后自动打开浏览器设置：
“dev”: “web pack-dev-server —open —port 3000 —hot —host 127.0.0.1”默认打开谷歌浏览器，，，，打开火狐在—open后面加 firefox
8、npm -install html-webpack-plugin -D. 把index.html页面生成到内存中的命令
在配置文件中导入这个插件,,,这时候就可以注释掉了index.html中的script的那个文件了
9、、、以上是安装webpack基本的依赖项
10、react基本的学习
react 创建组件和虚拟dom的，组件的生命周期在这里面
React-dom 用来进行dom操作的，应用场景是reactdom.render()
安装：：：
npm install react-dom -S 从开发到上线都用到些个包
React 一切是以js对象来表示的：
第一步导包
首先创建虚拟dom对象—react
其次渲染dom对象—reactdom.render(dom元素，dom元素对象容器)
在页面上放这个容器
以上最为基本的4个使用react步骤
11、jsx基本语法：
第一步：安装babel：
Npm install babel-core babel-loader babel-plugin-transform-runtine -D. 转换、插件
npm install babel-preset-env babel-preset-stage-e -D. Babel的语法
npm install babel-preset-react -D. 这个包是把jsx转成react-getelementbyid
第二步：配置文件编写：
第三步：在项目根目录中创建.babelrc的json的配置文件
12、以[（+-/五个符号开头的在javascript语句结尾必须要加分号
13、渲染数组就用vue中的v-for或者react中的map，是需要保存选中或者未选中的状态时就用到了key:item.id就起到作用了，循环谁key就加给谁
14、jsx中写注释：{/*{arr} */},推荐单行注释，
15、为jsx中的元素添加class类名**，使用classname代替class,htmlfor替换lable的for属性
16、jsx创建dom时所有节点必须有唯一的跟元素进行包裹！
17、
let a = 10 //定义变量渲染数字
let str = "你好，中国" //定义渲染字符串
let boo = false //定义渲染布尔值
let title = "999" //定义为属性绑定值
const h1 = <h1>红红火火恍恍惚惚</h1> //渲染jsx元素
const arr = [ //渲染jsx数组
<h2>这是h2</h2>,
<h3>这是h3</h3>
]
const arrstr = ["毛利兰","柯南","小无浪","灰原哀"] //将普通字符串数组转为jsx数组并渲染到页面上【两种方案】
18、
第一种创建组件的方式：
创建组件：function
为组件传递props数据：在构造函数中接受外界传递过来的数据，使用props形参
分离为单独的组件文件：把组件单独放到一个文件components下的.jsx中去，记住要导入react，否则报错
省略.jsx后缀名：打开webpack.config.js,，新增resolve节点,修改配置文件后一定要重新运行一遍才能生效
19、vue-cli中
import Hello from “@/components/Hello“ @符号表示项目根目录中的src这层目录，对应到目录中通过webpack.config配置的，alias:[]
20、jsx文件中的冒号：表示等于的意思！
21、第二种创建组件的方式：
用class关键字来创建组件：es6中class关键字，是实现面向对象编程的新形式：
实例方法和静态方法：
22、安装npm install style-loader css-loader -D
bootstrap安装npm install bootstrap@3.3.7 -S
字体处理包安装 npm install url-loader -D. 依赖npm install file-loader -d
不同文件处理 能够解析scss文件的loader. npm install sass-loader node-sass -D
23、import 能导入的前提是在组件中暴露出来东西export default。 样式表中没有export default
24、localIdentName 自定义生成类名格式
[path] 根目录所在路径
[name]格式表文件名称
[local]格式的类名定义名称
[hash：length]表示32位的hash值
Css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]
25、css中：globle（）全局化就不会被模块化了
26、发红包的小项目：一个适合新手练手的react全家桶小项目
27、registerServiceWorker：作用生产环境中为用户缓存资源到本地，提升应用的访问速度（只在生产环境中起作用process.env.NODE_ENV===“production）
28、vue组件的生命周期：
组件生命周期函数：beforecreate created beforemount mounted. Before destroy. destoryed
组件运行中的生命周期函数：beforeupdate updated
beforeupdate. data数据变化被修改时被执行0次或者n次，数据时最新的，页面上呈现的数据还是旧的
updated：页面已经完成了更新，数据时最新的，页面上的数据也是最新的。
更新时：拿到最新的data数据，根据最新的数据，内存中重新渲染新的dom树，把旧的页面移除，同时把新的dom树渲染到页面上
Before destroy:组件即将销毁，但是现在还没被销毁，还是正常可以使用的，data，methods依然可以访问。
destoryed：完成了销毁，不可用了。
29、组件的创建阶段：函数一辈子只运行一次
组件的运行阶段：按照需求根据props属性或state状态的改变，有选择性的执行0或n次
组件的销毁阶段：一辈子只执行一次
30、react生命周期函数：
开始—static defaultprops = {}—this.state={}—componentwillmount—render—componentdidmount—-运行中
属性改变：componentwillreceiveprops
状态改变：state
卸载：unmount
31、
Yarn add and
公共数据存储工具把所有数据放到store存储，一个组件改变了，其他的可以来取，是解决数据传递的框架，把数据都放在store中
Redux = reducer+flux
yarn add Redux
32、store的创建：优先编写
用redux创建store，在创建store的同时给他一个小本本reducer传递给store，reducer是返回函数，reducer是处理数据的！
33、创建好了store之后，input输入数据修改，这时store里面的数据也要修改一下，这是需要在触发的函数定义action（里面告诉store需要执行的动作，以及什么数据需要执行该动作），然后在把传过来的state数据（x新数据）和action（那句话）在分发给reducer（查小本本），reducer拿到数据后，告诉store应该怎么去做store自己修改，所以在reducer中改变数据需要备份拷贝一下！
34、无状态组件—》当组件类中只有render函数的时候就完全可以定义成一个无状态组件
35、default的可以改名，其他的export不能改名
36、const {userLogin} = api 取api里面的值或数据
扫一扫
2046
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
