<!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">

            //1. React实例

            /*如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel;

            Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。

            通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。*/

            ReactDOM.render(

            <h1>Hello, world!</h1>,

            document.getElementById('app')

            );

            //2.更新元素渲染

            /*React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。

            目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法*/

            function addEle() {

              const element = (

                <div>

                  <h1>第一次渲染!</h1>

                  <h2>现在是 {new Date().toLocaleTimeString()}.</h2>

                </div>

              );

              ReactDOM.render(

                element,

                document.getElementById('app')

              );

            }

            setInterval(addEle, 500);

            //封装下vvvvvvv  toLocaleTimeString()方法根据本地时间把 Date对象的时间部分转换为字符串;

            function Setdom(props) {

              return (

                <div>

                  <h1>第二次渲染!</h1>

                  <h2>现在是 {props.date.toLocaleTimeString()}.</h2>

                </div>

              );

            }

            function newEle() {

              ReactDOM.render(

                <Setdom date={new Date()} />,

                document.getElementById('app')

              );

            }

            setInterval(newEle, 1000);

            //React.Component的 ES6 类，该类封装了要展示的元素，需要注意的是在 render()方法中，需要使用 this.props替换 props：

            class EsDom extends React.Component {

              render() {

                return (

                  <div>

                    <h1>第三次渲染!</h1>

                    <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>

                  </div>

                );

              }

            }

            function esAddDom() {

              ReactDOM.render(

                <EsDom date={new Date()} />,

                document.getElementById('app')

              );

            }

            setInterval(esAddDom, 2500);

        </script>

    </body>

</html>

react基础语法（一）元素渲染和基础语法规则的更多相关文章

  1. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

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

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

  3. react 也就这么回事 04 —— 元素渲染

    为了便于后续理解,我们再来回顾和总结前面几个章节的内容 1 元素及其创建 元素是构成 React 应用的最小砖块. 元素描述了你在屏幕上想看到的内容. const element = <h1&g ...

  4. react学习（二）--元素渲染

    元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...

  5. HTML5 基础内容（元素/属性/格式化）

    HTML基础 1.HTML元素 1.1 元素指的是开始标签到结束标签的所有代码. 1.2 元素的内容是开始标签与结束标签之间的内容. 1.3大多数HTML元素可用有属性. 1.4标签可以拥有属性为元素 ...

  6. Python基础之函数：3、多层语法糖、装饰器和装饰器修复技术及递归函数

    目录 一.多层语法糖 1.什么是多层语法糖: 2.多层语法糖用法: 二.有参装饰器 1.什么是有参装饰器: 2.有参装饰器的作用: 三.装饰器修复技术 1.什么是装饰器修复技术: 四.递归函数 1.什 ...

  7. Java基础中一些容易被忽视的语法小细节总结

    一:语法细节 1. Java中的命名规则: package:统一使用小写字母 class:首字母大写,使用驼峰标识 method:首字母小写,使用驼峰标识 field:首字母小写,使用驼峰标识 sta ...

  8. 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端

    在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...

  9. 详解react/redux的服务端渲染：页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

随机推荐

  1. 让振动器振动起来——Vibrator的使用

    AndroidManifest.xml 获取系统权限 <uses-permission android:name="android.permission.VIBRATE"/& ...

  2. codeforces 690C1 C1. Brain Network (easy)(水题)

    题目链接: C1. Brain Network (easy) time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  3. [存档]获取通讯录信息并写到SD卡上

      下面是代码,不过没有字母表的顺序排列: package com.example.getcontacts; import java.io.FileWriter; import java.io.IOE ...

  4. [angularJS]ng-hide|ng-show切换

    <div class="row ng-scope"> <div class="col-lg-12"> <h1 class=&quo ...

  5. CMake 手册详解（二十）

    SirDigit CMake 手册详解(二十) CMD#51: list 列表操作命令. list(LENGTH <list> <output variable>) list( ...

  6. Start Developing Mac Apps -- Human Interface Design 用户界面设计

    Human Interface Design It’s not enough to create an app that works. Users expect Mac apps to be powe ...

  7. centos7添加新硬盘并挂载

    一.查看现有磁盘设备 fdisk -l 发现/dev/sdb 为新加的硬盘: 二.开始分区 fdisk /dev/sdb fdisk -l #再次查看分区情况,已经有了/dev/sdb1 三.创建文件 ...

  8. UT源码 045

    (3)设计佣金问题的程序 commission方法是用来计算销售佣金的需求,手机配件的销售商,手机配件有耳机(headphone).手机壳(Mobile phone shell).手机贴膜(Cellp ...

  9. C++笔试题库之编程、问答题 300~305道

    301． 以下代码有什么问题? cout << (true?1:”1″) << endl; 答:三元表达式“?:”问号后面的两个操作数必须为同一类型. 302．以下代码能够编译 ...

  10. poj1837【背包】

    题意: 有一根杆子,给出一些杆子上的位置,位置上能放重物,再给出一些重物的重量. 重物都需要被使用,但是位置不一定都要用到. 问你能有多少种方法让这个杆子平衡. 思路: 在位置上是0/1背包思想,取或 ...