认识react

vue mvvm模式 vm:viewModel

M(数据)->VM->V(视图)
vue vue-cli vue脚手架 vue create 项目名

react mvc模式 c:controller

index.js文件是react的主入口文件相当于vue中的main.js

M(数据)->C->V(视图)
react create-react-app react脚手架 create-react-app 项目名
(npm i -g create-react-app先安装这个脚手架)

react暴漏配置文件 npm run eject/yarn eject 前提是git已经提交过；不可逆的命令

React用的是jsx写法

react组件名 首字母必须大写

react中 组件都是函数

jsx中的 {} 类似于 vue中的小胡子 {{}} {表达式}

{} 大括号 中不能编写对象，数组中包含对象也不行

1、react中 类名 必须写成className=‘xxx’ 不能写class=‘xxx’
2、绑定一个变量给className要用 {} (vue中用v-bind:)
3、一个行内样式中 className 只能写一个 写多个 后面的会把前面的覆盖掉(vue中可以合并) 若是想合并需要这样写 className={‘aa’ + ‘bb’} 是变量去掉引号即可

for必须写成htmlFor(行内属性)

<input type="checkbox" id="ipt"/>
<label htmlFor="ipt">666</label>
{/* 点击 label 会触发上面的 input 框 */}

react 行内样式必须写成一个对象
style={{ color: ‘red’, fontSize: ‘30px’ }} 外面是大括号 里面包了一个对象

react中的循环(编写 循环结构:只要把每一个结构都放到数组中，然后把数组放到对应的位置即可)

循环遍历数组
{
     ary.map(item => {
        return <li key={item}>{item}</li>
     })
}

循环遍历对象
let obj = { name: "清欢", age: "21" }
{
     Object.keys(obj).map(a => {
        return <li key={a}>{a}:{obj[a]}</li>
     })
}

react判断语序 if-else (建议用switch)

{
   1 > 2 ?
     <h2>111</h2> :
     2 > 3 ?
       <h3>222</h3> :
       <h4>333</h4>
}

ReactDOM.render(<App />,document.getElementById('root'));
//==这两个类似 ReactDOM.render和下面的Vue==
//new Vue({}).$mount('#app')

import React from 'react';
import ReactDOM from 'react-dom';

function A(){
	return <h1>333</h1>
}
function A2(){
	return React.createElement('h1',{},'333')
}

var B = <div id=qqq>666<h1>888</h1></div>
var B2 = React.createElement('div',{id:'qqq'},'666',React.createElement('div',{},'888'))
//‘div’是标签名 {}是行内属性行内属性没有则为空 后面全是儿子
// b 和 b2 这两种写法 效果一样 只是 Babel 把 B 默认帮我们转成了 B2 的这种形式

ReactDOM.render(<A2/>,document.getElementById('root')
函数当作组件或者标签来使用(用标签) 所以要用 <A2/> 这种格式
ReactDOM.render(B2,document.getElementById('root')