<html>
    <head>
        <title>hellow</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
        <meta charset="utf-8"  />
    </head>
    <body>
        <div id="root">

</div>

<script type="text/jsx">
        //创建组建
        var TestButtonComponent = React.createClass({
            handleClick:function(event){
                var tipsE = React.findDOMNode(this.refs.tips);
                if(tipsE.style.display === 'none'){
                    tipsE.style.display = 'inline';
                }else{
                    tipsE.style.display = 'none';
                }
                event.stopPropagation();    //阻止事件冒泡
                event.preventDefault();     //阻止默认事件
            },
            render:function(){
                return (
                        <div>
                            <button onClick={this.handleClick}>显示|隐藏</button><span ref="tips">测试button</span>
                        </div>);
            }
        });

var TestInputComponent = React.createClass({
            getInitialState:function(){
                return {
                    inputContent:'ii'
                };
            },
            handleChange:function(event){
                this.setState({
                    inputContent:event.target.value
                });
            },
            render:function(){
                return (
                    <div>
                        <input type="text" onChange={this.handleChange} /> <span>{this.state.inputContent}</span>
                    </div>
                );
            }
        });

//调用组建
        React.render(
            <div>
                <TestButtonComponent />
                <br/> <br/>
                <br/>
                <TestInputComponent />
            </div>,
            document.getElementById('root')
        );

</script>
    </body>

<html>

react.js 测试的更多相关文章

  1. react.js 各种小测试笔记

    首先看一个 基础html  至于其中的 js 问价大家去官网下载就好了. <html> <head> <script src="../build/react.j ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  4. React.js入门必须知道的那些事

    首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...

  5. React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

    对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...

  6. 使用 React.js 的渐进式 Web 应用程序：第 1 部分 - 介绍

      使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...

  7. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  8. 谈谈 React.js 的核心入门知识

    近来React.js变得越来越流行,本文就来谈一谈React.js的入门实践,通过分析一些常用的概念,以及提供一些入门 的最佳编程编程方式,仅供参考. 首先需要搞懂的是,React并不是一个框架,Re ...

  9. 当今流行的 React.js 适用于怎样的 Web App？

    外村 和仁(株式会社 ピクセルグリッド)  React.js是什么? React.js是Facebook开发的框架. http://facebook.github.io/react/ 官网上的描述是「 ...

随机推荐

  1. [Docker] Hooking a Volume to Node.js Source Code

    Normally when you create a Volume, it will store in Docket Host, you can also tell the folder which ...

  2. 2014秋C++ 第9周项目 循环程序设计

    课程主页在http://blog.csdn.net/sxhelijian/article/details/39152703.课程资源在云学堂"贺老师课堂"同步展示,使用的帐号请到课 ...

  3. android中NavigationView（Design Support）的使用

    NavigationView可以实现美观的菜单功能展示,下面看一下怎么使用NavigationView 先是主Activity activity_main.xml: <?xml version= ...

  4. KindEditor-编辑器配置参数属性

    KindEditor-源码分析 通过使用KE.show(config)方法即可将编辑器添加到文档中.下面是一段源码: KE.show = function(args) {     KE.init(ar ...

  5. 数据对接—kettle使用之四

    上一篇介绍了表输出插件,并通过实例介绍插件的简单使用,如果有这样的需求大家可以参考一下并深入研究插件的其它细节设置.这一篇我们介绍和表输出对应的插件(表输入)的使用. 表输入: 1. 从步骤插入数据: ...

  6. PYTHON如何降级？

    到/usr/bin里面ls -l python*看看里面有多个版本的,把python2.6链接到python就可以了1.先把原来的删掉 rm python2.ln -s /usr/bin/python ...

  7. cocos2d-js 3.0 rc2 自定义UI控件组件 例子：能播放动画的MenuItem。MenuItemSprite的bug

    其实总体自定义UI组件都比较简单,尤其是cocos2d-js是开源的,如果有什么不明白的直接看js代码或者C++代码即可.当然js代码基本就够了. 另外,js的ctor函数虽然说是构造函数,但毕竟不是 ...

  8. C++11中的mutex, lock，condition variable实现分析

    本文分析的是llvm libc++的实现:http://libcxx.llvm.org/ C++11中的各种mutex, lock对象,实际上都是对posix的mutex,condition的封装.不 ...

  9. eclipse与SVN 结合（删除SVN中已经上传的问题）

    问题是: 我有一个文件已经上传到了SVN ,但是我想把这个在SVN上的目录删除掉? 解决方法如下: 1,第一步,先在本地删除所有的你需要删除的文件: 2,第二步,选择当前的项目右键“Team”—“Up ...

  10. 【Linux】awk详细介绍

    awk简介 awk是一种使用方便且表现力很强的编程语言,它可以应用在多种不同的计算与数据处理任务中.由于awk天生提供对文件中文本分列进行处理,所以如果一个文件中的每行都被特定的分隔符(常见的是空格) ...