前置技能：Chrome浏览器
 
一.拿糖：React的使用

React v0.14 RC 发布，主要更新项目：

两个包: React 和 React DOM

DOM node refs

无状态的功能组件

弃用 react-tools

编译器优化

 
吃糖：开门见山，上代码。
<!DOCTYPE html>

<html>

<head>

  <title>zqz_JSX_demo</title>

  <script type="text/javascript" src="../lib/react-0.13.4.js"></script>

  <!-- <script type="text/javascript" src="../lib/react-0.14.0.js"></script> -->

  <script type="text/javascript" src="../lib/JSXTransformer.js"></script>

</head>

<body>

<div id="example"></div>

</body>

<script type="text/jsx">

  React.render(

          <h1>Hello World!</h1>,

          document.getElementById("example"),

          function(){

              console.log("OK!")

          }

      )

</script>

</html>
 
react-0.13.4.js 使用：浏览器控制台显示没问题：
 
 
如果换成react-0.14.0.j的话，控制台显示：
 
页面上虽然可以显示，但是会有提示：React.render是被废弃的。建议使用react-dom.js中的ReactDOM.render来代替。
 
so,我们就用react-dom.js来弄。
 
<!DOCTYPE html>

<html>

<head>

  <title>zqz_JSX_demo</title>

  <!-- <script type="text/javascript" src="../lib/react-0.13.4.js"></script> -->

  <script type="text/javascript" src="../lib/react-0.14.0.js"></script>

  <script type="text/javascript" src="../lib/react-dom-0.14.0.js"></script>

  <script type="text/javascript" src="../lib/JSXTransformer.js"></script>

</head>

<body>

<div id="example"></div>

</body>

<script type="text/jsx">

  ReactDOM.render(

          <h1>Hello World!</h1>,

          document.getElementById("example"),

          function(){

              console.log("OK!")

          }

      )

</script>

</html>
这下控制台清净了。
 
二.知识点
JSXTransformer.js：他的作用是将 JSX 语法转为 JavaScript 语法。以便浏览器可以执行。但是这部比较消耗时间，一般放在服务器端执行。（具体怎么耗时间，是个什么概念，我还不知道）
 
当然我们可以不用JSX,React本来就是JS。
 
那什么是JSX：在 JavaScript 代码里写着 XML 格式的代码称为 JSX。
 
所以上面的代码亦可以改成：
<script type="text/javascript">

  ReactDOM.render(React.createElement(

     "h1",

     null,

     "Hello World!"

    ), document.getElementById("example"), function () {

    console.log("OK!");

});

</script>
记得将text/jsx改成text/javascript。
所以很多人说JSX的实质是个语法糖。
 
三.拆糖：如何将JSX转换成JS代码。
>1.我们可以通过babel工具转换成JS代码。
>2.安装react-tools转换工具
    npm install -g react-tools
    运行：
    
生成build文件，如图：
　　    
 
如果不知道怎么使用这个工具：jsx -h
第一行就是使用格式：Usage: jsx [options] <source directory> <output directory> [<module ID> [<module ID> ...]]
 
 
 

React的使用与JSX的转换的更多相关文章

  1. 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

    ****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...

  2. React报错之JSX element type does not have any construct or call signatures

    正文从这开始~ 总览 当我们试图将元素或react组件作为属性传递给另一个组件,但是属性的类型声明错误时,会产生"JSX element type does not have any con ...

  3. react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  4. React基础篇 - 02.JSX 简介

    JSX 简介 请观察下面的变量声明: const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML ...

  5. React系列文章：JSX生成真实DOM结点

    在上一篇文章中,我们介绍了Babel是如何将JSX代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了Babel编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const style ...

  6. 6、手把手教React Native实战之JSX入门

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现! JSX并不是一 ...

  7. 【react学习笔记】-jsx

    //jsx定义组件 var Divider = React.creatClass({ getIsComplete:function(){ return 'is-complete' }, handleC ...

  8. Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办

    2016-10-31更新 webstorm不支持es6语法怎么办? webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to ...

  9. [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&g ...

随机推荐

  1. 超大 Cookie 拒绝服务攻击

    有没有想过,如果网站的 Cookie 特别多特别大,会发生什么情况? 不多说,马上来试验一下: for (i = 0; i < 20; i++) document.cookie = i + '= ...

  2. 线性数据结构之栈——Stack

    Linear data structures linear structures can be thought of as having two ends, whose items are order ...

  3. SQLServer执行命令出现“目录无效的提示”

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 一般都是清理垃圾清理过头了,把不该删的目录删了 网上说法: 问题描述: 1.s ...

  4. HTML5 progress和meter控件

    在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...

  5. 【原】AFNetworking源码阅读（二）

    [原]AFNetworking源码阅读(二) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中我们在iOS Example代码中提到了AFHTTPSessionMa ...

  6. 和 Thrift 的一场美丽邂逅

    一. 与 Thrift 的初识 也许大多数人接触 Thrift 是从序列化开始的.每次搜索 “java序列化” + “方式”.“对比” 或 “性能” 等关键字时,搜索引擎总是会返回一大堆有关各种序列化 ...

  7. jQuery动画-圣诞节礼物

    ▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...

  8. PHP获取上个月最后一天的一个容易忽略的问题

    正常来说,PHP是有一个很方便的函数可以获取上个月时间的 strtotime (PHP 4, PHP 5, PHP 7) strtotime - 将任何英文文本的日期时间描述解析为 Unix 时间戳 ...

  9. linux centos中添加删除修改环境变量，设置java环境变量

    前言 安装完软件必要添加环境变量.指令很少,然而长时间不写就会不自信:我写的对吗?于是百度开始,于是发现又是各有千秋.好吧,好记星不如烂笔头.当然,最重要的是,百度出来的都他妈的是如何添加环境变量,只 ...

  10. 代码的坏味道（17）——夸夸其谈未来性(Speculative Generality)

    坏味道--夸夸其谈未来性(Speculative Generality) 特征 存在未被使用的类.函数.字段或参数. 问题原因 有时,代码仅仅为了支持未来的特性而产生,然而却一直未实现.结果,代码变得 ...