<!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. SPRING IN ACTION 第4版笔记-第四章ASPECT-ORIENTED SPRING-005-定义切面使用@Aspect、@EnableAspectJAutoProxy、<aop:aspectj-autoproxy>

    一. 假设有如下情况,有一个演凑者和一批观众,要实现在演凑者的演凑方法前织入观众的"坐下"."关手机方法",在演凑结束后,如果成功,则织入观众"鼓掌& ...

  2. 正则表达式（javascript）学习总结

    正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...

  3. C#中如何生成矢量图

    主要的功能就是使用C#画矢量图,然后导出到Word.Excel.Powerpoint中,并且能够再次被编辑.以下是解决过程: 首先应该确定在Office文档中可编辑图形使用的格式:学习了相关资料,了解 ...

  4. 【HDOJ】1050 Moving Tables

    贪心问题,其实我觉得贪心就是合理的考虑最优情况,证明贪心可行即可.这题目没话多久一次ac.这道题需要注意房间号的奇偶性.1 3.2 4的测试数据.答案应该为20. #include <stdio ...

  5. APP-PER-50022: Oracle Human Resources could not retrieve a value for the User Type profile option.

    Symptoms ----------------------- AP > Setup > Organizations Show Error tips: APP-PER-50022: Or ...

  6. Android开发UI之ViewPager及PagerAdapter

    ViewPager,官网链接--http://developer.android.com/reference/android/support/v4/view/ViewPager.html ViewPa ...

  7. 转自 Good morning 的几句精辟的话

    1.志愿者招募 根据流量平衡方程来构图非常方便,而且简单易懂,以后可能成为做网络流的神法之一 简单记一下流量平衡方程构图法的步骤: a.列出需求不等式 b.通过设置松弛变量,将不等式变成等式 c.两两 ...

  8. google官方提供的编译android源码的环境初始化，Initializing a Build Environment

    原文网址:http://source.android.com/source/initializing.html Initializing a Build Environment IN THIS DOC ...

  9. [039] 微信公众帐号开发教程第15篇-自定义菜单的view类型（访问网页）

    引言及内容概要 距离写上一篇文章<自定义菜单的创建及菜单事件响应>整整过了两个月的时间,那时公众平台还没有开放view类型的菜单.在不久前,微信公众平台悄悄开放了view类型的菜单,却没有 ...

  10. app图片规格

    我们定义的app图片规格 app图标需要分iphone和android两套 iphone: 名称 Iphone4 Iphone5 手机尺寸 960*640(高*宽) 1136*640 (高*宽) 电池 ...