The JSX Transformer library is not recommended for production use. Instead, you'll probably want to precompile your JSX into JavaScript.

Install:

npm install react-tools -g

Run:

jsx dev build --no-cache-dir --watch

//watch dev dir and compile js to build dir

You also need to change html a little bit:

dev/index.html

<!doctype html>

<html lang="en">

<head>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="style.css"/>

    <script src="//fb.me/react-0.13.3.js"></script>

    <script src="//fb.me/JSXTransformer-0.13.3.js"></script>

    <meta charset="utf-8">

    <title>Compiler Dev</title>

</head>

<body>

<script  type="text/jsx" src="app.js"></script>

</body>

</html>

build/index.html

<!doctype html>

<html lang="en">

<head>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="style.css"/>

    <script src="//fb.me/react-0.13.3.js"></script>

    <!-- no jsx file included-->

    <meta charset="utf-8">

    <title>Compiler Dev</title>

</head>

<body>

<!-- no type="jsx/text" -->

<script src="app.js"></script>

</body>

</html>

[React] React Fundamentals: Precompile JSX的更多相关文章

  1. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  2. React报错之JSX element type does not have any construct or call signatures

    正文从这开始~ 总览 当我们试图将元素或react组件作为属性传递给另一个组件,但是属性的类型声明错误时,会产生"JSX element type does not have any con ...

  3. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  4. React: React组件创建的三种方式

    一.简介 在前面介绍的React组件知识中,对于组件的创建我只是用了其中某一种方式.其实,在2013年React诞生之初,对于React组件的创建,仅仅只有一种方式,也即createClass函数,在 ...

  5. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  6. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  7. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  8. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  9. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

随机推荐

  1. JavaScript 排序算法——快速排序

    常见排序 javaScript 实现的常见排序算法有:冒泡排序.选择排序.插入排序.谢尔排序.快速排序(递归).快速排序(堆栈).归并排序.堆排序. 过程 "快速排序"的思想很简单 ...

  2. uvalive 6185

    高斯消元,以前从来没写过,今天的模拟比赛里面,添琦给了我一个模板! 虽然是个裸的,但是因为从来没写过,一个小细节竟然搞了我几个小时: 终于最后在小珺同志的帮助下成功a掉了,太开心了! 存一下,作为模板 ...

  3. 搭建mongodb分片

    搭建mongodb分片 http://gong1208.iteye.com/blog/1622078 Sharding分片概念 这是一种将海量的数据水平扩展的数据库集群系统,数据分表存储在shardi ...

  4. xapian安装

    xapian安装:$ su enter your root password # rpm -ivh http://rpm.eprints.org/rpm-eprints-org-key-1-1.noa ...

  5. win7+ubuntu双系统安装攻略

    一1.下载分区软件,为ubuntu安装分出一个区 2.磁盘管理器,选中该区,右键,删除卷,该区变为绿色,成为空闲区 3.成功 二为ubunt添加开机导引项 1,安装好easybcd2.0后,启动软件: ...

  6. 让你的短信应用迎接Android 4.4(KitKat)

    原文地址:Getting Your SMS Apps Ready for KitKat 发送和接收短信是手机最基本的功能,很多的开发者也开发了很多成功的应用来增强Android这一方面的体验.你们当中 ...

  7. C#反射之基础应用

    今天把反射的东西整理了一下 , 提供了最全面的东西 , 当然也是基础的东西 ,在学好了这一切的基础上 , 大家可以学习反射的具体插件等应用 首先我们建立一个类库 , 将它生成为 reflectPrj  ...

  8. Chrome 浏览器地址栏直接搜索太慢的解决方案

    用Chrome经常直接把要搜索的内容写在地址栏, 回国就搜索,但最近发现搜索结果出来得太慢,要刷新好几次才行. 解决方案如下: 打开Chrome的"设置", 找到”管理搜索引擎“, ...

  9. SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题

    转:http://blog.csdn.net/miragesky2049/article/details/7204882 SharePoint2010沙盒解决方案基础开发--关于TreeView树形控 ...

  10. java中Pattern.compile函数的相关解释

    Pattern.compile函数:Pattern Pattern.compile(String regex, int flag) flag的取值范围如下: Pattern.CANON_EQ,当且仅当 ...