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源码分析

    IoService通过构造函数的形式成为了IoSession一部分,IoSession是通过IoAcceptor以及connector创建出来,这二者其实就是IoService,所以对于IoSessi ...

  2. html 各个标签初始化

    html,body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,span,input{  margin:0;padding:0;}body{font:12px/1.5em " ...

  3. OC - 正则表达式 - RegexKitLite

    正则表达式使用步骤: 1. 创建正则表达式对象, 设置约束条件; NSString *pattern = @"\\d{1,3}"; NSRegularExpression *reg ...

  4. isEqual

    "; NSString *str2 = [NSString stringWithFormat:@"%@", str1]; 大家明白, str1和str2在内存中的地址是不 ...

  5. 关于配置ST_Geometry报ORA-06522的问题

    环境 SDE版本:10./10.2/10.2.1/10.2.2 Oracle版本:11g R2 11.2.0.1 Windows版本:Windows Server 2008 R2 问题描述及原因 li ...

  6. #include<filename.h> 与 #include“filename.h”

    #include<filename.h>:从标准库路径去寻找该文件,对于VC来说,应该还包括VC环境设置选项中的包含目录以及工程属性中指定的目录. #include“filename.h” ...

  7. App小样在手机运行了一下

    外包公司把App小样的安装包发过来了,我在安卓手机上试了一把,虽然还只有几个静态页面,但安装那一刻还是小激动了一把. 在某美术系MM的帮助下,我基本掌握了原型软件azure. 事实证明,很多东西都是逼 ...

  8. java向文件写数据的3种方式

    下边列举出了三种向文件中写入数据的方式,当然还有其他方式,帮助自己理解文件写入类的继承关系.类的关系: file->fileoutputstream->outputstreamWriter ...

  9. SPRING IN ACTION 第4版笔记-第二章WIRING BEANS-008-在Java配置文件中引入xml配置文件@Import、@ImportResource

    1. package soundsystem; import org.springframework.beans.factory.annotation.Autowired; public class ...

  10. IronPython 源码剖析系列(2):IronPython 引擎的运作流程

    http://blog.csdn.net/inelm/article/details/4612987 一.入口点 Python 程序的执行是从 hosting 程序 ipy.exe 开始的,而他的入口 ...