<!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. TSS 内核栈 用户栈的关系

    http://blog.sina.com.cn/s/blog_673ef8130100qaje.html 该博客不错,有不少有用的信息 中断程序的一开始我们执行一个PUSHALL,把这些积存器保存在核 ...

  2. Autodesk 2014全套密钥

    AUTODESK 2014通用安装序列号: 666-69696969 667-98989898 400-45454545 066-66666666 AUTODESK 2014全系列产品密钥 001F1 ...

  3. 栈和队列的面试题Java

    栈和队列: 面试的时候,栈和队列经常会成对出现来考察.本文包含栈和队列的如下考试内容: (1)栈的创建 (2)队列的创建 (3)两个栈实现一个队列 (4)两个队列实现一个栈 (5)设计含最小函数min ...

  4. hduAnother Graph Game

    http://acm.hdu.edu.cn/showproblem.php?pid=4647 很扯的一题 将每条边的一半权值分给它所连的两个结点 #include <iostream> # ...

  5. 根据价格范围筛选汽车(路由以及JS与Jquery)

    通过输入价格范围,来筛选汽车,主要方法是通过点击“查询”按钮,触发chaxun()方法,利用Jquery和JS获取输入的值,然后为相应的div加载相应的动作,通过更改路由的路径,以此来实现筛选车辆,然 ...

  6. Ajax的同步和异步

    在实际编程过程中,涉及到很多同步和异步的问题,例如: $("#btnTJ").bind("click", function () { //第一条语句 $.pos ...

  7. Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞

    漏洞名称: Linux kernel ‘uio_mmap_physical’函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201311-154 发布时间: 2013-11-13 更新时间: 201 ...

  8. js模拟Map对象，实现key---value

    js模拟Map对象,实现key---value 根据java中map的属性,实现key----value保存 function Map() { var struct = function (key, ...

  9. FastCGI技术

    1         FastCGI介绍 FastCGI:快速通用网关接口(Fast Common Gateway Interface/FastCGI)是一种让交互程序与Web服务器通信的协议.    ...

  10. Prism的IEventAggregator事件聚合器, 事件订阅发布, ViewModel之间的通讯

    WPF中时常会遇到ViewModel之间的通讯,ViewModel并不知道自己的View,但是一个View发生的更改需要通知另外一个View. 举一个例子,软件界面上有个人信息,打开一个界面更改用户的 ...