关于react.js:jsx学习笔记

54次阅读

共计 643 个字符,预计需要花费 2 分钟才能阅读完成。

什么是 JSX?

  1. 全称: JavaScript XML
  2. react 定义的一种相似于 XML 的 JS 扩大语法: JS + XML 实质是 React.createElement(component, props, …children)办法的语法糖
  3. 作用: 用来简化创立虚构 DOM
    1) 写法:var ele = <h1>Hello JSX!</h1>
    2) 留神 1:它不是字符串, 也不是 HTML/XML 标签
    3) 留神 2:它最终产生的就是一个 JS 对象
  4. 标签名任意: HTML 标签或其它标签
  5. 标签属性任意: HTML 标签属性或其它
  6. 根本语法规定:
    1) 遇到 < 结尾的代码, 以标签的语法解析: html 同名标签转换为 html 同名元素, 其它标签须要特地解析
    2) 遇到以 {结尾的代码,以 JS 语法解析: 标签中的 js 表达式必须用{} 蕴含
  7. babel.js 的作用:
    1) 浏览器不能间接解析 JSX 代码, 须要 babel 转译为纯 JS 的代码能力运行
    2) 只有用了 JSX,都要加上 type=”text/babel”, 申明须要 babel 来解决

JSX 的语法规定

1. 定义虚构 DOM 时,不要写引号。
2. 标签中混入 JS 表达式时要用 {}。
3. 款式的类名指定不要用 class,要用 className。
4. 内联款式,要用 style={{key:value}} 的模式去写。
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母:
(1). 若小写字母结尾,则将该标签转为 html 中同名元素,若 html 中无该标签对应的同名元素,则报错。
(2). 若大写字母结尾,react 就去渲染对应的组件,若组件没有定义,则报错。

正文完
 0