react项目搭建

1 react 环境 执行命令

npm init -y
npm i react --save
npm i react-dom -save

2 创建js 目录

把node-modules/react/umd/react.development.js拷贝到js文件夹下，
把node-modules/react-dom/umd/react-dom.development.js拷贝到js文件夹下。

创建index.html文件—之后
先引入react.development.js，在引入react-dom.development.js

3 babel => es6 转化es5 解析jsx (js +xml )

npm i babel-standalone --save

script type=“text/babel”
var node = 
 div> 哈哈哈</div>
 ReactDOM.render(node, document.getElementById('box'))  ReactDOM.render(jsx表达式, 挂载的DOM节点)
 
 另一种是创建节点
 var node = React.createElement('div', {title: "创建的节点div", 'hello world'}
ReactDOM.render(node, document.getElementById('box'))

4 {hah} => {插值表达式}

假如 设置var arr = [ ‘aa’, ‘bb’, ‘cc’]可以直接用{arr} = aabbbcc

但是对象 obj = {a:1,b:2} 就必须是 {obj.a},{obj.b}

对象不能直接用插值表达式。

事件函数

<button onClick={toggle}> 点击事件  </button>
定义全局的事件函数变量
var toggle=()=>{
visible = !visible
}

点击事件

onClick={toggle()}// onClick={toggle()=>{alert('弹出')}}
<div style={{display:visible?"block":"none"}}/> // 三木运算

5

onClick 大写
 styke={key:value}

原始的–>react 的
class --> className
for --htmlFor
value -->defaultValue
checked–>defaultChecked
注释 {/**/}
vue的是v-for v-…List
6 遍历列表推荐map 方法
便利多个列表可封装为函数
用无状态组件去渲染列表

7 遍历对象，组件字母要大写 ShowList

var 组件=（props）=>{ // 无状态组件
props就可以接受父组件传过来的参数
return 表达式
}	

<组件 属性={值} />

Object.entries 对象的键值对形成的数组
Object.values 对象的值对形成的数组
Object.keys 对象的键形成的数组
eg: 
var obj = {a:1, b:2, v:3}
ReactDOM.render(<div>
{
Object.keys(obj).map((item)=>{
return <li key={item}>   
{obj[item]}
</li>
})
}
</div>)

用props 
var obj2 = {"a":'qq', "b":'cc', "f": ‘ff’} 
var ShowObject = (props)=>{
return <ul>
{
Object.keys(props.obj).map(（item)=> {
return <li key={item}>{item} =====> {obj[item]}</li>
}
)}
</ul>
}
ReactDOM.render(
<div>
<ShowObject obj= {obj } />
</div>,document.querySelector(#box")
)