本来学的 Vue, 后来项目需要接触到 React 工程. 一开始看到 JSX 、class、Component、render 还是很懵逼的, 所以才有了这个系列, 其实多敲几遍就好了.

UI 主要用 JSX 语法(Javascript 的扩展语法)

  1. // < 开始就解析为html
  2. const el = <h1>hello, world!</h1>
  4. // { 开始就解析为js, {}内可以是任意 js 表达式
  5. // 1 variable
  6. let name = "world"
  7. const el = <h1>hello, {name}!</h1>
  9. // 2 object
  10. let user = {  firstname: "java",  lastname: "script"}
  11. const elOjb = <h1>hello, {user.firstname}</h1>
  • jsx 替代了 html
  • jsx 只能有一个根节点
  • jsx 中的元素的属性需要遵循驼峰命名不能使用 html 原生属性: 如 class => className; onclick => onClick
  • jsx 中自关闭的标签必需关闭:
  • 为了避免自动添加分号导致奇怪的错误, 建议用()包裹jsx语法