zoukankan      html  css  js  c++  java
  • 6、手把手教React Native实战之JSX入门

     React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现!

    JSX并不是一门新的语言,仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。,最后每个HTML标签都转化为JavaScript代码来运行

    1.环境

    2.载入方式

    3.标签  HTML标签 与  ReactJS创建的组件类标签(首字母一定要大写)

    4.转换 解析器

      `<h3>输入</h3>`  转换成:

    React.createElement("h3",null,"输入") 返回一个ReactElement对象

    5.执行JavaScript表达式

    var msg="我是东方耀";

    `<h1>{msg}</h1>`

    React.createElement("h1",null,msg)

    6.注释
       单行://
       多行:/*注释文本*/

    7.属性

      `var msg=<h1 width="10px">我是东方耀</h1>`

      React.createElement("h1",{"10px"},"我是东方耀")

    8.延展属性
     
     使用ES6的语法

     var props={};
     props.foo="1";
     props.bar="1";

     `<h1 {...props} foo="2" >欢迎关注我的微信号</h1>` 转换成:

    React.createElement("h1",React.__spread({},props,{foo:"2"}),"欢迎关注我的微信号")

    9.自定义属性(HTML5给出了方案,凡是以data-开头的自定义属性,可渲染到页面)

    10.显示HTML 显示一段HMTL字符串,而不是html节点

    借助一个属性 _html

    `<div>{{_html:'<h1>我是东方耀,欢迎关注我的微信号</h1>'}}</div>`

    11.样式的使用

    style属性   js对象  外层{}按照JSX语法  内层{}是JavaScript对象

    12.事件绑定

     注意:onClick  调用bind方法(设定作用域,要传递的参数)


    ##6、配套视频(下载地址):https://yunpan.cn/cYINUwNP6nj57  访问密码 6890 

  • 相关阅读:
    修改MySQL密码
    struts入门
    监听
    游戏外挂教程(转)
    “无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性 “之解决
    C# PropertyGrid控件应用心得
    登录时的"记住我"
    自动登录、记住我(保存登陆状态)实现
    UpdatePanel的使用方法
    asp.net中使用基于角色role的Forms验证
  • 原文地址:https://www.cnblogs.com/dfy888/p/5638201.html
Copyright © 2011-2022 走看看