<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>React Lesson 0</title>

</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>

<script type="text/jsx">

    //First way: ReactApp, the first letter should be capitialize

    var React_app = React.createClass({

        render: function() {

            return <h1>Hello React World!</h1>

        }

    });

    React.render(<React_app />, document.body);

    //second way:

    /*var App = React.createClass({

        render: function(){

            return React.DOM.h1(null, 'Hello React DOM'); //1: attr, 2: value

        }

    });

    React.render(App(), document.body);*/

    //Third way:

    /*var App = React.createClass({

        render: function() {

            return React.createElement("h1", null, "Hello React Element"); //1: tag, 2: attr, 3: value

        }

    });

    React.render(React.createElement(App), document.body);*/

</script>

</body>

</html>

[React] React Fundamentals: First Component的更多相关文章

  1. React.createClass和extends Component的区别

    React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...

  2. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

  3. React 的 PureComponent Vs Component

    一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能 1.所谓浅比较 ...

  4. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  5. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  6. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  7. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  8. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  9. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  10. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

随机推荐

  1. SQLite入门与分析(八)---存储模型(3)

    写在前面:接上一节,本节主要讨论索引页面格式,以及索引与查询优化的关系. (1)索引页面格式sqlite> select * from sqlite_master;table|episodes| ...

  2. java.sizeOf

    Introduction With java.SizeOf you can measure the real memory size of your Java objects. Download it ...

  3. Two-Phase Locking

    两阶段封锁(Two-Phase Locking) 两段锁协议的内容 1. 在对任何数据进行读.写操作之前,事务首先要获得对该数据的封锁 2. 在释放一个封锁之后,事务不再获得任何其他封锁. “两段”锁 ...

  4. RESTFul API 一些文章

    http://www.ibm.com/developerworks/cn/web/1103_chenyan_restapi/index.html

  5. S5P4418开发板使用要点

    一.调试工具 1)USB 转串口驱动:用于驱动板子的串口板,电脑与板子进行调试串口通信2)量产软件 USB驱动安装:用于 NXUsbBurner_Ver1.0.6 软件镜像烧写(量产工具)3)调试工具 ...

  6. 【HDOJ】1238 Substrings

    深搜+剪枝,简单字符串. #include <stdio.h> #include <string.h> #define MAXLEN 105 #define MAXNUM 10 ...

  7. [LOJ 1008] Fibsieve`s Fantabulous Birthday

    A - Fibsieve`s Fantabulous Birthday Time Limit:500MS     Memory Limit:32768KB     64bit IO Format:%l ...

  8. Apache虚拟主机(vhost)配置教程

    使用apache来配置虚拟主机,在单一系统上运行多个网站. 现在很多linux主机使用apache作为web服务器的,大部分是基于这个原理来配置虚拟主机的. 下面就windows下以apache 2. ...

  9. 从零开始学习jQuery (十) jQueryUI常用功能实战

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...

  10. ZOJ3732 Graph Reconstruction Havel-Hakimi定理

    分析: 给定一个非负整数序列{dn},若存在一个无向图使得图中各点的度与此序列一一对应,则称此序列可图化. 进一步,若图为简单图,则称此序列可简单图化 (来自百度百科) 可简单图化的判定可以用Have ...