//识别常规变量 //原生js方法调用 //三元运算符 //react完成列表渲染 //技术方案：map //遍历列表时需要一个类型为number/string不可重复的key 提高diff性能 //key在内部使用，不会出现真实的dom结构中 //条件渲染，实现：三元，逻辑&&运算 //状态，复杂的多分支的逻辑，写一个专门的函数写分支逻辑，模板只负责调用 //jsx 样式控制,1.行内样式。2.类名样式 //JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代

import './app.css';

const style = { color:'red', fontSize:'60px' }

const getHtag = (type)=>{ if(type === 1) { return

h1

} if(type === 2) { return

h2

} if(type === 3) { return

h3

} } const name = 'dl' const getAge = ()=>{ return 20 } const flag = true const songs = [ {id: 1, name: '你是唯一' }, {id: 2, name: '佛说' }, {id: 3, name: '你是我最爱的人' } ]

//动态控制active类名，满足条件才有 const activeFlag = true function App() { return (

is span 测试行内样式，在元素身上绑定一个style属性即可 <span className = {activeFlag?'active':''}>测试类名样式，绑定一个className属性即可

  { name }
  {  getAge() }
  { flag ? '帅':'丑' }
 { getHtag(2) }
 { getHtag(3) }
  { flag ?(
  <div>
    <sapn> is sapn</sapn>
    </div>):null }

  {  true && <span> is sapn</span> }

  <ul>
    { songs.map(song=> <li key={song.id}>{song.name}</li>)}
  
  </ul>
</div>

); }

export default App;

react基础

h1

h2

h3