• React学习


    1.React运用的js

    react主要用到的是其中的/react.js和react-dom.js,而编写js文件时,因为react有自己的一套语法,需要babel.js转码

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    2.React的JSX语法

    语法:const element = <h1>hello,world!</h1>;

    JSX代表JS对象,他是JavaScript语法扩展,在react中可以方便的用来描述UI。JSX本身也是一个表达式,在编译后,JSX表达式会变成普通的JavaScript对象,你可以将它赋值给变量,可以将他作为参数,也可以在函数中返回JSX。

    eg:if语句中使用JSX,并将JSX作为函数返回值。实际上经过编译后会变成JavaScript对象

    function text(user){

    if(user){

      return <h1>{hello,formatName(user)}!</h1>

    }

      return <h1>hello,youself</h1>

    }

    经过babel编译后

    function text(user){

    if(user){

      return React.createElement(

        "h1",

        null,

        "hello,",

        formatStr(user),

        "!"

      );

    }

      return React.createElement(

        "h1",

        null,

        "hello,youself"

      );

    }

    常用的表达式

    • 变量名;
    • 函数定义表达式;
    • 属性访问表达式;
    • 函数调用表达式;
    • 算数表达式;
    • 关系表达式;
    • 逻辑表达式;

    要注意的是if语句以及for循环不是JavaScript表达式,不能直接作为表达式写在{}中,但是可以先将其赋值给一个变量(变量是一个JavaScript表达式)

    eg:

    function texts (pro){

    let des;

    if(pro.number % 2 ==0){

      des = <strong>even</strong>;

    }else{

      des = <i>odd</i>

    }

      return<div>{props.number} is an {description} number</div>;

    }

    /react.min.js

  • 相关阅读:
    HAOI2018 简要题解
    HAOI2017 简要题解
    BZOJ 5477: 星际穿越
    HAOI2016 简要题解
    C#oracle还原imp实例
    oracle备份imp命令大全
    C#oracle备份和还原
    win10安装CAD后出现致命错误
    Oracle 恢复数据后,数据库中中文变成问号解决方法
    CAD 安装时出现.net frameword 3.5安装不上的问题
  • 原文地址:https://www.cnblogs.com/alizhi/p/9068262.html
Copyright © 2020-2023  润新知