对着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. Java集合-Python数据结构比较

    Java list与Python list相比较 Java List:有序的,可重复的.(有序指的是集合中对象的顺序与添加顺序相同) Python list(列表)是有序的,可变的. Java Lis ...

  2. 【读书笔记】2016.12.10 《构建高性能Web站点》

    本文地址 分享提纲: 1. 概述 2. 知识点 3. 待整理点 4. 参考文档 1. 概述 1.1)[该书信息] <构建高性能Web站点>: -- 百度百科 -- 本书目录: 第1章 绪论 ...

  3. java异常处理（父子异常的处理）

    我当初学java异常处理的时候,对于父子异常的处理,我记得几句话“子类方法只能抛出父类方法所抛出的异常或者是其子异常,子类构造器必须要抛出父类构造器的异常或者其父异常”.那个时候还不知道子类方法为什么 ...

  4. Webmin 安装 (centos7 rpm 方式)

    网上有很多此类的教程,大多都很老了.这里记录下自己安装Webmin的过程. # 系统准备 > yum -y install perl perl-Net-SSLeay openssl perl-I ...

  5. iOS 对模型对象进行归档

    归档是指一种形式的序列化,专门编写用于保存数据的任何对象都应该支持归档.使用对模型对象进行归档的技术可以轻松将复杂的对象写入文件,然后再从中读取它们. 只要在类中实现的每个属性都是标量或者都是遵循NS ...

  6. Linux2.6内核进程调度系列--scheduler_tick()函数3.更新普通进程的时间片

    RT /** * 运行到此,说明进程是普通进程.现在开始更新普通进程的时间片. */ /* 首先递减普通进程的时间片计数器.如果用完,继续执行以下操作 */ if (!--p->time_sli ...

  7. 设置这些之后，Google突然可以打开了

    打开的是:https://www.google.com.hk

  8. 【代码笔记】iOS-正在加载

    一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...

  9. Express 4 handlebars 不使用layout写法

    Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了 ...

  10. Unity3D安卓出包报错

    今天又遇到了在安卓出包时,直接报错了两个错误,报错信息分别如下: Installation failed with the following output: pkg: /data/local/tmp ...