React框架 JSX的理解和基本语法

React JSX的理解

JSX 是 JavaScript 的一种扩展，为函数调用和对象构造提供了语法糖，特别是 React.createElement()。 JSX 看起来可能更像是模板引擎或 HTML，但它不是。JSX 生成 React 元素，同时允许你充分利用 JavaScript 的全部功能。 JSX 是编写 React 组件的极好方法，有以下优点： 改进的开发人员体验：代码更易读，因为它们更加形象，感谢类 XML 语法，从而可以更好地表示嵌套的 声明式结构。 更具生产力的团队成员：非正式开发人员可以更容易地修改代码，因为 JSX 看起来像HTML，这正是他们 所熟悉的。 更少的语法错误：开发人员需要敲入的代码量变得更少，这意味着他们犯错的概率降低了，能够减少重 复性伤害。

JSX的规则

1. 只能返回一个根元素
2. 标签必须闭合
3. 使用驼峰式命名法给所有大部分属性名
4. 使用引号传递字符串
5. 使用大括号

小例子

<script>
1.在React的函数组件中使用jsx，className 指定一个scenery 图片一个样式类名
export default function Photo() {
  const scenery= './fengjingtu.jpg';
  const name= '美丽风景图';
  return (
 <img
      className="scenery"
      src={scenery}
      alt={name}
    />
  );
}
</script>
效果图