we want to have the ability to write JSX and see the output live in the browser.

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  5.     <link rel="stylesheet" href="style.css"/>
  6.     <script src="//fb.me/react-0.13.3.js"></script>
  7.     <script src="//fb.me/JSXTransformer-0.13.3.js"></script>
  8.     <meta charset="utf-8">
  9.     <title>Compiler</title>
  10. </head>
  11. <body>
  12. <script type="text/jsx">
  13.     /** @jsx React.DOM */
  14.  
  15.     var App = React.createClass({
  16.         getInitialState: function() {
  17.             return {
  18.                 input: '',
  19.                 output: '',
  20.                 err: ''
  21.             }
  22.         },
  23.         update: function(e) {
  24.             try{
  25.                 var input = this.refs.htmlCode.getDOMNode().value;
  26.                 this.setState({
  27.                     output: JSXTransformer.transform(input).code,
  28.                     err: ''
  29.                 })
  30.             }catch(err){
  31.                 this.setState({
  32.                     err: err.message
  33.                 })
  34.             }
  35.         },
  36.         render: function() {
  37.             return (
  38.                     <div className="container">
  39.                         <div className="row">
  40.                             <div className="alert alert-danger">
  41.                                 &nbsp;{this.state.err}
  42.                             </div>
  43.                         </div>
  44.                         <div className="row">
  45.                             <textarea type="text" className="col-md-6 input-lg"
  46.                                       ref="htmlCode"
  47.                                       defaultValue={this.state.input} onChange={this.update}></textarea>
  48.                             <pre className="col-md-6 input-lg">{this.state.output}</pre>
  49.                         </div>
  50.                     </div>
  51.             )
  52.         }
  53.     });
  54.  
  55.     React.render(<App />, document.body);
  56. </script>
  57. </body>
  58. </html>

[React] React Fundamentals: Build a JSX Live Compiler的更多相关文章

  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使用笔记1-React的JSX和Style

    React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...

  3. AntDesign-React与VUE有点不一样，第一篇深入了解React的概念之一：JSX

    AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...

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

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

  5. [react]react创建app,路由，mobx 全教程

    ​ 1.创建app, npx create-react-app my-app Cmd Copy 2.进入项目目录 cd my-app Cmd Copy 3.启用配置文件(默认是不开启配置文件的) ya ...

  6. React/react相关小结

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

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

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

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

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

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

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

随机推荐

  1. why app_start start

    Add following code for your class: [assembly: WebActivatorEx.PostApplicationStartMethod(typeof(WeCha ...

  2. python 处理cookie简单很多啊 httpclient版本是4.3.3

    模拟登录流程: 1 请求host_url 2 从host_url中解析出 隐藏表单 的值 添加到POST_DATA中 3 添加账户,密码到POST_DATA中 4 编码后,发送POST请求    要点 ...

  3. 解决java.lang.NoClassDefFoundError: org.jdom.Content

    报错:java.lang.NoClassDefFoundError: org.jdom.Content 解决办法: 更新lib目录下的jdom.jar 至最新版本.

  4. ZOJ 2562 More Divisors

    又是个水题,刚刚开始没有用搜索,因为对于反素数有: n=2^t1*3^t2^5^t3*7^t4..... 这里有 t1>=t2>=t3>=t4. 而且相同的因数的情况下,素数越不同越 ...

  5. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-003-@Conditional根据条件生成bean及处理profile

    一.用@Conditional根据条件决定是否要注入bean 1. package com.habuma.restfun; public class MagicBean { } 2. package ...

  6. 解决crystal report水晶报表在浏览器提示bobj未定义的错误

    网上的中文文章(比如这篇文章)都是写的部署到服务器后出现的问题,同时也指出要把crystal report的aspnet_client文件夹拷贝到对应项目的根目录里,这样就可以正常显示了,但是具体到我 ...

  7. 《unix网络编程》笔记

    inet_pton和inetntop函数.字母p和n代表presentation和numeric.地址的表达presentation格式通常是ASCIL串,数值(numeric)格式则是存在于套接字地 ...

  8. decode_json 必须是unicode形式的字符

    centos6.5:/root/test#cat a1.pl use JSON qw/encode_json decode_json/; use Encode; my $data = [ { 'nam ...

  9. bzoj1072

    还是那句话s<=10 必然想到状压 题目唯一的难点在于怎么转移整除 整除即是mod d=0,我们用f[cur,j]表示选取状况为cur,余数为j的方案数 注意一个数a1a2a3…an (ai表示 ...

  10. pcDuino 刷系统-卡刷

    准备: pcduino : 点此购买 支持HDMI的显示器:点此购买  或参考无显示器刷机与使用.至少1张4G microSD卡,如果内存卡不大,可以用内存卡刷内核,用u盘刷系统 背景:本教程中使用的 ...