对着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的更多相关文章
-
转:asm.js 和 Emscripten 入门教程
转:http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html asm.js 和 Emscripten 入门教程 作者: 阮一峰 日期: ...
-
htmlunit官网简易教程(翻译)
1 环境搭建: 1)下载 从链接:http://sourceforge.net/projects/htmlunit/files/htmlunit/ 下载最新的bin文件 2)关于bin文件 里面主要包 ...
-
从unity3d官网下载教程
http://unity3d.com/learn/tutorials/projects/tanks-tutorial 官网的教程提供的下载链接https://www.assetstore.unity3 ...
-
Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
-
dubbo系列一:dubbo介绍、dubbo架构、dubbo的官网入门使用demo
一.dubbo介绍 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成.简单地说,dubbo是一个基于Spri ...
-
Python爬虫与数据分析之进阶教程:文件操作、lambda表达式、递归、yield生成器
专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...
-
React官网首页demo(单文件实现版)
本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...
-
React 最简单的入门教程
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...
-
Knockout.Js官网学习(简介)
前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...
随机推荐
-
git pull all braches
控制台下执行如下: git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote ...
-
android DDMS 连接真机(己ROOT),用file explore看不到data/data文件夹的解决办法
android DDMS 连接真机(己ROOT),用file explore看不到data/data文件夹的解决办法 问题是没有权限,用360手机助手或豌豆荚也是看不见的. 简单的办法是用RE文件管理 ...
-
Codeforces Round #185 (Div. 2) C. The Closest Pair 构造
C. The Closest Pair Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/312/p ...
-
小笔记:Timer定时间隔时间操作
小笔记:Timer定时间隔时间操作,后面有时间再补充和完善: public class TimingSvc { /// <summary> /// 定时器,执行定时任务 /// </ ...
-
从开发者角度解析 Android N 新特性!
大清早看到 Google 官方博客发布 Android N 的开发者预览版,立马从床上跳起来开始仔仔细细的读起来. 从开发者角度来看,Android N 的更新并不算大.网上之前流传的一些 Andro ...
-
页面标准文档流、浮动层、float属性(转)
CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块 ...
-
理解channel 工作原理以及源码
Go 的并发特性 goroutines: 独立执行每个任务,并可能并行执行 channels: 用于 goroutines 之间的通讯.同步 一个简单的事务处理的例子 对于下面这样的非并发的程序: ...
-
Jenkins定时构建时间设置
每隔5分钟构建一次 H/ * * * * 每两小时构建一次 H H/ * * * 每天中午12点定时构建一次 H * * * 每天下午18点定时构建一次 H * * * 在每个小时的前半个小时内的每1 ...
-
vim常用操作和使用技巧
vi是linux与unix下的常用文本编辑器,其运行稳定,使用方便,本文将分两部分对其常用操作技巧和配置进行阐述,其中参考了网上的一些文章,对作者表示感谢 PART1 操作技巧 说明: 以下的例子中 ...
-
linux下syslog-ng日志集中管理服务部署记录
syslog是Linux系统默认的日志守护进程,默认的syslog配置文件是/etc/syslog.conf文件.syslog守护进程是可配置的,它允许人们为每一种类型的系统信息精确地指定一个存放地点 ...