初学react,为什么页面不显示

初学react,为什么页面不显示?各位莫见笑

这是源码,把jsx改成babel也不行。页面死活都是一片空白。

<!DOCTYPE html">
<html>
<head>
<title>发布活动</title>

<script src="build/react.js" type="text/javascript" ></script>
<script src="build/react-dom.js" type="text/javascript" ></script>

</head>
<body>

<div id="container"></div>
 <script type="text/JSX">

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘container‘)
);
 </script>
</body>
</html>
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘container‘)
);
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘container‘)
);
这句话在你的运行环境下是不对的。
<h1>Hello, world!</h1>这种JSX语法需要编译成JS版本的react的Component实例才行。
你可以把标签 <h1>去掉,来写你的hello world入门react。

安利下我年初写的react项目boilerplate供你学习吧
https://github.com/slashhuang/react-mobile-template

class App extends React.Component {

render() {

return <h1>Hello, world!</h1>

}

}

ReactDOM.render(<App />, document.getElementById(‘root‘))

去把教程看一遍啊,react是需要编译过浏览器才认识的

 
时间: 2024-12-15 17:16:47

初学react,为什么页面不显示的相关文章

商品详情页面的显示

当点击商品图片的时候,会跳转到商品的详情页面,我们看下具体是如何实现的: 1.点击商品的图片,打开商品详情页面 a)         商品基本信息 b)        延迟加载商品详情.延迟一秒加载使用ajax c)         商品的规格参数.按需加载,当用户点击商品规格参数tab页,加载ajax. 如图:点击图片后显示内容如下: 所以需要从三个表中获取数据,发布服务接口: 需要在taotao-rest工程中发布服务 1.取商品基本信息的服务 2.取商品描述的服务 3.取商品规格的服务 需

初学React:JSX语法

这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>第一个组件.js 'use strick' /*===========================JavaScript的XML语法========================*/ var CommentBox = React.createClass({ render:function () { return ( <div classN

5月9日 页面不显示中文

若页面不显示中文,可能原因: 1.由于适用的 Cufon字体包不支持中文造成的. 解决方法:下载cufon中文包,下载地址:http://i.cnblogs.com/Files.aspx 将相应的js解压到原先的js存放目录下,覆盖cufon-yui然后将代码引用的<script src="js/(文件名).font.js" type="text/javascript"></script>改为<script src="js/V

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

jsp表单传值后在页面中文显示乱码

主要通过添加以下代码来实现(前提是其他处的编码都设置成了utf-8): response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); 本人程序有两个:index.jsp与getinfo.jsp index.jsp如下,使用复选框传值,传入姓名为中文时显示乱码: <body> <form action="getinfo.j

访问asp网站时,页面上显示请求的资源在使用中

服务器生产环境: 操作系统:WIN2003 WEB:IIS 6.0 问题过程: 9月7日上午8:40左右,科研处长发现他们的网站无法登录,网上留言了我,当我进一步了解情况时,发现还有几个二级网站出现如下情况: 浏览器访问asp网站时,页面上显示请求的资源在使用中:有的ASP网站又可以正常访问,这就带来了一些困难,不知所措,到底发生了什么原因?如果在网上搜集一下,说一大堆原因,实际上一一测试,但无法解决. 此时此刻,心理非常紧张,又在抓紧时间进一步分析,如何解决此次网站运行故障. 通过以下设置,可

为上节课项目添加两个页面传值显示的功能+MVC框架学习日志

一.对test2的修改: 上节课的理解误区:EL表达式 ${loginName}是进行接收数据的 要求:为index页面添加一个input标记,设置type属性添加一个文本框,要求在其中输入一段文字可以在跳转后的response页面中的文本框中显示. 分析:实现这个功能的过程,就是将一个JSP页面的值先传给servlet服务器,然后再由服务器传递给跳转后的页面显示出来. 若想实现则是需要在业务逻辑中使用getParameter()方法获取index中输入的值,然后在使用setAttribute(

struts2 hibernate 在jsp页面上面显示多个图片

最近需要在一个jsp页面上面遍历出多个图片,平时做的比较多的是string integer等类型的遍历,图片是二进制的与原来常用的类型有很大的不同. BBFSeal.java public class BBFSeal { private Blob content; private String id; private String name; private BBFUseruser; private Blob imageSeal; public BBFSeal() { } public BBFS

php中调用这个功能可以在web页面中显示hello world这个经典单词

php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不住了,开始动手研究如何添加. 下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构建一个空的php扩展,然后你向里面添加相应的代码就可以完成你自己的功能