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. UIlabel - 富文本属性

    1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSFontAttributeName : [UIFont systemFontOfSize:_fontS ...

  2. 使用自定义《UIActivity》进行内容分享－b

    简介 这段时间有很多朋友都问我关于怎么去集成ShareSDK或者友盟社会化分享SDK的问题, 其实我想说, Apple一开始就提供了一个类, 供我们去使用分享了, 在iOS 6之后更加增强了这个类, ...

  3. Xcode 证书生成、设置、应用

    Xcode 证书生成.设置.应用,与大家分享.如果按下面步骤还不能编译成功,我手把手教你. 开发环境: Mac OS lion 10.7.4 XCode 4.3.3 1         点击钥匙图标 ...

  4. bzoj 3065: 带插入区间K小值 替罪羊树 && AC300

    3065: 带插入区间K小值 Time Limit: 60 Sec  Memory Limit: 512 MBSubmit: 1062  Solved: 253[Submit][Status] Des ...

  5. textarea宽度、高度自动适应处理方法

    textarea自动高度 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: ...

  6. uva 1400 - "Ray, Pass me the dishes!"

    又是一道线段树区间更新的题: #include<cstdio> #include<algorithm> #include<cstring> #define ll l ...

  7. win7 任务计划 任务映像已损坏或篡改（异常来自HRESULT:0x80041321）

    转自win7 任务计划 任务映像已损坏或篡改(异常来自HRESULT:0x80041321) 请这样操作: 1. 以管理员身份运行命令提示符并执行命令 chcp 437 schtasks /query ...

  8. [转贴]Linq之动态查询

    最近写Linq碰到一个问题, 就是如果要写一个查询系统,这个系统里面有很多TextBox可以填, 然后捞出符合各个字段的数据. 在SQL查询的时候还满方便的,用字符串连连连就可以了, ( 也就是sql ...

  9. 【HDOJ】1239 Calling Extraterrestrial Intelligence Again

    这题wa了很多词,题目本身很简单,把a/b搞反了,半天才检查出来. #include <stdio.h> #include <string.h> #include <ma ...

  10. Linux kernel 内存损坏漏洞

    漏洞名称: Linux kernel 内存损坏漏洞 CNNVD编号: CNNVD-201310-143 发布时间: 2013-10-11 更新时间: 2013-10-11 危害等级: 中危   漏洞类 ...