一、程序步骤

1.用React.createClass生成组件

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

二、代码

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7. </head>
  8.  
  9. <body>
  10.     <script src="./react-0.13.2/build/react.js"></script>
  11.     <script src="./react-0.13.2/build/JSXTransformer.js"></script>
  12. 	<script type="text/jsx">
  13. 		var HelloWorld = React.createClass({
  14. 			render: function(){
  15. 				return <p>你好React</p>;
  16. 			}
  17. 		});
  18. 		React.render(<HelloWorld></HelloWorld>, document.body);
  19. 	</script>
  20. </body>
  21.  
  22. </html>

　　运行结果：

运行后的源代码：

  1. <html lang="zh-cn">
  2.  
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script>
  7.     var HelloWorld = React.createClass({
  8.         displayName: "HelloWorld",
  9.         render: function() {
  10.             return React.createElement("p", null, "你好React");
  11.         }
  12.     });
  13.     React.render(React.createElement(HelloWorld, null), document.body);
  14.  
  15.     //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbIklubGluZSBKU1ggc2NyaXB0Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsSUFBSSxnQ0FBZ0MsMEJBQUE7R0FDbkMsTUFBTSxFQUFFLFVBQVU7SUFDakIsT0FBTyxvQkFBQSxHQUFFLEVBQUEsSUFBQyxFQUFBLFNBQVcsQ0FBQSxDQUFDO0lBQ3RCO0dBQ0QsQ0FBQyxDQUFDO0VBQ0gsS0FBSyxDQUFDLE1BQU0sQ0FBQyxvQkFBQyxVQUFVLEVBQUEsSUFBYyxDQUFBLEVBQUUsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXG5cdFx0dmFyIEhlbGxvV29ybGQgPSBSZWFjdC5jcmVhdGVDbGFzcyh7XG5cdFx0XHRyZW5kZXI6IGZ1bmN0aW9uKCl7XG5cdFx0XHRcdHJldHVybiA8cD7kvaDlpb1SZWFjdDwvcD47XG5cdFx0XHR9XG5cdFx0fSk7XG5cdFx0UmVhY3QucmVuZGVyKDxIZWxsb1dvcmxkPjwvSGVsbG9Xb3JsZD4sIGRvY3VtZW50LmJvZHkpO1xuXHQiXX0=
  16.     </script>
  17. </head>
  18.  
  19. <body>
  20.     <p data-reactid=".0">你好React</p>
  21. </body>
  22.  
  23. </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. 修改ip脚本

    1.打开运行 2.输入CMD 3.在命令提示符下输入: netsh -c interface ip dump > C:\我的网络配置.txt 4.打开您在C:\ 下的"我的网络配置 . ...

  2. iTween基础之iTweenPath(自定义路径移动)

    在游戏开发中经常会用到让一个游戏对象按照指定的路线移动,iTweenPath就提供了可视化的编辑路径功能. iTweenPath 下载地址: http://download.csdn.net/deta ...

  3. C++ STL find

    find 函数,复杂度O(n) 涉及一些 泛型编程 #include <iostream> #include <string.h> #include <string> ...

  4. jQuery插件开发总结

    jQuery插件的开发包括两种: 一种是类级别的插件开发$.extend,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,比如:$.ajax, $.getJSON等.jQuery ...

  5. Shell采集系统cpu 内存 磁盘 网络信息

    cpu信息采集 cpu使用率 采集算法 通过/proc/stat文件采集并计算CPU总使用率或者单个核使用率.以cpu0为例,算法如下: 1. cat /proc/stat | grep ‘cpu0’ ...

  6. 用setTimeout 代替 setInterval实时拉取数据

    在开发中,我们常常碰到需要定时拉取网站数据,如: setInterval(function(){ $.ajax({ url: 'xx', success: function( response ){ ...

  7. 前端之JavaScript第三天学习(8)-JavaScript-对象

    JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属性和方法 属性是与对象相关的值. 方法是能够在对象上执行的动 ...

  8. Window.document对象（2）

    四.操作样式 首先利用元素的ID找到该元素,存于一个变量中: var a = document.getElementById("id"): 然后可以对该元素的属性进行操作: a.s ...

  9. Maven搭建webService (三) 创建客户端－－－使用Apache CXF方式实现

    package test; import net.cc.web.server.HelloWorld; import org.apache.cxf.jaxws.JaxWsProxyFactoryBean ...

  10. Matlab设置网格线密度（坐标精度）

    1.不精确 set(gca,'XMinorTick','on') 这样的话知识x轴显示了细的密度,网格线并没有变. 2.精确 set(gca,'xtick',-1:0.1:1); set(gca,'y ...