React的初体验

// 1. 可以使用React.createElement这个函数去实现
 
// 它目前接收三个参数,
/*
1. 元素名称 (div, button,span ......)
2. 元素class 使用 className声明
3. 元素内容
*/
const App1 = React.createElement(‘div‘,{className:‘red‘},0)
 
// 然后在 React中渲染一下,使用Render函数即可
 
/*
render函数目前接收两个参数
1. 需要渲染的框架
2. 需要挂载的元素
*/
ReactDOM.render(App1,document.getElementById(‘root‘))

let n = 0
const App1 = React.createElement(‘div‘,{className:‘red‘},[n,
  React.createElement(‘button‘,{onClick:() => {
    n+= 1
  }},"+1")
])
 
ReactDOM.render(App1,document.getElementById(‘root‘))

// 我们只需要把  React.createElement 去掉就可以了
// 注意一定要加上return()
const App = ()=>{
    return(
    <div className="red">
    {n}
    </div>
  )
}

// 最后在render中使用 <App /> 渲染就可以了
const render = () => (ReactDOM.render(<App/>,
  document.getElementById(‘root‘)
  ))
  render()

let n = 0
const App = ( )=>{
  return(
    <div>
       {
       n===0 ? <div>我被显示了</div> : <div>我被隐藏了</div>
      }
    </div>
  )
}

let a
if(ture){
    a = <div>...</div>
}else{
    a = ...
  
}
  
  renturn a

const Component = (props) =>{
    props.number.map(...)
}