JSX入门

  1. 简介:
    1. 概念:JSX并不是一门新的语言,仅仅是语法糖,允许开发者在JavaScript中书写Html语法,最后每个Html标签都转化为JavaScript代码来运行。
    2. 环境:需要导入以下三个核心文件:
      1. react.js
      2. react-dom.js
      3. browser.min.js
    3. 载入方式:同样分为内链和外链。
    4. 标签类型:可分为两种
      1. 标准的Html标签
      2. 通过React.createClass()方法创建的组件类标签(一般首字母大写,为了区分Html标签)
    5. 转换:当遇到标签时,会调用解析器将标签进行转换

      标题

      则会被转换成React.createElement("h3", {width:'10px'}, "标题"); ,同时会返回一个ReactElement对象(注:其参数>=3个,其中前两个参数的分别为:标签、属性,第三个以及以后的参数为其子元素)
      6. 执行JavaScript表达式
      > 如
      > > var msg = "Message"; >

      {msg}

      >

      7. 延展属性
      ```
      var porps={};
      props.foo="1";
      props.bar="1";

      Some Messages


      //以上代码可转换成以下
      //... 遍历对象的所有属性
      React.creatElement("h1", React.__spread({}, props, {foo:"2"}), "Some Message");

    8. 自定义属性:
        > 注:H5给出方案,凡是以 data- 开头的自定义属性,可以渲染到页面,其他自定义属性将被忽略

你可能感兴趣的:(JSX入门)