[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挂载和合成组件来创建应用表现层的过程中,针对数 ...
随机推荐
- pyramid的第一个项目
1,安装pyramid --在次之前最好先安装python virtualenv --python virtualenv ---激活方式pyenv activate pip install pyram ...
- iOS- static extern const
1.静态变量 static 什么是静态变量:从面向对象的角度触发,当需要一个数据对象为整类而非某个对象服务,同时有力求不破坏类的封装性,既要求此成员隐藏在类的内部,有要求对外不可见的时候,就可以使用 ...
- LightOj_1321 Sending Packets
题目链接 题意: 给一个数据大小为S的数据包, 每一次发送需要K秒(单向),现在要从节点0 发送到节点 n-1. 其中有n - 1条路径, 每条路径都有一个传输成功率. 问传输成功所需最小时间的期望. ...
- 大数据量查询优化——数据库设计、SQL语句、JAVA编码
数据库设计方面: 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将 ...
- 【转】WPF中Binding的技巧（一）
WPF中Binding的技巧(一) 在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到 ...
- VC禁止在任务管理器中结束本进程
转自百度空间:http://hi.baidu.com/175943462/item/657905e13b73b70b8d3ea8bb 一提到进程保护特别是在Windows下,没有最安全,只有更安全.下 ...
- Gdi+实用入门
大部分是参照其它资料,然后加以自己的理解,那是什么,总结.算不得什么教程.......汗,自己看着就行了..如果别人能看那就更好了. 首先下载GDI+文件包,一个动态链接库,使用GDI+就是调用那个动 ...
- 性能量化之cpu
系统现在很慢”似乎是对系统的性能最常用的抱怨了,但究竟慢到什么程度,如何来界定慢,可能需要对性能进行量化,对于OS来说,大致主要分为cpu,内存,磁盘,网络等组件,对这些维度的性能量化,不但可以更准确 ...
- [ZOJ 3623] Battle Ships
Battle Ships Time Limit: 2 Seconds Memory Limit: 65536 KB Battle Ships is a new game which is s ...
- 【转】为ListView每个Item上面的按钮添加事件
原文网址:http://blog.csdn.net/qq435757399/article/details/8256453 1.先看下效果图: 在这里仅供测试,我把数据都写死了,根据需要 ...