摘要

react 学习包括几个部分：

  • 文本渲染
  • JSX 语法
  • 组件化思想
  • 数据流

文本渲染

1. 纯文本渲染

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf8" />

    <title>页面无变量渲染模板</title>

</head>

<body>

    <div id="container"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script type="text/jsx">

    var ExampleApplication = React.createClass({

        render: function() {

            return (

                <div className="test">

                    猴赛雷，我的第一个react demo 啊。

                </div>

            );

        }

    });

    var ExampleApplication1 = React.createClass({

        render: function () {

            return (<div>hello word</div>);

        }

    });

    React.render(

        <ExampleApplication1 />,

        document.getElementById('container')

    );

</script>

</html>

2. 普通变量渲染及按时间循环渲染

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>普通变量渲染及按时间循环渲染</title>

</head>

<body>

    <div id="HelloWorld"></div>

    <div id="HelloWorldTime"></div>

    <div id="HelloWorldIndex"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script type="text/jsx">

    var HelloWorldTime = React.createClass({

        render: function() {

            return (

            <p>

                It is {this.props.date.toTimeString()}

            </p>

            );

        }

    });

    var HelloWorldIndex = React.createClass({

        render: function() {

          return (

            <p>

                index: {this.props.index}

            </p>

          );

        }

    });

    var HelloWorld = React.createClass({

        render: function() {

            return (

                <p>

                    你好，{this.props.name}, 欢迎大驾光临！

                </p>

            );

        }

    });

    React.render(

        <HelloWorld name={'huxiaoyun'} />,

        document.getElementById('HelloWorld')

    );

    var index = 0;

    setInterval(function() {

        React.render(

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

            document.getElementById('HelloWorldTime')

        );

        React.render(

            <HelloWorldIndex index={index ++} />,

            document.getElementById('HelloWorldIndex')

        );

    }, 500);

</script>

</html>

3. 没有 JSX 的 React

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>没有 JSX 的 React</title>

</head>

<body>

    <div id="example"></div>

    <div id="example1"></div>

</body>

<script src="../build/react.js"></script>

<script src="../build/JSXTransformer.js"></script>

<script>

    React.render(

        React.createElement('div', null,

            React.createElement('div', null,

                React.createElement('div', null, 'content')

            )

        ),

        document.getElementById('example')

    );

    var child = React.createElement('li', null, 'Text Content');

    var root = React.createElement('ul', { className: 'my-list' }, child);

    React.render(root, document.getElementById('example1'));

</script>

</html>

【JAVASCRIPT】React入门学习-文本渲染的更多相关文章

  1. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  2. React 入门学习笔记2

    摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它 ...

  3. React入门学习

    为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaS ...

  4. react入门学习及总结

    前言 不知不觉一年又过去了,新的一年又到来,2019应该要好好思考,好好学点有用的东西,规划下自己今后的学习方向,不要再像以前那样感觉很迷茫. react简单介绍 官网及中文文档 https://re ...

  5. React 入门学习笔记1

    摘自阮一峰:React入门实例教程,转载请注明出处. 一. 使用React的html模板 使用React, 我们需要加载3个库,react.js, react-dom.js, 和browser.js. ...

  6. [Todo] Nodejs学习及Spider实验（包括php入门学习、React入门学习）

    /Users/baidu/Documents/Data/Interview/Web-Server开发 深入浅出Node.js-f46c http://blog.csdn.net/u012273376/ ...

  7. 记JavaScript的入门学习（三）

    2016.12.6晚上十点半完成JavaScript的第二章学习,看了点第三章的开头总述,都说原生js每一个知识点都可以分分钟钟让你放弃,而我在努力探索着.月末的时候就回家放假了,希望在家也可以有个小 ...

  8. 记JavaScript的入门学习（二）

    2016年11月25号,利用上午时间学习了JavaScript的数据类型和变量,下午就该去图书馆泡书了. 看完变量的本章节,发现我可能不能一天结束,那我就利用上午和晚上九点回来的时间完成吧.把心态调整 ...

  9. React 入门学习笔记整理（二）—— JSX简介与语法

    先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; ...

随机推荐

  1. Java8部分新特性的学习

    Java8中的新特性 一.Lambda表达式 Lambda表达式可以理解为一种可传递的匿名函数:它没有名称,但又参数列表.函数主体.返回类型,可能还有一个可以抛出的异常列表. 匿名:和匿名类类似的,它 ...

  2. MongoDB--架构搭建（主从、副本集）之副本集

    任何时间点只有一个活跃节点,其他为备份节点,当活跃节点泵机,将会通过选举规则,从备选节点选一个当活跃节点,当泵机的节点恢复之后,则变为备用节点. 节点类型 stabdard:常规节点,存储完整数据,参 ...

  3. ICG_System之全自动代码生成器V2.0版本

    大家好! 早在2014年本人就已经利用业余时间开发自己的ICG之代码生成器系统.依靠bootstrap的崛起本人也在不断完善此应用.目的是为了减少开发人员的工作量. 减少不必要的复制粘贴操作,该系统已 ...

  4. 使用linux sort给一个文件里的内容按规则排序

    任务:report.txt文件里有以下内容:记录了一些方法的执行时间,要求按执行时间降序排列. void com.dustpan.zeus.core.service.MergeService.star ...

  5. 新浪云计算SAE部署代码过程

    第一步:创建本地工作目录: 创建一个新文件夹,可以使用应用名为文件夹名,比如命名为test 第二步:从SAE的SVN仓库检出(checkout)一个应用的全部版本代码,右键–>点击“SVN Ch ...

  6. 虚拟机VMware网络类型&&SSH远程连接Linux

    前言: Linux专题是16年11月开始写,说来惭愧,已经5个月没学Linux,至今感觉连入门还没达到.暑假实习有投运维开发岗位,无奈对Linux不熟悉,校招简历也被刷了.so, 我打算先花1个月内的 ...

  7. awvs 中文手册详细版

    目录: 0×00.什么是Acunetix Web Vulnarability Scanner ( What is AWVS?) 0×01.AWVS安装过程.主要文件介绍.界面简介.主要操作区域简介(I ...

  8. 基于vue2.0的网易云音乐 (实时更新)

    本人在自学vue,之后想在学习过程中加以实践.由于之前有做过jquery的播放器效果,ui仿照网易云,地址 www.daiwei.org/music 于是就想做vue 的网易云播放器,网上也有类似的项 ...

  9. 简单地总结几种常见web攻击手段及其防御方式

    web攻击手段有几种,本文简单介绍几种常见的攻击手段及其防御方式 XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS XSS 概念 全称是跨站脚本攻击(Cross Site Scr ...

  10. Machine Learning and Data Mining Lecture 1

    Machine Learning and Data Mining Lecture 1 1. The learning problem - Outline     1.1 Example of mach ...