[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挂载和合成组件来创建应用表现层的过程中,针对数 ...
随机推荐
- NET Portability Analyzer
NET Portability Analyzer 分析迁移dotnet core 大多数开发人员更喜欢一次性编写好业务逻辑代码,以后再重用这些代码.与构建不同的应用以面向多个平台相比,这种方法更加容易 ...
- iOS 推荐博客
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:http://www.zhihu.com/question/20264108/answer/3026 ...
- 解决nginx 504 Gateway Time-out的一些方法
在CentOS下配置lnmp组合基本上用的都是同样的配置文件,一直都没出现过问题,可最近在一个vps上安装同样的环境之后,网站在线10多人就出 现了打开速度非常缓慢的情况,有好几次都是直接达到了ngi ...
- python多重继承：
除了从一个父类继承外,Python允许从多个父类继承,称为多重继承. 多重继承的继承链就不是一棵树了,它像这样: class A(object): def __init__(self, a): pri ...
- 【UVA 11865】 Stream My Contest （二分+MDST最小树形图）
[题意] 你需要花费不超过cost元来搭建一个比赛网络.网络中有n台机器,编号0~n-1,其中机器0为服务器,其他机器为客户机.一共有m条可以使用的网线,其中第i条网线的发送端是机器ui,接收端是机器 ...
- [转贴]从零开始学C++之STL（二）：实现一个简单容器模板类Vec（模仿VC6.0 中 vector 的实现、vector 的容量capacity 增长问题）
首先,vector 在VC 2008 中的实现比较复杂,虽然vector 的声明跟VC6.0 是一致的,如下: C++ Code 1 2 template < class _Ty, cl ...
- ANDROID_MARS学习笔记_S03_005_Geocoder、AsyncTask
一.代码1.xml(1)AndroidManifest.xml <uses-permission android:name="android.permission.ACCESS_FIN ...
- 行为树实现AI逻辑
http://blog.csdn.net/kenkao/article/details/6099966 http://www.aisharing.com/archives/99 http://www. ...
- 【CF】142 Div.1 B. Planes
SPFA.注意状态转移条件,ans的求解需要在bfs中间求解.因为只要到了地点n,则无需等待其他tourist.还是蛮简单的,注意细节. /* 229B */ #include <iostrea ...
- Unity3D-基本导航(NavMesh)功能实现
1: 打开场景 2:打开Navgation窗口 菜单中: Window --> Navgation, 在Inspector旁边会出现导航界面 这个Objcet的面板是对应当前选择的物体的,旁边的 ...