<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!-- 生产环境中不建议使用 -->

        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    </head>

    <body>

        <div id="app">

        </div>

        <!--<script type="text/babel" src="domrender.js"></script>-->   <!--独立js文件-->

        <script type="text/babel">

            //1.JSX 中使用 JavaScript 表达式;表达式写在花括号 {}中;

            //2.JSX 中不能使用 if else 语句，但可以使用三元运算表达式来替代;

            //3.JSX执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。

            var newStyle = {

                fontSize: 30,

                color: 'red'

            };

            var arr = [1,2,3,4,5,6];

            ReactDOM.render(

                <div>

                    {/*注释...这是注释方法不会显示在控制台*/}

                    <h2>菜鸟学习 React</h2>

                    <p data-myselfattr = "nice">自定义属性的用法</p>

                    <h1>{3+3}简单计算</h1>

                    <h1>{2 == 1 ? 'True!' : 'False'}---三元运算符</h1>

                    <p style={newStyle}>React推荐使用内联样式,会在指定元素数字后自动添加 px</p>

                    <p>{arr}---JSX 允许在模板中插入数组，数组会自动展开所有成员结果为:123456</p>

                </div>

                ,

                document.getElementById('app')

            );

        </script>

    </body>

</html>

react基础语法（二）常用语法如：样式 ，自定义属性，常用表达式的更多相关文章

  1. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  2. Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器

    模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...

  3. react基础篇二

    组件 & Props & 生命周期 组件可以将UI切分成一些独立的.可复用的部件,这样你就只需专注于构建每一个单独的部件. 组件从概念上看就像是函数,它可以接收任意的输入值(称之为“p ...

  4. Java基础知识二次学习--第六章 常用类

    第六章 常用类   时间:2017年4月26日16:14:49~2017年4月26日16:56:02 章节:06章_01节~06章_06节 视频长度:20:57+1:15+8:44+1:26+11:2 ...

  5. webpack react基础配置二 热加载

    用到 webpack-dev-server  先安装,注意 装到全局 还是本项目我也没注意  因为之前一直报错,有很小可能是安装到本地解决了,或者是我网络问题: 装到全局:$ npm install ...

  6. react基础学习 二——生命周期

    生命周期mount: mounting装载创建 update更新 unmounting卸载 错误捕获 注意点:生命周期函数的 作用,什么之后用 只有类式组件有生命周期,函数式组件没有生命周期 moun ...

  7. Python 基础语法(二)

    Python 基础语法(二) --------------------------------------------接 Python 基础语法(一) ------------------------ ...

  8. Swift语法基础入门二(数组, 字典, 字符串)

    Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...

  9. web前端学习python之第一章_基础语法(二)

    web前端学习python之第一章_基础语法(二) 前言:最近新做了一个管理系统,前端已经基本完成, 但是后端人手不足没人给我写接口,自力更生丰衣足食, 所以决定自学python自己给自己写接口哈哈哈 ...

  10. Java03-Java语法基础（二）运算符

    Java语法基础(二)运算符 一.运算符 1.算数运算符:+.-.*./.% 1)双目运算符:二元运算符,参加运算的对象有两个(+.-.*./.%) 2)单目运算符:一元运算符,参加运算的对象只有一个 ...

随机推荐

  1. Oracle：ORA-00214

    现场数据库服务器突然断电,启动时,提示如下现象: sql>sqlplus / as sysdba sql>startup ORA-00214: controlfile 'E:\oracle ...

  2. 关于encodeURIComponent的用法

    定义和用法 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码. 语法 encodeURIComponent(URIstring) 参数  描述  URIstring  ...

  3. 预处理指令＃pragram

    #pragma介绍 #pragma是一个预处理指令,pragma的中文意思是『编译指示』.它不是Objective-C中独有的东西(貌似在C/C++中使用比较多),最开始的设计初衷是为了保证代码在不同 ...

  4. BZOJ_2186_[Sdoi2008]沙拉公主的困惑_欧拉函数

    BZOJ_2186_[Sdoi2008]沙拉公主的困惑_欧拉函数 Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行 ...

  5. 【NOIP2017 DAY1T2】 时间复杂度

    [题目链接] 点击打开链接 [算法] 其实这就是一道模拟题啦! 在判error和计算时间复杂度时,我们需要用栈这种数据结构 [代码] 这题的代码还是有些难写的,写的时候一定要有条理! #include ...

  6. data对象转化成后端需要的json格式

    data=JSON.stringify(json_data); $.ajax({type:'post',url:url+'warehouse/create_alliance_out/',data:da ...

  7. Watir: 如何处理简单的网页弹出警告框？

    以下是一个很经典的把Watir与AutoIt连接在一起的实例.如果我们对AutoIT了解的更多,处理类似的问题会更加简单.以下实例会判断页面上是否有某“删除”链接,一旦有该链接,就点击,然后点击弹出的 ...

  8. ASP.NET Core：WebAppCoreRESTful

    ylbtech-ASP.NET Core:WebAppCoreRESTFul 1.返回顶部 1. 2. 3.         4. 2. Controllers返回顶部 1.HomeControlle ...

  9. iphone 在设置了initial-scale=1 之后，在设置滚动条之后，没有滑动效果的解决办法

    iphone在设置了initial-scale=1 之后,我们终于可以以1:1 的比例进行页面设计了. 关于viewport,还有一个很重要的概念是:iphone 的safari 浏览器完全没有滚动条 ...

  10. 怎样在github上协同开发

    How to co-work wither parter via github. Github协同开发情景模拟 Github不仅有很多开源的项目可以参考,同样也是协同开发的最佳工具,接下来的就模拟一下 ...