三大框架一大抄
.vue 文件，来创建对应的组件；
React如何实现组件化：大家注意，React中有组件化的概念，但是，并没有像vue这样的组件模板文件；React中，一切都是以JS来表现的；因此要学习React，JS要合格；ES6 和 ES7 （async 和 await） 要会用；
DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API；
虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；
tree diff:新旧两棵DOM树，逐层对比的过程，就是 Tree Diff； 当整颗DOM逐层对比完毕，则所有需要被按需更新的元素，必然能够找到；
component diff：在进行Tree Diff的时候，每一层中，组件级别的对比，叫做 Component Diff；
element diff:在进行组件对比的时候，如果两个组件类型相同，则需要进行 元素级别的对比，这叫做 Element Diff；
npm init -y 快速初始化项目src源代码目录和dist产品目录index.htmlcnpm i webpack webpack-cli -D
cnpm: 全局运行 npm i cnpm -gsrc -> index.jsdist -> main.jsmode 选项(为必选项)，可选的值为：development 和 production;运行 cnpm i react react-dom -S 安装包
ReactDOM.render()在index.html页面中，创建容器：
<!-- 容器，将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->
<div id="app"></div>导入 包：
import React from ‘react‘
import ReactDOM from ‘react-dom‘创建虚拟DOM元素：
// 这是 创建虚拟DOM元素的 API <h1 title="啊，五环" id="myh1">你比四环多一环</h1>
// 第一个参数： 字符串类型的参数，表示要创建的标签的名称
// 第二个参数：对象类型的参数， 表示 创建的元素的属性节点
// 第三个参数： 子节点
const myh1 = React.createElement(‘h1‘, { title: ‘啊，五环‘, id: ‘myh1‘ }, ‘你比四环多一环‘)渲染：
// 3. 渲染虚拟DOM元素
// 参数1： 表示要渲染的虚拟DOM对象
// 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
ReactDOM.render(myh1, document.getElementById(‘app‘))?
什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）
安装 babel 插件
cnpm i babel-core babel-loader babel-plugin-transform-runtime -Dcnpm i babel-preset-env babel-preset-stage-0 -D安装能够识别转换jsx语法的包 babel-preset-react
cnpm i babel-preset-react -D添加 .babelrc 配置文件
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}添加babel-loader配置项：
module: { //要打包的第三方模块
rules: [
{ test: /\.js|jsx$/, use: ‘babel-loader‘, exclude: /node_modules/ }
]
}?
jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；
在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中
在 jsx 中 写注释：推荐使用{ /* 这是注释 */ }
为 jsx 中的元素添加class类名：需要使用className 来替代 class；htmlFor替换label的for属性
在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！
当 编译引擎，在编译JSX代码的时候，如果遇到了
<那么就把它当作 HTML代码去编译，如果遇到了{}就把 花括号内部的代码当作 普通JS代码去编译；
使用构造函数来创建组件，如果要接收外界传递的数据，需要在 构造函数的参数列表中使用
props来接收；必须要向外return一个合法的JSX创建的虚拟DOM；
创建组件：
function Hello () {
// return null
return <div>Hello 组件</div>
}为组件传递数据：
// 使用组件并 为组件传递 props 数据
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>
// 在构造函数中，使用 props 形参，接收外界 传递过来的数据
function Hello(props) {
// props.name = ‘zs‘
console.log(props)
// 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；
return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
}?
父组件向子组件传递数据
使用{...obj}属性扩散传递数据
将组件封装到单独的文件中
注意：组件的名称首字母必须是大写
在导入组件的时候，如何省略组件的.jsx后缀名：
// 打开 webpack.config.js ，并在导出的配置对象中，新增 如下节点：
resolve: {
extensions: [‘.js‘, ‘.jsx‘, ‘.json‘], // 表示，这几个文件的后缀名，可以省略不写
alias: {
‘@‘: path.join(__dirname, ‘./src‘)
}
}在导入组件的时候，配置和使用@路径符号
使用 class 关键字来创建组件
ES6 中 class 关键字，是实现面向对象编程的新形式；
constructor 的基本使用extends 关键字实现继承最基本的组件结构：
class 组件名称 extends React.Component {
render(){
return <div>这是 class 创建的组件</div>
}
}有状态组件和无状态组件之间的本质区别就是：有无state属性！
CommentList: [
{ id: 1, user: ‘张三‘, content: ‘哈哈，沙发‘ },
{ id: 2, user: ‘李四‘, content: ‘哈哈，板凳‘ },
{ id: 3, user: ‘王五‘, content: ‘哈哈，凉席‘ },
{ id: 4, user: ‘赵六‘, content: ‘哈哈，砖头‘ },
{ id: 5, user: ‘田七‘, content: ‘哈哈，楼下山炮‘ }
]style 样式localIdentName设置生成的类名称，可选的参数有：
:local() 和 :global()React Developer Tools - Chrome 扩展下载安装地址
理解React中虚拟DOM的概念
理解React中三种Diff算法的概念
使用JS中createElement的方式创建虚拟DOM
使用ReactDOM.render方法
使用JSX语法并理解其本质
掌握创建组件的两种方式
理解有状态组件和无状态组件的本质区别
理解props和state的区别
原文：https://www.cnblogs.com/var-chu/p/9648774.html