[React] React Fundamentals: Build a JSX Live Compiler
we want to have the ability to write JSX and see the output live in the browser.
<!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</title>
</head>
<body>
<script type="text/jsx">
/** @jsx React.DOM */ var App = React.createClass({
getInitialState: function() {
return {
input: '',
output: '',
err: ''
}
},
update: function(e) {
try{
var input = this.refs.htmlCode.getDOMNode().value;
this.setState({
output: JSXTransformer.transform(input).code,
err: ''
})
}catch(err){
this.setState({
err: err.message
})
}
},
render: function() {
return (
<div className="container">
<div className="row">
<div className="alert alert-danger">
{this.state.err}
</div>
</div>
<div className="row">
<textarea type="text" className="col-md-6 input-lg"
ref="htmlCode"
defaultValue={this.state.input} onChange={this.update}></textarea>
<pre className="col-md-6 input-lg">{this.state.output}</pre>
</div>
</div>
)
}
}); React.render(<App />, document.body);
</script>
</body>
</html>
[React] React Fundamentals: Build a JSX Live Compiler的更多相关文章
- [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 ...
- React使用笔记1-React的JSX和Style
React使用笔记1-React的JSX和Style Date: 2015-11-27 20:56 Category: Web Tags: JavaScript Author: 刘理想 [toc] 1 ...
- AntDesign-React与VUE有点不一样，第一篇深入了解React的概念之一：JSX
AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- [react]react创建app,路由，mobx 全教程
1.创建app, npx create-react-app my-app Cmd Copy 2.进入项目目录 cd my-app Cmd Copy 3.启用配置文件(默认是不开启配置文件的) ya ...
- React/react相关小结
React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表－b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- React: React组件的生命周期
一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...
随机推荐
- 将UIImage保存到iOS照片库和对应程序沙盒中－b
1.保存到iOS照片库需要引入QuartzCore.framework框架,具体代码如下:.h文件#import <QuartzCore/QuartzCore.h>UIImageView ...
- The CircuitCalculator.com Blog a blog with live web calculators Home About Policies Contact PCB
PCB Trace Width Calculator 转载自:CircuitCalculator.com 关键词: PCB,Layout,电流,导线宽度. This Javascript web ca ...
- java 容器类大集结
这个世界是程序员的世界,归根到底是数据的世界,要统治这个世界,首先要学会征服数据. 没有最好的,只有最合适的,如何在不同的环境先选择最优的存储的结构呢?且看下文分解: 以下内容部分来自网络,参考: h ...
- Web应用的组件化（二）
管控平台 在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段去管控整个开发过程.从各种角度看,面对较大规模前端开发团队,都有必要建立这么一个开发阶段的协作平台. 在 ...
- Mongodb数据更新命令
一.Mongodb数据更新命令 Mongodb更新有两个命令:update.save. 1.1update命令 update命令格式: db.collection.update(criteria,ob ...
- File上传
http://wenku.baidu.com/link?url=bsufrjDQztceWCUw2gqFeYkL1_95t9yIyV1LfHVYL9URAlpWSK_ALO1bAWSlBdnPXYXE ...
- 《鸟哥的Linux私房菜》读书笔记五
1. Ctrl+alt+FX(X=1~6)可以切换到6个不同的文字界面终端(Terminal) 再按Ctrl+alt+F7就可以回到X Window,按Ctrl+alt+Backspace这是结束所有 ...
- Android JNI使用方法
经过几天的努力终于搞定了android JNI部分,下面将我的这个小程序和大家分享一下.android JNI是连接android Java部分和C/C++部分的纽带,完整使用JNI需要Java代码和 ...
- Automator 简单使用流程
iOS开发中常常要用到图片缩放的工作,有些需求流程很奇葩,根本找不到现成的工具去实现. 这时候,你可以去想一想Automator了. 示例:要把文件夹下所有的图片文件都缩小成原来的一半(搞iOS开发的 ...
- Muduo-Base-Atomic
针对原子性操作进行封装, 下面是我们需要用到的原子操作函数, 有需要对此类进行扩展的话,可以根据下面的函数进行扩展. 原子操作需要加上一个编译选项 -march=i386(根据你CPU 的类型来写,也 ...