React 初学 - jsx语法规则 - 个人笔记3

JSX 的一个关键区别是你不能再使用 class 这个单词来做为 HTML 的 class 名。 这是因为 class 是 JavaScript 中的关键字。 而 JSX 使用 className 来代替。
例如你可以这样写：

const JSX = (
  <div className="myDiv">
    <h1>Add a class to this div</h1>
  </div>
)

在HTML中，几乎所有的标签都有一个开始和结束标签：<div></div>，结束标签在你要关闭的标签名之前始终具有正斜杠。 但是，HTML 中有一些称为 “自闭合标签” 的特殊实例，它们在另一个标签开始之前，不需要开始和结束标签都存在。

例如，换行标签可以写成 <br> 或者 <br />，但是不应该写成 <br></br>，因为它不包含任何内容。

在 JSX 中，规则略有不同。 任何 JSX 元素都可以使用自闭合标签编写，并且每个元素都必须关闭。 例如，为了通过编译换行标签必须始终编写为 <br />。 另一方面 <div> 可以写成 <div /> 或者 <div></div>。

---

有两种方法可以创建 React 组件。 第一种方法是使用 JavaScript 函数。 以这种方式定义组件会创建无状态功能组件。 目前为止，可以将无状态组件视为能接收数据并对其进行渲染，但不管理或跟踪该数据的更改的组件。 (第二种方式创建 React 组件下次介绍。)

要用函数创建组件，只需编写一个返回 JSX 或 null 的 JavaScript 函数。 需要注意的一点是，React 要求你的函数名以大写字母开头。

例如：

const MyComponent = function() {
  // 修改这行下面的代码
  let JSX = <div>123</div>
  return (
    JSX
  );
  // 修改这行上面的代码
}