React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

时间:2022-12-31 10:11:57

对着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

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

附文档目录树:

React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

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

React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

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

React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

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

React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

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

React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

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

  1. 转:asm&period;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&period;Js官网学习&lpar;系列&rpar;

    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&lpar;单文件实现版&rpar;

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

  8. React 最简单的入门教程

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

  9. Knockout&period;Js官网学习(简介)

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

随机推荐

  1. git pull all braches

    控制台下执行如下: git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote ...

  2. android DDMS 连接真机(己ROOT&rpar;,用file explore看不到data&sol;data文件夹的解决办法

    android DDMS 连接真机(己ROOT),用file explore看不到data/data文件夹的解决办法 问题是没有权限,用360手机助手或豌豆荚也是看不见的. 简单的办法是用RE文件管理 ...

  3. Codeforces Round &num;185 &lpar;Div&period; 2&rpar; C&period; The Closest Pair 构造

    C. The Closest Pair Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/312/p ...

  4. 小笔记:Timer定时间隔时间操作

    小笔记:Timer定时间隔时间操作,后面有时间再补充和完善: public class TimingSvc { /// <summary> /// 定时器,执行定时任务 /// </ ...

  5. 从开发者角度解析 Android N 新特性!

    大清早看到 Google 官方博客发布 Android N 的开发者预览版,立马从床上跳起来开始仔仔细细的读起来. 从开发者角度来看,Android N 的更新并不算大.网上之前流传的一些 Andro ...

  6. 页面标准文档流、浮动层、float属性(转)

    CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...

  7. 理解channel 工作原理以及源码

    Go 的并发特性  goroutines: 独立执行每个任务,并可能并行执行 channels: 用于 goroutines 之间的通讯.同步 一个简单的事务处理的例子  对于下面这样的非并发的程序: ...

  8. Jenkins定时构建时间设置

    每隔5分钟构建一次 H/ * * * * 每两小时构建一次 H H/ * * * 每天中午12点定时构建一次 H * * * 每天下午18点定时构建一次 H * * * 在每个小时的前半个小时内的每1 ...

  9. vim常用操作和使用技巧

    vi是linux与unix下的常用文本编辑器,其运行稳定,使用方便,本文将分两部分对其常用操作技巧和配置进行阐述,其中参考了网上的一些文章,对作者表示感谢 PART1 操作技巧 说明: 以下的例子中  ...

  10. linux下syslog-ng日志集中管理服务部署记录

    syslog是Linux系统默认的日志守护进程,默认的syslog配置文件是/etc/syslog.conf文件.syslog守护进程是可配置的,它允许人们为每一种类型的系统信息精确地指定一个存放地点 ...