<!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. 关于 ASP.NET MVC 4 如果管理用户

    很久没上来写博客,因为自己没写博客的日子里去学了一下OBJECTIVE-C 和 ASP.NET MVC.最近在学ASP.NET MVC 4,有个问题一直在困扰着我,就是怎样管理用SIMPLE MEMB ...

  2. 如何才能学到Qt的精髓——信号槽之间的无关性，提供了绝佳的对象间通讯方式，QT的GUI全是自己的一套，并且完全开源，提供了一个绝好机会窥视gui具体实现

    姚冬,中老年程序员 叶韵.KY Xu.赵奋强 等人赞同 被邀请了很久了,一直在思考,今天终于下决心开始写回答. 这个问题的确是够大的,Qt的代码规模在整个开源世界里也是名列前茅的,这么大的项目其中的精 ...

  3. C#操作Access

    C#操作Access数据库的基础知识浅析 C#操作Access数据库的基础知识都有什么呢? C#操作Access数据库的基础知识1. 通过ADO.NET的OleDb相关类来操作Access 主要知识点 ...

  4. 《深入理解linux内核》第一章 序论

    硬链接的限制

  5. Mysql常用show命令,show variables like xxx 详解,mysql运行时参数

    MySQL中有很多的基本命令,show命令也是其中之一,在很多使用者中对show命令的使用还容易产生混淆,本文汇集了show命令的众多用法. 详细: http://dev.mysql.com/doc/ ...

  6. MySQL sql_slave_skip_counter

    因为mysql的主从复制是逻辑复制,所以slave在apply relay log的过程中,经常会遇到错误,而参数sql_slave_skip_counter可以设置跳过多少个event,让slave ...

  7. C#中is、as的区别

    一.C#类型的转换 在c#中类型的转换分两种:显式和隐式,基本的规则如下: 1.基类对象转化为子类对象,必须显式转换,规则:(类型名) 对象.2.值类型和引用类型的转换采用装箱(boxing)或拆箱( ...

  8. 【转】在Xcode中使用Git进行源码版本控制 -- 不错

    原文网址:http://www.cocoachina.com/ios/20140524/8536.html 本文翻译自Understanding Git Source Control in Xcode ...

  9. 【转】JNI学习积累之一 ---- 常用函数大全

    原文网址:http://blog.csdn.net/qinjuning/article/details/7595104 本文原创,转载请注明出处:http://blog.csdn.net/qinjun ...

  10. 使用 EPUB 制作数字图书

    基于 XML 的开放式 eBook 格式 是否需要分发文档.创建电子图书或者把喜欢的博客文章存档?EPUB 是一种开放式的数字图书规范,以常用的技术如 XML.CSS 和 XHTML 为基础,EPUB ...