JSX语法

JSX是javascript XML简写，表示JavaScript代码中写XML格式代码。

JSX的基本使用：

const title = <h1>Hello JSX</h1>

JSX不是标准的ECMA Script语法。它是MCEAscript的扩展语法。需要使用babe编译之后，才能在浏览器中运行。create-react-app脚手架已经配置好了，无需再手动配置。

使用JSX语法注意点：

1.React元素的属性使用驼峰命名法。

2.特殊属性名：class->className,for->htmlFor,tabindex->tabIndex。

3.没有子节点的React元素可以使用/>结束。

使用JSX时，使用括号包裹JSX，从而避免JS中的自动插入分号陷阱。

在JSX中使用Javascript表达式：

const name="jack“;

const dv = (

        <div>你好，我叫:{name}</div>

       )

JSX的条件渲染：

JSX的列表列表渲染： 

JSX样式处理 ：

1.行内样式：

<h1 style={ {color:red,backgroundColor:'yellow'}}>JSX的样式</h1>

2.类名样式：

1.写入一个index.css样式文件.

2.引入index.css文件：import './css/index.css'

3.const title =(

        <h1 className=“title”>JSX样式处理</h1>

)