《React.js手把手教程：从初学者到实战高手》
第一部分：React.js基础
章节 2：轻松入手JSX
在上一章节中，我们初步认识了React.js。现在，我们将更深入地探索React.js中的JSX（JavaScript XML）语法，这是一种用于构建React界面的强大工具。
什么是JSX？
JSX（JavaScript XML）是一种语法扩展，它允许我们在JavaScript代码中以类似HTML的方式编写UI组件。尽管它看起来像是HTML，但实际上它是JavaScript代码的一部分，用于定义React元素的结构和外观。
JSX的基本语法
让我们从一个简单的例子开始，以帮助你更好地理解JSX。
我们可以 js 代码中像下面这样创建一个JSX元素，它表示一个简单的<div>标签，标签内包含有文本内容 Hello, JSX!，并且，将这个标签赋值给了变量 element：
const element = <div>Hello, JSX!</div>;
是不是和 HTML 很像？在Javascript代码里直接写HTML标签，这将为我们编写代码提供极大的便利！
在JSX中嵌入表达式
JSX不仅允许我们创建静态内容，还可以在花括号（{}）内嵌入JavaScript表达式，从而动态生成内容。例如，我们可以在JSX中嵌入变量、函数调用等：
示例1:
const name = "Alice";
const greeting = <p>Hello, {name}!</p>;
在这个示例中，当代码运行时，{} 内的 name 将被变量 name 的值替换，将输出以下内容：
<p>Hello, Alice</p>
示例2：
const getName = function() {
return 'Alice';
};
const greeting = <p>Hello, {getName()}!</p>;
在这个示例中，当代码运行时，{} 内的 getName() 表示将会被执行 getName() 函数输出的结果所替换，最终将输出以下内容：
<p>Hello, Alice</p>
在项目中尝试一下
现在，我们在项目中尝试一下刚刚学到的JSX，并看看效果。
在 VS Code 中打开我们之前创建的 my-react-app 项目，如果你还没有创建这个项目，请参考 “准备工作” 这个章节创建它。
修改 src/App.js 中的代码，用以下代码替换掉之前的代码：
import React from 'react';
function App() {
return (
<div>
<h1>Welcome to my React App</h1>
<p>This is an example of using JSX!</p>
</div>
);
}
export default App;
现在我们来对这段代码做一些说明。
你可以将 src/App.js 看作是项目的入口文件（其实，真正的入口文件是 src/index.js，因为 src/index.js 引用了 src/App.js，所以我们可以将 src/App.js 当作项目的入口文件），当项目运行时，就会首先执行这个文件中的代码。
这个文件定义了一个名为 App 的组件。一个React App项目是由层层嵌套的组件构成的。你可以将这个 App 组件当作是项目的根组件（其实它不是真正的根组件，但你可以这样认为）。
如你所见，这个组件其实是一个 function，我们称之为 function组件 或者 函数式组件。还有一种 class组件，我们在 “章节 1” 中创建的 HelloWorld组件 就是一个 class组件。由于现在 React.js 官网似乎更推崇 function组件，所以本书中我们将更多地使用 function组件。
function组件 的 return 内容就是这个组件最终渲染在页面上的内容。
再次如你所见，在我们这个示例中，App组件 的 return 部分并不是常规的 Javascript 代码，它就是我们刚刚学习的 JSX 代码。所以，这个 App组件 最终渲染到页面上的内容是：
<div>
<h1>Welcome to my React App</h1>
<p>This is an example of using JSX!</p>
</div>
是不是很神奇？是不是很简单？
现在，运行这个项目看看效果。在命令行窗口中进入该项目的根目录，并执行以下命令（如果项目正在运行中，则不需要再次执行此命令，并且，当你修改代码后，浏览器将会自动应用最新的代码）：
npm start
现在，你在浏览器中将会看到如以下的运行效果：
这是一个非常基础的示例，但它为你打开了探索更多React.js和JSX的大门。
提高可读性：JSX中的注释
在编写代码的过程中，良好的注释可以帮助他人（包括你自己）更好地理解代码的含义。在JSX中，我们也可以添加注释来提高代码的可读性。
在JSX中，使用 // 来添加单行注释。例如：
return (
<div>
<h1>Hello, World!</h1>
{
// 这是一个单行注释
}
</div>
);
在JSX中，{} 内的内容是 JavaScript 表达式，注释必须写在 {} 内。
还可以用 /* ,,, */ 添加注释，这种写法可以是单行注释，也可以是多行注释。例如：
return (
<div>
{/* 这是单行注释 */}
{/*
这是一个多行注释，
可以包含多行内容。
*/}
<p>Welcome to my app!</p>
</div>
);
如果你使用 VS Code，可以使用快捷键 Ctrl + / （macOS上使用 Command + /）来添加注释。选中需要注释的内容，然后按下 Ctrl + / 或 Command + / 即可。
好了。在这个章节中我们对JSX的学习就先到这里。当然，有关JSX的知识远不只这些，但我不希望在一个章节中集中讲解太多枯燥乏味的语法。我会将这些知识分散到后面的章节中。
