简单介绍JSX

1.什么是JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。

JSX本质：

JSX本质是React.createElement(component,props,children)函数的语法糖。

2.JSX的特点

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

3.JSX语法 

语法：{ JavaScript 表达式 }

举个栗子：const element = <h1>Hello, world!</h1>;

注意：1、React的元素属性名使用驼峰命名法

           2、内联样式的style：样式名以驼峰命名法表示, 如font-size需写成fontSize。

let _style = { backgroundColor:"red" };
	
	ReactDOM.render(
	    <h1 style={_style}>Hello, world!</h1>, 
	    document.getElementById('box')
	);

           3、外部样式的class：HTML中曾经的 class 属性改为 className

	ReactDOM.render(
	    <h1  className="bluebg">Hello, world!</h1>,
	    document.getElementById('box')
	);

           4、列表渲染时，必须有 key 值

           5、在 jsx 所有标签必须闭合

扫描二维码关注公众号，回复： 14844797 查看本文章

           6、组件的首字母一定大写，标签一定要小写