第一个React程序HelloWorld
一、程序步骤
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的更多相关文章
- JAVA_SE基础——5.第一个Java程序HelloWorld&注释的应用
配置完JDK&环境变量后,我们就可以开始写程序了,那么程序怎么写呢,用什么工具呢,我建议 为了方便学习,我们最好在一个磁盘下建立一个专门的文件来写java程序,比如就在D盘下建立一个名为&qu ...
- [IOS]从零开始搭建基于Xcode7的IOS开发环境和免开发者帐号真机调试运行第一个IOS程序HelloWorld
首先这篇文章比较长,若想了解Xcode7的免开发者帐号真机调试运行IOS程序的话,直接转到第五部分. 转载请注明原文地址:http://www.cnblogs.com/litou/p/4843772. ...
- 第一个Spring程序HelloWorld
对于初学者而言,任何理论化的讲解都比不上一个简单的HelloWorld,我们在学习Spring时也不外乎用最简单的HelloWorld程序来将这个灵活而又强大的轻量级框架推送到诸位面前.想要说明的是现 ...
- eclipse3.62开发第一个java程序HelloWorld
[学习笔记] 用eclipse3.62开发第一个java程序: 使用eclipse之前们需要先配置一下jdk.window/preference/java/installed JREs,详细请见视频. ...
- 【拥抱元宇宙】创建你的第一个Unity程序HelloWorld，并发布
第一个Unity程序--Hello World. 1.需要先下载一个Unity Hub,以及安装Unity编辑器.Unity Hub需要登陆,激活码可以选择个人用户,免费的.免费的无法改变启动画面,其 ...
- 关于第一个java程序HelloWorld的感慨
今天入手第一个java程序,严格意义上来讲,是真正开始研究java的第一个“Hello World": 1.没有用自动提示,虽然System.out.println()还是自动蹦出来了,但是 ...
- idea2019开发第一个java程序HelloWorld
用idea2019开发第一个java程序: (idea破解不在本讲义范围之内) 新手建议忽略此部分,先把eclipse用熟.技术是一样的.idea缺省配置是黑色的,很晃眼,可以(Files/setti ...
- MyEclipse开发第一个java程序HelloWorld
[学习笔记] 用MyEclipse开发第一个java程序: 我们先看看一个具体例子,给你们有个先入为主的感觉. 步骤一:在Eclipse开发工具中我们New一个java项目, 如图2_1 图2_1 步 ...
- 第一个Java程序HelloWorld
代码如下: // 一个文件中只能有一个共有的类,并且与文件名称一致,大小写注意 public class HelloWorld{// 程序的入口public static void main(Stri ...
随机推荐
- 28335 sci fifo send
#include "DSP2833x_Device.h"#include "DSP2833x_Examples.h"char buf[]={0x30,0x32, ...
- P3408: [Usaco2009 Oct]Heat Wave 热浪
水题,裸的最短路. ; type link=^node; node=record t,d:longint; f:link; end; var n,m,s,i,j,u,v,w,max:longint; ...
- 软件工程随堂小作业——寻找“水桶”（C++）
一.设计思想 思路与寻找一个水王相似,这次只是计数器和嫌疑人变量都设置为数组.每次选取一个ID与三个嫌疑人比较,若有相同则计数:若三个都不相同,则三个计数器都减一.若减为0,则从新赋值给嫌疑人. 二. ...
- github -- fork提交项目
我们在进行Github协同开发的时候,往往会去fork一个仓库到自己的Github中,过一段时间以后,原仓库可能会有各种提交以及修改,很可惜,Github本身并没有自动进行同步的机制,这个需要我们手动 ...
- xml基础学习笔记05
Xpath快速解析 如题一样,本篇主要说说Xpath快速查找XML文档 * Xpatn.Xquery,是专门用来查询xml的语言 * 查询xml非常快 Xpatn.Xquery,是专门用来 ...
- 自动回复消息-微信公众平台开发4（asp.net）
接着上一节的processRequest 处理函数,代码如下: /// <summary> /// 处理微信发来的请求 /// </summary> /// ...
- Java 7 中 NIO.2 的使用——第四节 文件和目录
Files类提供了很多方法用于检查在于你真正实际去操作一个文件或目录.这些方法强烈推荐,也非常有用,也能避免很多异常的发生.例如,一个很好的习惯就是在你试着移动一个文件从一个地方到另一个地方的时候,先 ...
- 工作点滴积累（1）---MD5和编码
今天同事忽然问了一个问题,他发现同一个字符,比如"电影",用项目中的md5工具类生成的hash值和网上提供的在线MD5生成的hash值有时不一样,在只包含了字母字符串中,生成的ha ...
- 第六周博客技术发表 C语言代码
#include <stdio.h> /*使用printf要包含的头文件*/#include <conio.h>void main(void) /*主 ...
- CocoaPods最佳实践探讨
近期在项目中首次使用了CocoaPods.从软件工程的角度来看,我对目前常见的CocoaPods使用方法有些意见,建议做一些改进.先说一下我建议的最佳实践,后面再分析为什么要这样做.并且希望大家根据自 ...