React getInitialState desc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../build/react-with-addons.js"></script>
    <script src="../../build/JSXTransformer.js"></script>
</head>
<body>
    <div id="demo"></div>
    <hr>
    <div id="app"></div>
    <div id="likeBtn"></div>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var HelloMessage = React.createClass({
            render: function () {
                return <div>Hello, {this.props.name}</div>;
            }
        });

        React.renderComponent(<HelloMessage name="Jack"/>, document.getElementById(‘demo‘));
    </script>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var App = React.createClass({
            componentDidMount: function () {
                console.log(this.props.children);
            },
            render: function () {
                return <div><span></span></div>
            }
        });

        React.renderComponent(<App></App>, document.getElementById(‘app‘));
    </script>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var LikeButton = React.createClass({
            getInitialState: function () {
                return {
                    liked: false
                };
            },
            handleClick: function (event) {
                this.setState({
                    liked: !this.state.liked
                });
            },
            handleMouseEnter: function () {
                console.log(this);
            },
            render: function () {
                var text = this.state.liked ? ‘like‘ : ‘unlike‘;
                return (
                    <p onClick= {this.handleClick} >
                        You {text} Click to toggle
                    </p>
                );
            }
        });

        React.renderComponent(<LikeButton />, document.getElementById(‘likeBtn‘));
    </script>
</body>
</html>
时间: 2024-11-07 09:19:42

React getInitialState desc的相关文章

[React]全自动数据表格组件——BodeGrid

表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑.查询.排序.分页.自定义显示以及一些操作按钮.我们逐一深入进行探讨以及介绍我的设计思路: 新增和编辑 想想我们最开始写新增编辑页面是怎么做的,是不是一个页面一个页面的写,然后要么表单提交要么Ajax提交.后台有无数个新增和编辑的视图页,现在想想真是恐怖啊,看着都累.后面接触到kendoui的grid组件,看到只需要配置列的属性以及保存的地址就能自动完成新增和编辑功能,着实让我兴奋了一把.然而不幸的是我几乎找遍了react所

學習 React.js:用 Node 和 React.js 創建一個實時的 Twitter 流

Build A Real-Time Twitter Stream with Node and React.js By Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第二章,該系列文章將集中在怎麼熟練並且有效的使用臉書的 React 庫上.如果你沒有看過第一章,概念和起步,我非常建議你繼續看下去之前,回去看看. 今天我們準備創建用 React 來創建一個應用,通過 Isomorphic Javascript. Iso-啥? Isomorphic. Java

React学习—组件

一.定义 组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. 二.组件的分类 1.函数式组件(无状态组件) 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等:这种通过多个简单然后合并成一个大应用的设计模式被提倡. function Welcome(props) { re

React核心内容归纳总结

状态.属性.组件API.组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在constructor里写方法 constructor(props) { super(props); this.state = { liked: false }; this.handleClick = (e) => { this.setState({liked: !this.state.liked}); };

React官网学习笔记

欢迎指导与讨论 : ) 前言 本文主要是笔者在React英文官网学习时整理的笔记.由于笔者水平有限,如有错误恳请指出 O(∩_∩)O 一 .Tutoial 篇 1 . React的组件类名的首字母必须是大写  var Comment = React.creatClass({..})  class Comment extends Component(){...} 2 . 我们需要往一个对象里传入一些方法,并把这个对象以参数的形式传到React.creatClass( )里.其中最重要的方法是ren

React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50664323 本文出自:[江清清的博客] (一)前言 今天我们一起来看一下PullToRefreshViewAndroid下拉刷新组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该PullToRefr

React Native ——实现一个简单的抓取github上的项目数据列表

/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, TextInput, ListView, } = React; var GIT_URL = 'https://api.github.com/sea

React事件属性

一.简介 二.滚动例子,滚动改变颜色 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>React涓殑浜嬩欢</title> 6 </head> 7 <body> 8 <script src="./react-0.13.2/react-0.

初识React

原文地址:北云软件-初识React 专注于UI 在MVC分层设计模式中,react常被拿来实现视图层(V).React不依赖于技术栈的其他部分,因此可以方便的在现有项目中尝试用它来实现一个小特性. 虚拟DOM React从DOM中抽象出来,给出一种更简洁的编程模型,且性能表现更好.能够通过NodeJS实现服务端渲染,通过React Native开发原生app. 数据流React实现单向.响应式数据流,减少boilerplate且比传统数据绑定更容易理解. 简洁的组件React的组件都实现了一个r