jsx 不能直接运行，是被 babel-loader 中的 react 这个 preset 翻译的

需要注意：

1.必须被一个单独的大标签包裹，比如：div 或者 section

2.标签必须封闭

3.class 要写成 className， for 要写成 htmlFor

4.HTML 注释不能使用，只能使用 JS 注释

5.原生标签，比如：p、li、div 如果要使用自定义属性，必须用 data- 前缀。

如果是自定义标签，此时可以随便传属性：

6.JS 表达式用 { } 单大括号包裹。

在 JSX 中不能使用 if...else... 语句，但可以使用 conditional (三元运算) 表达式来替代。

7.可以运行函数

8.样式使用双大括号

9.可以使用数组，数组中如果是 JSX 语法，数组会被自动展开，所以不需要使用 ng-repeat 或 v-for 这样的指令展开数组。

class List extends Component {  // 组件中最重要的方法就是render方法,render是渲染的意思  render() {      /**       * 定义一个数组       * map 映射成一个数组       * 定义的JSX项目上要求有key属性,只要是重复的数组项目,都要有不能重复的key属性,这是要求。       */      let arr = ["白板","幺鸡","二条"].map((item,index)=>{  　　　　return 
{item}
      });      // 返回一个jsx语法,非常牛逼语法      return 
     
      {arr}
     
  }}

效果图：

10.小写字母开头为原生标签，大写字母开头为React组件。