[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挂载和合成组件来创建应用表现层的过程中,针对数 ...
随机推荐
- Visual Studio Code扩展
Visual Studio Code扩展 注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一 ...
- iOS中使用RegexKitLite来试用正则表达式 使用ARC 20个错误解决办法
You can also disable the ARC for the RegexKitLite only by adding a flag: select the project -> YO ...
- QT窗口渐现效果，窗口震动效果，鼠标移动窗口
//窗口渐现效果void MainWindow::closeWindowAnimation() //关闭窗口效果 { QPropertyAnimation *animation = new QProp ...
- PHP中的urlencode和urldecode的理解
平时在工作中经常要写 $xxx = urldecode($_GET['xxx']);的类似代码,大部分的情况都是没有问题的.也能很好的工作. 所以也没有怎么在意.但是突然有一天我想到 $xxx =$_ ...
- BZOJ 1725: [Usaco2006 Nov]Corn Fields牧场的安排
Description Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧 ...
- 使用jdk生成证书以及把证书导入到jdk中
证书对于实现此单点登录非常之重要,证书是服务器端和客户端安全通信的凭证,本教程只是演示,所有用了JDK自带的证书生成工具keytool.当然在实际项目中你可以到专门的证书认证中心购买证书. 中文官方网 ...
- linux权限掩码
我的博客:www.while0.com 主要是在新建文件或目录的时候,控制新文件或目录的默认权限. 文件:新建文件默认没有x权限,故新建文件在umask为000时最大权限是666. 目录:新建目录默认 ...
- ARP 实现
ARP 实现 现在我们介绍一下arp的实现,内核版本2.6.24. [数据结构] 协议栈通过ARP协议获取到的网络上邻居主机的IP地址与MAC地址的对应关 系都会保存在这个表中,以备下次与邻居通讯时使 ...
- JavaScript日期时间操作
<script> var d=new Date();//当前时间 alert(d); var d1=new Date(1992,5,19);//定义一个时间,月份要加1; alert(d1 ...
- c语言开源项目--SQLite学习资料总结
同行博客: 1.http://www.cnblogs.com/hustcat/category/175618.html; 2.http://blog.csdn.net/zhoudaxia/articl ...