正式学习React之前，通过一个简单的Hello Word程序来感受一下。

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>Hello World</title>

     <script src="./react.js"></script>

     <script src="./JSXTransformer.js"></script>

     <script type="text/jsx">

         var Hello = React.createClass({

             render: function () {

                 return <p>Hello, World</p>

             }

         });

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

     </script>

 </head>

 <body>

 </body>

 </html>

备注：

(1) 引入React的核心JS文件react.js。

(2) 引入JSX的解析器JSXTransformer.js文件。

(3) React代码写在script标签中，但是注意 type="text/jsx"。

继续学习，加油~~~

初识React：使用React完成Hello World程序的更多相关文章

  1. react native与现有的应用程序集成

    (1)通过cocopods 集成 ,以下内容 参考 http://wiki.jikexueyuan.com/project/react-native/integration-existing.html ...

  2. 使用 React.js 的渐进式 Web 应用程序：第 1 部分 - 介绍

      使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...

  3. [RN] React Native代码转换成微信小程序代码的转换引擎工具

    React Native代码转换成微信小程序代码的转换引擎工具 https://github.com/areslabs/alita

  4. React学习笔记-1-什么是react，react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  5. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  6. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  7. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  8. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  9. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  10. React 与 React Native 底层共识：React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

随机推荐

  1. ndoe.js 和npm私有仓库的搭建

    下载nodejs的压缩包 网址:https://nodejs.org/en/ 下载以tar.xz结尾的包例如:node-v8.9.4-linux-x64.tar.xz 上传包到制定的目录 可以用lrz ...

  2. HDU5952 Counting Cliques (暴力深搜+剪枝) (2016ACM/ICPC亚洲赛区沈阳站 Problem E)

    题目链接:传送门 题目: Counting Cliques Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total S ...

  3. guling code细节

    detect_hand.py 分水岭算法: 任何一幅灰度图像都可以被看成拓扑平面,灰度值高的区域可以被看成是山峰,灰度值低的区域可以被看成是山谷.我们向每一个山谷中灌不同颜色的水,随着水的位的升高,不 ...

  4. vue 移动端的一些ui

    https://www.jianshu.com/p/b79b3b721cd5 Vant. YDUI. Vonic. buefy (bluma的ui) Vux

  5. [Educational Codeforces Round 55 (Rated for Div. 2)][C. Multi-Subject Competition]

    https://codeforc.es/contest/1082/problem/C 题目大意:有m个类型,n个人,每个人有一个所属类型k和一个能力v,要求所选的类型的人个数相等并且使v总和最大(n, ...

  6. 集合set-深入学习

    集合set,无序,是不允许重复内容的,也就是不允许重复元素,如果有重复,会自动忽略,可接收可迭代类型 (一般用于需要判断和处理交集时候用到) 集合与字典的区别是,集合没有键只有值,字典是有键的字典是一 ...

  7. JAVA的初始化顺序：

    JAVA的初始化顺序: 父类的静态成员初始化>父类的静态代码块>子类的静态成员初始化>子类的静态代码块>父类的代码块>父类的构造方法>子类的代码块>子类的构造 ...

  8. ios-计算时间方法

    -(NSString *)countPublishTime:(NSString *)sDate { NSDate *dtNow = [NSDate date]; NSDateFormatter *da ...

  9. 把目录C:\Python34\PCI_Code\chapter2\加到系统路径中

    >>> import sys >>> sys.path.append("C:\Python34\PCI_Code\chapter2")

  10. 顺平讲try catch finally throw throws（精华）

    try catch finally  有点像if else语句 还有像javascript的服务器执行成功后的回调函数,success:function(){ 进行处理 }; throws的意思是将异 ...