JavaScript的React框架中的JSX语法学习入门教程.pdfVIP

这篇文章主要介绍了 JavaScript 的 React 框架中的 JSX 语法学习入门教程 ,React 是由 Facebook 开发并开源的高人气 js 框架 ,需要的朋友可以参考下 什么是 JSX ？ 在用 React 写组件的时候，通常会用到 JSX 语法，粗看上去，像是在 Javascript 代码里 直接写起了 XML 标签，实质上这只是一个语法糖，每一个 XML 标签都会被 JSX 转换工具 转换成纯 Javascript 代码，当然你想直接使用纯 Javascript 代码写也是可以的， 只是利用 JSX ， 组件的结构和组件之间的关系看上去更加清晰。 var MyComponent = React.createClass({/*...*/}); var myElement = lt;MyComponent someProperty={true} /gt;; React.render(myElement, document.body); 一个 XML 标签， 比如lt;MyComponent someProperty={true} /gt; 会被 JSX 转换工具转 换成什么呢？ 比如： var Nav = React.createClass({/*...*/}); var app = lt;Nav color=bluegt;lt;Profilegt;clicklt;/Profilegt;lt;/Navgt;; 会被转化为： var Nav = React.createClass({/*...*/}); var app = React.createElement( nbsp;Nav, nbsp;{color:blue}, nbsp;React.createElement(Profile, null, click) ); 那么也就是说，我们写一个 XML 标签，实质上就是在调用 React.createElement 这个方 法，并返回一个 ReactElement 对象。 ReactElement createElement( nbsp;string/ReactClass type, nbsp;[object props], nbsp;[children ...] ) 这个方法的第一个参数可以是一个字符串，表示是一个 HTML 标准内的元素，或者是 一个 ReactClass 类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象， 或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值） 。 从第三个参数开始，之后的参数都被认作是元素的子元素。 JSX 转化器 要把带有 JSX 语法的代码转化为纯 Javascript 代码，有多种方式，对于内联与 HTML 中的代码或者是未经过转化的外部文件，在 script 标签中要加上 type=text/jsx ，并引入 JSXTransformer.js 文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码 上线前就将代码转换好，可以使用 npm 全局安装 react-tools ： npm install -g react-tools 并使用命令行工具转化即可（具体用法可以参考 jsx -h ）： jsx src/ build/ 如果使用自动化工具，比如