章节 2：轻松入手JSX -《React.js手把手教程：从初学者到实战高手》- 第一部分：React.js基础

《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元素，它表示一个简单的

标签，标签内包含有文本内容 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, Alicep>

示例2：

const getName = function() {
	return 'Alice';
};
const greeting = <p>Hello, {getName()}!</p>;

在这个示例中，当代码运行时，{} 内的 getName() 表示将会被执行 getName() 函数输出的结果所替换，最终将输出以下内容：

<p>Hello, Alicep>

在项目中尝试一下

现在，我们在项目中尝试一下刚刚学到的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 Apph1>
    <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的知识远不只这些，但我不希望在一个章节中集中讲解太多枯燥乏味的语法。我会将这些知识分散到后面的章节中。