React的使用与JSX的转换

时间：2022-10-28 22:09:35
前置技能：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的使用与JSX的转换
 React的使用与JSX的转换
 
如果换成react-0.14.0.j的话，控制台显示：
React的使用与JSX的转换
React的使用与JSX的转换
 
页面上虽然可以显示，但是会有提示：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>
React的使用与JSX的转换这下控制台清净了。
React的使用与JSX的转换
 
二.知识点
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
    运行：React的使用与JSX的转换
    React的使用与JSX的转换
生成build文件，如图：
　　React的使用与JSX的转换    
 
React的使用与JSX的转换
如果不知道怎么使用这个工具：jsx -h
第一行就是使用格式：Usage: jsx [options] <source directory> <output directory> [<module ID> [<module ID> ...]]
 
 
 

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

  1. 【React 6&sol;100】 React原理 &vert; setState &vert; JSX语法转换 &vert; 组件更新机制

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

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

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

  3. React基础篇 - 02&period;JSX 简介

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

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

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

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

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

  6. 【react学习笔记】-jsx

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

  7. Webstorm 不识别es6 import React from &OpenCurlyQuote;react’——webstorm不支持jsx语法怎么办

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

  8. &lbrack;React&rsqb; React Fundamentals&colon; 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 ...

  9. React（三）JSX内置表达式

    (一)JSX是什么? React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. 我们不需要一定使用 JSX,但它有以下优点 ...

随机推荐

  1. 函数（C&plus;&plus; Primer读书笔记）

    C++ Primer 第五版课后题 练习6.32 :下面的函数合法吗?如果合法,说明其功能:如果不合法,修改其中的错误并解释原因. #include <iostream> using na ...

  2. jQuery简单导航示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【BZOJ2037】Sue的小球（动态规划）

    [BZOJ2037]Sue的小球(动态规划) 题面 BZOJ 题解 莫名想到这道题目 很明显是一样的 设\(f[i][j][0/1]\)表示已经接到了\(i-j\)这一段的小球 当前在\(i\)或者在 ...

  4. python学习之路前端-CSS

    CSS概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  5. java--加强之 Java5的泛型

    转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9944389 36.入门泛型的基本应用 体验泛型: Jdk1.5以前的集合类中存在什么问题? A ...

  6. CSS盒模型（Box Model）

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

  7. python 二叉树实现带括号的四则运算

    #!/usr/bin/python #* encoding=utf-8 s = "20-5*(0+1)*5^(6-2^2)" c = 0 top = [0,s[c],0] op = ...

  8. 剑指offer&lpar;8&rpar;

    题目: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路: 第一反应想到的是把数右移,每一位与1相与,然后判断个数,但是若输入的为负数,会出现死循环现象. 所以我们设置一个标志量 ...

  9. &lbrack;POI2008&rsqb;KLO-Building blocks

    题目描述 N柱砖,希望有连续K柱的高度是一样的. 你可以选择以下两个动作 1:从某柱砖的顶端拿一块砖出来,丢掉不要了. 2:从仓库中拿出一块砖,放到另一柱.仓库无限大. 现在希望用最小次数的动作完成任 ...

  10. 通过django的rest-framework……（CBV）

    为什么不使用FBV,因为CBV重用性很高 先看一个例子: from django.views.generic.base import View from django.http import Http ...

相关文章