对着React官网的教程练习操作，在做到分离文件练习时，按照官网步骤来却怎么也无法正常显示HelloWord。

经测试，html文件中内容改为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="../react-15.2.0/build/react.js"></script>
    <script src="../react-15.2.0/build/react-dom.js"></script>
  </head>
  <body>
   <div id="example"></div>
   <script  src="../build/helloword.js">  </script>
  </body>
</html>

分离出的jsx文件内容为：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

利用   jsx --watch src/ build/ 编译后的js文件为：

ReactDOM.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);

红色加粗为添加的内容。如此，即可显示HelloWord了。不明白为什么官网的例子我走不通，而我改这样就能走通了。有明白的可以告知我一下下~

---------------------------------------分割线------------------------------------

附文档目录树：

---------------------------------------分割线------------------------------------

---------------------------------------分割线------------------------------------

---------------------------------------分割线------------------------------------

---------------------------------------分割线------------------------------------

React.js 官网入门教程 分离文件 操作无法正常显示HelloWord的更多相关文章

  1. 转：asm.js 和 Emscripten 入门教程

    转:http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html asm.js 和 Emscripten 入门教程 作者: 阮一峰 日期:  ...

  2. htmlunit官网简易教程（翻译）

    1 环境搭建: 1)下载 从链接:http://sourceforge.net/projects/htmlunit/files/htmlunit/ 下载最新的bin文件 2)关于bin文件 里面主要包 ...

  3. 从unity3d官网下载教程

    http://unity3d.com/learn/tutorials/projects/tanks-tutorial 官网的教程提供的下载链接https://www.assetstore.unity3 ...

  4. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  5. dubbo系列一：dubbo介绍、dubbo架构、dubbo的官网入门使用demo

    一.dubbo介绍 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成.简单地说,dubbo是一个基于Spri ...

  6. Python爬虫与数据分析之进阶教程：文件操作、lambda表达式、递归、yield生成器

    专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...

  7. React官网首页demo(单文件实现版)

    本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...

  8. React 最简单的入门教程

      一看就懂的ReactJs入门教程(精华版)   现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...

  9. Knockout.Js官网学习（简介）

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

随机推荐

  1. 让linux开机默认开启小键盘

     linux默认开机不开启数字键盘numberlock,每次输入开机密码还得劳烦自己去点亮指示灯,让此灯开机自动点亮,需要一个软件才行,就是numlockx了,可以通过yum安装:yuminstall ...

  2. 前端渲染利器——JsRender入门

    JsRender不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服.我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好用 ...

  3. 在MongoDB的MapReduce上踩过的坑

    太久没动这里,目前人生处于一个新的开始.这次博客的内容很久前就想更新上来,但是一直没找到合适的时间点(哈哈,其实就是懒),主要内容集中在使用Mongodb时的一些隐蔽的MapReduce问题: 1.R ...

  4. Python VS PHP 基础语法

    这几天在学习Python,鄙人平时学习中为了方便记忆和更好的比较与理解语言二者之间在某些情况的优劣性,所以花了点时间,整理了一下 Python 和 PHP 常用语法的一些区别. 一.大小写 PHP: ...

  5. [连载]《C#通讯（串口和网络）框架的设计与实现》- 6.通讯控制器的设计

    目       录 第六章           通讯控制器的设计... 2 6.1           控制器接口... 2 6.2           串口控制器... 3 6.3          ...

  6. Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结

    Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结 1. 什么是可扩展的应用程序?1 2. 松耦合(ioc)2 3. 接口的思考 2 4. 单一用途&模块化,小粒度化2 ...

  7. CSS3新特性应用之字体排印

    一.插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素. +:表示同辈元素的兄弟元素. \A:一个空 ...

  8. 苹果的MDM简介

    MDM(Mobile Device Management)移动设备管理,一般会用于企业管理其移动设备,鉴于iOS是比较封闭的系统很多的功能都难以实现,所以利用苹果的MDM可以达到远程控制设备,像远程定 ...

  9. Oracle ORA-07445 evaopn2()+128错误问题

    Oracle ORA-07445 evaopn2()+128错误问题 问题描述 Plsql developer执行一段sql报错: 经查alert log详细报错信息为: ORA-07445: exc ...

  10. openstack学习（一）kvm-libvirt

    准备工作: 操作系统:ubuntu 16.04 安装KVM Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的 ...