React学习笔记五：JSX

JSX

• 必须引入babel，翻译JSX；
• JSX不是字符串，不需要加引号；
• JSX的HTML标签必须小写，React组件应该大写开头；
• JSX中有且仅有一个根标签；
• JSX标签必须正确结束；
• 在JSX中可以使用{}嵌入表达式；
  • 只能写有值的语句，有值的语句就是表达式；
• 如果表达式是空值、布尔值、undefined这些值，将不会显示；
• 在JSX中属性可以直接在标签中设置；
  • class必须使用className
  • style必须使用对象

<script src="https://unpkg.com/react@18.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js"></script>
<!-- 引入babel，翻译jsx -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> 
<script type="text/babel">
  // 命令式编程
  // const button = React.createElement('button', {}, '按钮');

  // 声明式编程；结果导向的编程
  // 在React中可以通过jsx（js扩展）来创建React元素；jsx需要背翻译为js代码，才能背React执行
  // 要在react中使用jsx，必须引用babel

  // jsx就是Reac.createElement()的语法糖
  // jsx执行前都会被babel转换为js代码

  const div = <div>
      这是一个div
      <button>按钮</button>
    </div>
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(div)
</script>

<script type="text/babel">
    const name = '孙悟空';
    const fn = () => 'hello'
    const div = <div 
        id="abc" 
        className="abc" 
        onClick={()=>{alert('123')}} 
        style = {{backgroundColor: 'red',color:'white'}}
      >
      div元素
      <button>按钮</button>
      <div>{name}</div>
      <div>{1+1}</div>
      <div>{fn()}</div>
      <div>{true}</div>
      <div>{undefined}</div>
    </div>
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(div)
</script>