一、什么是JSX?
1、jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力。
2、Facebook公司给JSX的定位是JavaScript的扩展（直接决定了浏览器并不会像天然JavaScript一样地支持JSX，需要通过babel转译）
3、JSX会被babel编译为：React.createElement()，React.createElement()将返回一个叫作“ReactElement”的JS对象。
认识Babel:是一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript的语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
二、React为什么要用JSX?
JSX语法糖允许前端开发者使用我们最熟悉的类HTML标签语法来创建虚拟DOM在降低学习成本的同时，也提升了研发效率与研发体验。
三、如何使用JSX？
1、在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
例如：const title = 'World'; const element = <h1>Hello, {title}</h1>;
2、在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。
例如：
1）你可以通过使用引号，来将属性值指定为字符串字面量：
const element = <div tabIndex = "0"></div>;
2）也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const element = <img src = {user.avatarUrl}></img>;
3、因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如：JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
4、JSX中的标签可以是单标签，也可以是双标签，但必须保证标签是闭合的。
例如：
单标签：constelement = <img src = {user.avatarUrl }/>;
双标签：const element = (<div> <h1> Hello World ! </h1> </div>);
网友评论