摘要

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. 浅谈java内存分配和回收策略

    一.导论 java技术体系中所提到的内存自动化管理归根结底就是内存的分配与回收两个问题,之前已经和大家谈过java回收的相关知识,今天来和大家聊聊java对象的在内存中的分配.通俗的讲,对象的内存分配 ...

  2. linux iptables规则介绍

    今天又学习了一下iptables,做一点总结来方便以后查阅. Netfilter(网络过滤器)是Linux操作系统核心层内部的一个数据包处理模块,主要负责数据包的拦截和转发,而iptables是Net ...

  3. 详解 try-with-resource

    [TOC] Oracle官方文档: http://docs.oracle.com/javase/7/docs/technotes/guides/language/try-with-resources. ...

  4. 更改zendstudio花括号匹配显示的方法

  5. svn文件图

  6. 【Android Developers Training】 36. 设置文件共享

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

  7. Mac应用推荐

    知识管理 Outline Curio Together 开发 Clion Vim + spf13 Transmit 辅助应用 Moom PopClip Timing AppClean Markdown ...

  8. CSS3学习系列之背景相关样式（二）

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  9. Spring IOC bean加载过程

    首先我们不要在学习Spring的开始产生畏难情绪.Spring没有臆想的那么高深,相反,它帮我们再项目开发中制定项目框架,简化项目开发.它的主要功能是将项目开发中繁琐的过程流程化,模式化,使用户仅在固 ...

  10. dashDB - Introduction and DB Tools

    dashDB - Introduction dashDB is a database that is designed for performance and scale. It offers sea ...