React 学习 JSX语法与原生HTML

JSX 可以看作JavaScript的拓展,看起来有点像XML。 使用React,可以进行JSX语法到JavaScript的转换。 为什么使用JSX 使用React,不一定非要使用JSX语法,可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分的简单明了。简明的代码结构更利于开发和维护。 XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。看个直接的对比: //使用JSX React.render( <div> <div>

JSX 语法使用

利用 JSX 编写 DOM 结构,可以用原生的 HTML 标签,也可以直接像普通标签一样引用 React 组件。这两者约定通过大小写来区分,小写的字符串是 HTML 标签,大写开头的变量是 React 组件。 使用 HTML 标签: import React from 'react'; import { render } from 'react-dom'; var myDivElement = <div className="foo" />; render(myDivElement, document.getElementById('mountNode')); HTML 里

JSX 语法使用

利用 JSX 编写 DOM 结构,可以用原生的 HTML 标签,也可以直接像普通标签一样引用 React 组件。这两者约定通过大小写来区分,小写的字符串是 HTML 标签,大写开头的变量是 React 组件。 使用 HTML 标签: import React from 'react'; import { render } from 'react-dom'; var myDivElement = <div className="foo" />; render(myDivElement, document.getElementById('mountNode')); HTML 里

JSX 语法了解,我们为什么要学习它

传统的 MVC 是将模板放在其他地方,比如 script 标签或者模板文件,再在 JS 中通过某种手段引用模板。按照这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何引用模板……下面是一段 React 官方的看法: We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and

JSX语法及学习

JSX 是 Javascript 代码里直接写XML的语法 JSX (Javascript XML syntax transform) 是使用XML语法编写Javascript的一套解析工具; X代表XML;也可以理解为扩展(eXtension),因为实现JSX功能本身就是使用Javascript; React建议使用JSX(但非必要) 实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码 React 官方推荐使用JSX, 当然你想直接使用纯Javascript代码写也是可以的,只是使用JSX,组件的结构和组件之间的关系看上去更加清晰
  • 1

回到顶部