React开篇之JSX语法（Day：2）

任务：学习React的JSX语法

1、什么是JSX？

下面是React的官方解释：JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。 JSX: 将标签引入 JavaScript

传统的web组成：网页是构建在 HTML、CSS 和 JavaScript 之上的。多年以来，web 开发者都是将网页内容存放在 HTML 中，样式放在 CSS 中，而逻辑则放在 JavaScript 中 —— 通常是在不同的文件中！页面的内容通过标签语言描述并存放在 HTML 文件中，而逻辑则单独存放在 JavaScript 文件中。

2、JSX规则

2.1 只能返回一个根元素

如果想要在一个组件中包含多个元素，需要用一个父标签把它们包裹起来。

例如，你可以使用一个

标签：

<div>
  <h1>海蒂·拉玛的待办事项</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

你也可以用 <> 和 </> 元素来代替：

<>
  <h1>海蒂·拉玛的待办事项</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

这个空标签被称作 Fragment React Fragment 允许你将子元素分组，而不会在 HTML 结构中添加额外节点。

为什么多个 JSX 标签需要被一个父元素包裹？

JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

2.2标签必须闭合

JSX 要求标签必须正确闭合。像这样的自闭合标签必须书写成，而像

oranges 这样只有开始标签的元素必须带有闭合标签，需要改为

oranges

。

2.3使用驼峰式命名法给大部分属性命名！(之前版本好像是所有)

原因：JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中，经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 - 符号或者像 class 这样的保留字。这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示。

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

2.4在 JSX 中通过大括号使用 JavaScript

JSX 允许你在 JavaScript 中编写类似 HTML 的标签，从而使渲染的逻辑和内容可以写在一起。有时候，你可能想要在标签中添加一些 JavaScript 逻辑或者引用动态的属性。这种情况下，你可以在 JSX 的大括号内来编写 JavaScript。

使用引号传递字符串

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

这里的 "https://i.imgur.com/7vQD0fPs.jpg" 和 "Gregorio Y. Zara" 就是被作为字符串传递的。

看到这里的时候，我有点疑惑，就是这些代码是如何运行起来的，这就是涉及到node.js的安装和构建React项目了

3、构建React项目

1、下载node.js 我是直接在官网下载，就安装了。

2、使用VS Code构建React项目，使用脚手架创建项目：npx create-react-app test-app 启动：npm start 然后在项目中创建一个新文件，test.js. 把列子中的代码贴过来

export default function TodoList() {
    return (
        <>
            <h1>海蒂·拉玛的待办事项</h1>
            <img
                src="https://i.imgur.com/yXOvdOSs.jpg"
                alt="Hedy Lamarr"
                className="photo"
            />
            <ul>
                <li>发明一种新式交通信号灯</li>
                <li>排练一个电影场景</li>
                <li>改进频谱技术</li>
            </ul>
        </>
    );
}

手动保存，如何在浏览器中就可以看到了

今天先到这里吧，明日继续，，，

XJQ124 / Some-notes