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. MINA源码阅读之ACP

    Processor在XXAcceptor以及XXConnector中所扮演的只能就是:作为Acceptor以及Connetor所创建的Session的Processor: IoAcceptor作为他所 ...

  2. 推送 -- error:Not get deviceToken yet

    获取不到devicetoken请检查: 1)     请检查你的pushconfig里的appkey与应用详情中是否一致 2)     bundleid有3处需要检查是否一致:a.你的应用详情中的bu ...

  3. python学习之---生成器

    通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含1000万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个元素,那后面绝大多数元 ...

  4. 形形色色Node工程Angular2

    最近项目要用的 一些无关紧要的文件夹, demo是一些示例, dist是webpack打包后发布的代码,server是用node启动服务,typings和tsconfig是一些ts配置. npm in ...

  5. 【BZOJ1901】 Zju2112 Dynamic Rankings(树套树)

    [题意] 给定一个含有n个数的序列a[1],a[2],a[3]--a[n], 程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]--a[j]中第k小的数是多少(1≤k ...

  6. 李洪强iOS开发Swift篇—01_简单介绍

    李洪强iOS开发Swift篇—01_简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objec ...

  7. 最全的微软msdn原版windows系统镜像和office下载地址集锦

    随着windows的发展,越来越多的人都热衷于微软的原版系统下载了,相比之前的版本比如winxp版本,windows vista/win7/win8/win8.1/win10后来的版本在安装方面也比较 ...

  8. 开始hadoop

    hadoop介绍 分布式存储系统HDFS(Hadoop Distributed File System),提供了高可靠性.高扩展性和高吞吐率的数据存储服务: 资源管理系统YARN(Yet Anothe ...

  9. c#调用js,以及js调用C#里的函数, c#自己生成js代码,实现对web的控制

    using mshtml;using System;using System.Collections.Generic;using System.Linq;using System.Security.P ...

  10. Uncompressing Linux___ done, booting the kernel_tekkamanninja-ChinaUnix博客

    今天用主线Linux内核移植到MINI6410,主线内核2.6.37.1基本已经支持了MINI6410的板子,所以移植到能够启动起来的阶段很简单,但是在移植的时候还是出现了一个比较常见的问题: MIN ...