摘要

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. CPU-Z五大主要功能及使用方法初步了解

    CPU-Z这款软件除了具有查看CPU温度这个功能之外,还有很多其他的功能.今天就和小编一起去看看CPU-Z的5大功能以及他们的使用方法吧! CPU信息标签页 CPU-Z介绍: CPU-Z是一款著名的免 ...

  2. HTML里的哪一部分Javascript 会在页面加载的时候被执行？

    最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...

  3. JAVAEE——struts2_04：自定义拦截器、struts2标签、登陆功能和校验登陆拦截器的实现

    一.自定义拦截器 1.架构 2.拦截器创建 //拦截器:第一种创建方式 //拦截器生命周期:随项目的启动而创建,随项目关闭而销毁 public class MyInterceptor implemen ...

  4. Google帝国研究——Google的产业构成

                                                                                        Google帝国研究--Goog ...

  5. Easyui设置动态表格,动态导出数据实例,附Dome

    最近碰到一个需求,需要提供一个弹出页面选择列表页面需要显示的列,页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化. 下面直接上代码 1.设置需要显示的列columus为全局对象,用于子 ...

  6. php设计模式--命名空间与自动载入

    关于命名空间: 最早的php是没有命名空间的概念的,这样不能存在相同名称的类或者函数,当项目变大了之后,产生冲突的可能性就高了,代码量也会变大,为了规划,从php5.3开始对命名空间就支持了. 说明代 ...

  7. yii2 入口文件 提示syntax error, unexpected T_OBJECT_OPERATOR

    PHP Version 5.3.3 原因是php的安装版本太低

  8. [leetcode-625-Minimum Factorization]

    Given a positive integer a, find the smallest positive integer b whose multiplication of each digit ...

  9. 2.如何修改apache的默认端口

    打开apache的conf文件夹,找到server.xml,修改里面这段的port即可,重启apache,修改成功

  10. 【summary】JQuery 相关css、ajax、数据操作函数或方法

    总结一下JQuery常用的函数方法,更加系统的整理一下. JQuery遍历的一些函数: 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集 ...