react中有组件化的概念，但是，并不像是vue这样的组件模板文件，react中，一切都是以js来表现的 es6和es7
虚拟dom：用js对象的形式，来模拟页面上的嵌套关系
diff算法：对比dom和虚拟dom
（1）tree diff：dom树节点对比
（2）component diff： 在 tree diff的基础上, 组件级别的对比
（3）element diff：组件对比的同时，元素级别的对比
层层递进的关系
因为webpack是基于node构建的
和export defult 不同，这里是node里面的语法，common.js语法
module.exports = {}
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。
本地编译代码时， npm run dev 时，在内存中创建了文件，实质找不到文件，项目中右键检查源代码时，srcipt标签引入的是 src="app.js"，并且app.js文件里并没有被压缩，假设本地运行的端口是8080，那么在localhost:8080/app.js下会看到你在内存中编译的js代码
但是生产环境引入了多个压缩的js文件
创建项目 npm init react-app my-app 或者 create-react-app myapp
1 // 1. 创建dom元素 createElement( 2 // 参数1：创建的元素的类型，字符串，表示元素的名称 3 // 参数2： 是一个对象或是null，表示dom元素的属性， 4 // 参数3，子节点（包括其他虚拟dom，获取 文本子节点） 5 // 参数n: 其他子节点 6 // ) 7 // const myh2 = React.createElement(‘h2‘, null, ‘这是创建的子节点‘); 8 9 //当设置属性class类名时，应写成className 10 const myh2 = React.createElement(‘h2‘, { className: ‘myh2‘, title: ‘this is dom‘}, ‘这是创建的子节点‘); 11 const mydiv = React.createElement(‘div‘, null, ‘给h1外面套一层div‘, myh2) // 给h2外面套一层div
12 //ReactDOM.render() 将虚拟dom渲染到页面 13 // 1. 要渲染的虚拟dom元素 14 // 2. 指定的容器 15 ReactDOM.render(mydiv, document.getElementById(‘app‘))
在js中混合写入html语法，叫做jsx，符合xml规范的js，jsx语法的本质在运行的时候被babel转换成 React.createElement()的形式
和Vue的插值表达式一样，循环的时候也要加key，由于虚拟dom的原因，防止dom元素被复用
创建元素时单行可以不用加（），多行必须要加（）
1 let name = ‘小明‘ 2 let a = 10 3 let boo = true 4 let title = ‘myh1‘ 5 const h1 = <h1>这里是h1</h1> 6 const myh1 = <div class={title}>{a + 2} {name} {boo ? ‘真‘ : ‘假‘} {h1}</div> 7 8 ReactDOM.render(myh1, document.getElementById("app"))
jsx语法里写注释 /* */形式
1 {/* {a + 2} {name} {boo ? ‘真‘ : ‘假‘} {h1} */}
jsx语法中给元素添加类名，使用className代替
组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。
第一种，构造函数创建组件，必须有return，否则报错，和vue一样，必须要有一个根元素，构造函数名即为组件名
1 function Hello() { 2 return <div>这里是组件</div> 3 } 4 5 ReactDOM.render(<div> 6 我要创建组件 7 <Hello></Hello> 8 </div>, 9 document.getElementById("app"))
react工具
https://github.com/facebook/react-devtools
https://github.com/facebook/react
不管是vue，还是react，组件中props接受的参数永远都是只读的
1 //定义子组件 2 function Hello(props) { 3 // console.log(props) //形参接受外界传过来的参数，和vue一样，props接受的参数是只读的，不可修改 4 let { userinfo, user } = props 5 return <div>这里是组件 {userinfo.name}</div> 6 } 7 8 const userobj = { 9 name: ‘shun‘, 10 age: 18 11 } 12 const userarr = [{ id: 0, gril: ‘ppp‘ }, { id: 1, gril: ‘uuu‘ }] 13 14 ReactDOM.render(<div> 15 我要创建组件 16 {/* 传递参数 */} 17 <Hello userinfo={userobj} user={userarr}></Hello> 18 </div>, 19 document.getElementById("app"))
1 import React from ‘react‘; 2 3 4 export default class Hello extends React.Component { 5 constructor(props) { 6 super(props) 7 console.log(props) 8 this.userobj = props.userobj 9 } 10 render() { 11 return ( 12 <div> 13 姓名{this.userobj.name} 14 </div> 15 ); 16 } 17 }
原文：https://www.cnblogs.com/shun1015/p/13489861.html