从0开始学习React-2-JSX的语法

JSX的注意点

• JSX语法不是字符串，所以不需要加引号
• JSX语法中html标签必须小写，React组件必须大写
• JSX语法只能有一个根标签，如果不想写具体的根标签，可以写一个空标签
• JSX中的标签必须完整闭合（自结束标签必须带/）
• JSX中可以使用{}来嵌入表达式
  • 有值返回的语句就是表达式
• 如果表达式的值是Null、布尔值、undefined，就不会在页面中显示
• 在JSX中，属性可以直接在标签中设置
  • 需要注意
    • class必须使用className
    • style必须使用对象形式
      • style={{ color: 'red' }}

渲染一个列表

const arr = ['孙悟空', '猪八戒', '沙和尚']
const ulEl = <ul>
    { arr.map(itm => <li>{ itm }</li>) }
</ul>

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(ulEl)