正式学习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. grep命令相关用法

    grep命令相关参数: -i:忽略大小写 --color:高亮显示匹配到的信息 -v:反向查找,没匹配到的行显示出来 -o:只显示被模式匹配到的串本身 正则表达式: .*:任意长度的任意字符,贪婪模式 ...

  2. 20165228 2017-2018-2 《Java程序设计》第9周学习总结

    20165228 2017-2018-2 <Java程序设计>第9周学习总结 教材学习内容总结 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符(Unif ...

  3. 模拟主库创建数据文件，dg备库空间不足时问题处理

    本篇文档测试目的: 模拟实际环境中,主库对表空间添加数据文件,备库空间不足,最终导致MRP进程自动断开,处理方式. 1.问题环境模拟 1)正常情况下的dg 主库创建数据文件,备库接受日志,自动创建表空 ...

  4. 【opencv基础】imwrite函数与图像存储质量

    前言 std::vector<int> compression_params; compression_params.push_back(CV_IMWRITE_JPEG_QUALITY); ...

  5. 20155208徐子涵 2016-2017-2 《Java程序设计》第2周学习总结

    20155208徐子涵 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章 基础语法 3.1 类型.变量与运算符 • 关键字:在定义java文件名的时候要 ...

  6. PTA——最大公约数和最小公倍数

    PTA 7-26 最大公约数和最小公倍数 #include<stdio.h> int main(){ int num1,num2,temp1,temp2,r; scanf("%d ...

  7. Linux下安装Blender

    Blender在Windows下,可以在官方直接下载免安装的版本,下载解压缩就能用. 在Linux下稍微麻烦一点点. 如下3步安装的blender不一定是最新版本,且安装完成后发现设置中文会变为方块. ...

  8. hdu2732 Leapin' Lizards 最大流+拆点

    Your platoon of wandering lizards has entered a strange room in the labyrinth you are exploring. As ...

  9. AangularJS入门总结二

    双向数据绑定:在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model ...

  10. 文件I/0缓冲

    设置stdio流缓冲模式 #include<stdio.h> int setvbuf(FILE *stream,char *buf,int mode,size_t size) int se ...