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")
)