摘要

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. 实现容器的底层技术 - 每天5分钟玩转 Docker 容器技术（30）

    为了更好地理解容器的特性,本节我们将讨论容器的底层实现技术.cgroup 和 namespace 是最重要的两种技术.cgroup 实现资源限额, namespace 实现资源隔离. cgroup c ...

  2. Mac远程连接windows报错“证书或相关链无效，是否仍要连接到此计算机”的处理办法。

    这个主要是因为策略组设置的问题.详细的设置方法如下: 本地计算机策略>计算机配置>管理模板>windows组件>远程桌面服务>远程桌面会话主机>安全>远程(R ...

  3. 实现一个javascript手势库 -- base-gesture.js

    现在移动端这么普及呢,我们在手机上可以操作更多了.对于网页来说实现一些丰富的操作感觉也是非常有必要的,对吧(如果你仅仅需要click,,那就当我没说咯...)~~比如实现上下,左右滑动,点击之类的,加 ...

  4. 如何在前端模版引擎开发中避免使用eval函数

    前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用.于是根据自己对模版引擎的理解,定义自己的模版格式,然后,根据自己定义的格式,编写处理函数,将模版标签中的字符串,解析成可执行的字 ...

  5. fastJson将json字符串转换为map

    public class JsonUtil { /** * 将json转化成map * @param jsonStr * @return */ public static Map<String, ...

  6. 关于cookie与session的理解

    服务器端并不能捕获客户端的浏览器关闭事件,因此你关闭浏览器以后,服务器端那个Session还是存在的,要超时以后才被回收,启动一个新的浏览器会启动一个新的session,所以他不认你了session永 ...

  7. Android recyclerView的空数据显示

    直接分享链接:http://blog.csdn.net/whitley_gong/article/details/51244723

  8. 【Android Developers Training】 50. 控制相机

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  9. 【Android Developers Training】 20. 创建一个Fragment

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  10. JAVA基础——类和对象

    java类与对象学习笔记 一.成员变量和局部变量 (1)定义 1.成员变量 在类中定义,用来描述对象将要有什么.(默认的成员变量值为0) 2.局部变量 在类的方法中定义,在方法中临时保存数据. 演示示 ...