[3]React 深入浅出-----JSX简介

原创 2017年08月06日 23:54:50

在使用React的时候,就不得不提JSX, JSX可以理解为JavascriptXML,其标准的官方网站为:https://github.com/jsx/JSX,安装JSX也很简单:

E:\React\learn>npm install -g jsx
C:\Users\rodney\AppData\Roaming\npm\jsx-profile-server -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx-profile-server
C:\Users\rodney\AppData\Roaming\npm\jsx-with-server -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx-with-server
C:\Users\rodney\AppData\Roaming\npm\jsx -> C:\Users\rodney\AppData\Roaming\npm\node_modules\jsx\bin\jsx
C:\Users\rodney\AppData\Roaming\npm
`-- jsx@0.9.89
  +-- escodegen@0.0.28
  | `-- estraverse@1.3.2
  +-- esmangle@0.0.17
  | +-- escope@1.0.3
  | | `-- estraverse@2.0.0
  | +-- esshorten@0.0.2
  | | `-- estraverse@1.2.0
  | `-- optimist@0.6.1
  |   +-- minimist@0.0.10
  |   `-- wordwrap@0.0.3
  +-- esprima@1.0.4
  +-- source-map@0.1.43
  | `-- amdefine@1.0.1
  `-- source-map-support@0.2.10
    `-- source-map@0.1.32

通过这个JSX工具,就可以执行一些jsx命令,把一些jsx文件,转换成为特定的输出。

比如下面的一个helloworld.jsx 文件,

class _Main {
	static function main(args : string[]) :void {
		log "Hello, world!";
	}
}

经过下面的命令:

jsx --run example/hello.jsx
其转换输出为:

Hello, world!

那么为什么JSX会用在React里面呢?

下面来具体看一个HelloWorld的例子

在使用React的API我们能够输出一个HelloWorld,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>hello React</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script src="react/build/react.js"></script>
    <script src="react/build/react-dom.js"></script>
    <script>
      ReactDOM.render(
        React.DOM.h1(
          {id: "my-heading"},
          React.DOM.span(null,
            React.DOM.em(null, "Hell"),
            "o"
          ),
          " world!"
        ),
        document.getElementById('app')
      );
    </script>
  </body>
</html>

大家会发现,其实用React.DOM.*的API去输出一个HTML格式的文件,还是挺繁琐的,里面包含了很多的圆括号,以及里面有很多的嵌套,稍微不留神,就写错了。

那么有没有更好的办法呢? 其中的方法之一,React借助了JSX的思想,写一个Hmtl的模板,然后通过ReactJS的一个工具(Babel,其实就是一个browser.js)来进行转换

下面是通过Babel工具来转换JSX模板的一个例子。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello JSX React</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script src="react/build/react.js"></script>
    <script src="react/build/react-dom.js"></script>
    <script src="babel/browser.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <h1 id="my-heading">
          <span><em>Hell</em>o</span> world!
        </h1>,
        document.getElementById('app')
      );
    </script>
  </body>
</html>


简单明了, 

        <h1 id="my-heading">
          <span><em>Hell</em>o</span> world!
        </h1>,

取代了,

 React.DOM.h1(
          {id: "my-heading"},
          React.DOM.span(null,
            React.DOM.em(null, "Hell"),
            "o"
          ),
          " world!"
        ),

简单,方便。

但是需要多引入一个转换,React JSX模板的库:<script src="babel/browser.js"></script>

但是也是值得的,安装方式为(假设已经安装了npm和bower)


好了,通过上面的文字和描述,大家应该都能了解JSX的基本用法了。下面的链接就是一些,学习JSX比较好的网站。

@ 把JSX转换成React识别的React.DOM.*的语法

https://babeljs.io/repl




@ 把html转换成JSX

http://magic.reactjs.net/htmltojsx.htm




版权声明:本文为博主原创文章,未经博主允许不得转载。

深入浅出React(三):理解JSX和组件

什么是JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM,虚拟DOM也可以通过Ja...

React入门笔记(一):简介和JSX

简介和JSX

React.js 官网资料摘记:JSX简介

对React.js做一个基础的摘记,建议先看过官网上的五子棋例子再来看这里。
  • YQXLLWY
  • YQXLLWY
  • 2017年06月18日 21:54
  • 382

React学习笔记(3)-- JSX语法及特点介绍

  • thystar
  • thystar
  • 2015年08月27日 17:08
  • 805

React--Introducing JSX(JSX简介)

JSX简介 看看这个变量声明: const element = Hello, world!; 这个有趣的标签语法既不是字符串也不是HTML...

react文档阅读笔记----JSX属性

JSX属性.操作符在JSX中的应用 如果一个模块export出去多个React组件,你可以使用.来获取各个组件。 import React from 'react';const MyCompo...

React学习笔记-模板、ReactDOM.render()、JSX语法

React 起源于 Facebook 的内部项目,他从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App ...

React Native入门学习笔记三(JSX语法)

参考示例: https://github.com/ruanyf/react-demosdemo2 简单数组遍历var names = ['Alice', 'Emily', 'Kate'];React...
  • xundh
  • xundh
  • 2016年06月23日 23:00
  • 6127

react与jsx语法介绍--先行篇

这段时间开始入坑react了,看了官网的jsx语法方面的介绍,恩,确实有点迷迷的,有幸见到一篇歪果仁写的比较详细的有关react和jsx的细节性知识点总结,特地粗略翻译了一下(英语略渣),也顺便加深我...

React高级教程(es6)——(1)JSX语法深入理解

简介:从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比...
  • liwusen
  • liwusen
  • 2016年11月28日 20:25
  • 1384
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[3]React 深入浅出-----JSX简介
举报原因:
原因补充:

(最多只允许输入30个字)