一、程序步骤

1.用React.createClass生成组件

2.调用React.render把组件渲染到页面中，dom的操作由react自动完成

二、代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <script src="./react-0.13.2/build/react.js"></script>

    <script src="./react-0.13.2/build/JSXTransformer.js"></script>

	<script type="text/jsx">

		var HelloWorld = React.createClass({

			render: function(){

				return <p>你好React</p>;

			}

		});

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

	</script>

</body>

</html>

　　运行结果：

运行后的源代码：

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

    var HelloWorld = React.createClass({

        displayName: "HelloWorld",

        render: function() {

            return React.createElement("p", null, "你好React");

        }

    });

    React.render(React.createElement(HelloWorld, null), document.body);

    //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbIklubGluZSBKU1ggc2NyaXB0Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsSUFBSSxnQ0FBZ0MsMEJBQUE7R0FDbkMsTUFBTSxFQUFFLFVBQVU7SUFDakIsT0FBTyxvQkFBQSxHQUFFLEVBQUEsSUFBQyxFQUFBLFNBQVcsQ0FBQSxDQUFDO0lBQ3RCO0dBQ0QsQ0FBQyxDQUFDO0VBQ0gsS0FBSyxDQUFDLE1BQU0sQ0FBQyxvQkFBQyxVQUFVLEVBQUEsSUFBYyxDQUFBLEVBQUUsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXG5cdFx0dmFyIEhlbGxvV29ybGQgPSBSZWFjdC5jcmVhdGVDbGFzcyh7XG5cdFx0XHRyZW5kZXI6IGZ1bmN0aW9uKCl7XG5cdFx0XHRcdHJldHVybiA8cD7kvaDlpb1SZWFjdDwvcD47XG5cdFx0XHR9XG5cdFx0fSk7XG5cdFx0UmVhY3QucmVuZGVyKDxIZWxsb1dvcmxkPjwvSGVsbG9Xb3JsZD4sIGRvY3VtZW50LmJvZHkpO1xuXHQiXX0=

    </script>

</head>

<body>

    <p data-reactid=".0">你好React</p>

</body>

</html>

　　

第一个React程序HelloWorld的更多相关文章

  1. JAVA_SE基础——5.第一个Java程序HelloWorld&注释的应用

    配置完JDK&环境变量后,我们就可以开始写程序了,那么程序怎么写呢,用什么工具呢,我建议 为了方便学习,我们最好在一个磁盘下建立一个专门的文件来写java程序,比如就在D盘下建立一个名为&qu ...

  2. [IOS]从零开始搭建基于Xcode7的IOS开发环境和免开发者帐号真机调试运行第一个IOS程序HelloWorld

    首先这篇文章比较长,若想了解Xcode7的免开发者帐号真机调试运行IOS程序的话,直接转到第五部分. 转载请注明原文地址:http://www.cnblogs.com/litou/p/4843772. ...

  3. 第一个Spring程序HelloWorld

    对于初学者而言,任何理论化的讲解都比不上一个简单的HelloWorld,我们在学习Spring时也不外乎用最简单的HelloWorld程序来将这个灵活而又强大的轻量级框架推送到诸位面前.想要说明的是现 ...

  4. eclipse3.62开发第一个java程序HelloWorld

    [学习笔记] 用eclipse3.62开发第一个java程序: 使用eclipse之前们需要先配置一下jdk.window/preference/java/installed JREs,详细请见视频. ...

  5. 【拥抱元宇宙】创建你的第一个Unity程序HelloWorld，并发布

    第一个Unity程序--Hello World. 1.需要先下载一个Unity Hub,以及安装Unity编辑器.Unity Hub需要登陆,激活码可以选择个人用户,免费的.免费的无法改变启动画面,其 ...

  6. 关于第一个java程序HelloWorld的感慨

    今天入手第一个java程序,严格意义上来讲,是真正开始研究java的第一个“Hello World": 1.没有用自动提示,虽然System.out.println()还是自动蹦出来了,但是 ...

  7. idea2019开发第一个java程序HelloWorld

    用idea2019开发第一个java程序: (idea破解不在本讲义范围之内) 新手建议忽略此部分,先把eclipse用熟.技术是一样的.idea缺省配置是黑色的,很晃眼,可以(Files/setti ...

  8. MyEclipse开发第一个java程序HelloWorld

    [学习笔记] 用MyEclipse开发第一个java程序: 我们先看看一个具体例子,给你们有个先入为主的感觉. 步骤一:在Eclipse开发工具中我们New一个java项目, 如图2_1 图2_1 步 ...

  9. 第一个Java程序HelloWorld

    代码如下: // 一个文件中只能有一个共有的类,并且与文件名称一致,大小写注意 public class HelloWorld{// 程序的入口public static void main(Stri ...

随机推荐

  1. [收藏]win8安装弹出输入的产品密钥与用于安装任何可用windows映像都不匹配

    问题描述: 帮朋友装win8(第一次装大神不要喷我啊)结果到 现在安装 这一步的时候 点击 现在安装 弹出个窗口 说输入的产品密钥与用于安装任何可用windows映像都不匹配.请输入其他产品密钥 解决 ...

  2. c 计算 语句 执行 时间

    当然,你也可以用clock函数来计算你的机器运行一个循环或者处理其它事件到底花了多少时间:   #include “stdio.h” #include “stdlib.h” #include “tim ...

  3. CRT团队组员博客地址统计

    CRT团队GitHub地址:https://github.com/CoffeeRobotTeam/Coffee-Robot-System 洪超 http://www.cnblogs.com/chaoh ...

  4. hadoop日志太大

    hadoop jobtracker日志太大在jobtracker服务器上的mapred-site.xml中添加以下参数: <property> <name>mapreduce. ...

  5. Tomcat性能参数设置

    Tomcat性能参数设置 Tomcat性能参数设置 博客分类: Java LinuxTomcat网络应用多线程Socket 默认参数不适合生产环境使用,因此需要修改一些参数 1.修改启动时内存参数.并 ...

  6. Analyzer使用第二Y轴，以及同一分析图不同量值使用不同的图形样式

    Analyzer的建立分析图后,图中有两个量值,希望能显示成不同的图形样式,如一个是柱图.一个是线图. 1.设置显示多个量值: 3.设置显示出图例,即表明图中量值内容的说明: 2.右键图例中要修改为不 ...

  7. 1491: [NOI2007]社交网络 - BZOJ

    Description Input Output输出文件包括n 行,每行一个实数,精确到小数点后3 位.第i 行的实数表 示结点i 在社交网络中的重要程度.Sample Input4 41 2 12 ...

  8. 【转载】Sencha Touch 提高篇 组件选择器

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:威老     原文地址:http://www.cnblogs.com/weil ...

  9. JavaScript对象进阶

    要了解JavaScript对象,我们可以从对象创建.属性操作.对象方法这几个方面入手.概括起来,包括以下几模块: 1.创建对象 1.1 对象直接量 对象直接量是创建对象最简单的方式,由若干名/值对组成 ...

  10. 3-Highcharts 3D图之3D柱状图分组叠堆3D图

    <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...