<!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. DHTMLX 前端框架 建立你的一个应用程序 教程(五)--添加一个表格Grid

    表格例子 样本如下: 我们这篇介绍的是dhtmlxGrid  组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid( ...

  2. Java集合类之Hashtable

    package com.test; import java.util.*; public class Demo7_3 { public static void main(String[] args) ...

  3. TigerLeapMC V1.3 for Windows(支持DLNA)

    TigerLeapMC V1.3 2014-04-10: 1.更新tlplayer TigerLeapMC是基于tlplayer作为播放器的集成DLNA,(DMS,DMR,DMP)等,支持各种网络播放 ...

  4. 【转】我的WIN7分辨率是1920*1080，调低后字体模糊

    原文网址:http://tieba.baidu.com/p/778306758 WIN7还有一个“使用XP风格DPI缩放”的选项,如果选中则只放大文字,不选会连对话框和文字全部放大 这么多层楼,只有这 ...

  5. 用友U8账套的建立

      第1步点击开始菜单进入系统管理模块   第2步点击系统菜单下的注册   第3步弹出登录系统对话框,操作员输入admin点确定   第4步点击权限菜单下的用户   第5步进入用户管理窗口,点击工具栏 ...

  6. HDU4370 0 or 1 最短路

    分析: 1001  (已更新) 显然,题目给的是一个0/1规划模型.解题的关键在于如何看出这个模型的本质.3个条件明显在刻画未知数之间的关系,从图论的角度思考问题,容易得到下面3个结论:1.X12+X ...

  7. lihgtoj 1006

    记忆化搜索下即可. #include<cstdio> #include<string> #include<cstring> #include<iostream ...

  8. 安装solr

    安装之前先关闭防火墙.安装好jdk和tomcat 1.启动tomcat的命令为:apache-tomcat-7.0.61/bin/startup.sh 2.拷贝solr目录下example/webap ...

  9. 常见shell操作

    一.find命令详细 find命令 -- 之查找指定时间内修改过的文件 比如我们要查找linux下指定时间内做过改动的文件,我们可以用find命令,其实find命令的功能十分强大,下面我们通过几个简单 ...

  10. IIS ASP.NETWEB站点部署时遇到的问题记录

    最近由于工作的需要,需要自己部署一些ASP.NET站点,但中间出现了一点小小的问题. 由于自己才疏学浅,此问题折腾了我将近一个小时,最后还是百度出了解决这个问题的方法,先记录如下,仅供自己记忆用. 我 ...