React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着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的应用程 ...
随机推荐
- JSON总结(二)——google-gson
gson是一个google的开源项目,支持多种JSON方法,这里主要讲解如何使用gson将json转换成javaBean. maven坐标 <dependency> <groupId ...
- 怎样才能自学好Java?
经常有初学Java的同学问:怎么样才能学好Java?自学Java难吗? 我认为自学Java并不难.相对于其他语言来说,因为Java95年才出来,所以相对比较新,旧的语言中一些不合适的东西在Java里面 ...
- CSS3 border-radius 圆角属性
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...
- dagride实现模糊查询
一:首行放置搜索元素(可以是easyui中的input.datetimebox.combox等等) 将各个元素的value值获取到存为Json格式(data{a:..,b:..,c:..}),再回车或 ...
- 提示用户升级浏览器代码 低于ie9的浏览器提示
一般想做一些酷炫的网站都有个烦恼,那就是兼容ie浏览器,好在现在使用ie的也越来越少,微软也转战edge浏览器. 使用 Bootstrap经常用js插件可以模拟兼容旧版本的浏览器(bsie 鄙视IE) ...
- Normalize.css的使用及下载
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备 ...
- ps如何裁剪掉图片的不规则区域
按P,鼠标变成钢笔工具,点选住待清除区域,如下: 按ctrl+enter, 将点线变成选中区域: 按delete删除: ctrl+D取消选中区域 完成!
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- .Net开源Excel、Word操作组件-NPOI、EPPlus、DocX
一.NPOI 简介: NPOI is the .NET version of POI Java project. With NPOI, you can read/write Office 2003/2 ...
- ab
ab is a tool for benchmarking your Apache Hypertext Transfer Protocol (HTTP) server. It is designed ...