（03）React 初识——③ React 中的组件和 JSX 初识 | React 基础理论实操
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
1. 什么是 JSX？
2. 元素和组件有什么区别？
3. 如何在 React 中创建组件？
4. 何时使用类组件和函数组件？
5. createElement 和 cloneElement 有什么区别？
6. 怎样在 React 中写注释？
7. 如何使用 React 和 ES6 导入和导出组件？
[编号：react_03]
1 React 中的组件
在之前的文章《前端工程化：① “前端工程化”初识》中，我们对“前端组件化”有了比较详细的了解。
本篇，我们直接看项目的代码：
点开 index.js ——这是整个程序的“入口文件”，我们看见 import App from "./App" 。在 React 中，这个 App 其实就是一个小的“组件”。
组件 App 来自 App.js 这个文件，点开 App.js 文件，我们详细讲解一下 React 的“组件”是如何被定义的：
import React from 'react';
function App() {
return (
<div>
hello, qdywxs.
</div>
);
}
export default App;
❗️注意：为了更好的学习 React 基础语法，我们将以上代码改写为（这也是之前版本官方的写法，与上边代码效果一样）： 🔗前置知识：《面向对象编程：③ “继承”和“ ES6 模块化”》
// ❗️请按序号依次阅读！
import React, { Component } from "react"; /*
1️⃣首先，引入 Component 基类；
1️⃣-①：注意这里的 ES6 书写方式；
1️⃣-②：至于为什么还要引入一个 React，
我们后文会重点提到，这里先不用关注；
*/
class App extends Component { // 2️⃣通过 ES6 的语法，创建一个 App 继承 Component 这个“基类”；
render() { // 3️⃣给这个“App 组件”添加一个 render 方法；
return ( // 4️⃣这个 render 方法需要返回一个内容。之所以加 () ，是为了写多行“内容”；
/*
5️⃣既然“组件”是页面被拆小的一部分，那么这个“内容”就是这部分需要显示的东西。
即 render 方法返回什么，这个“组件”就展示什么内容！
*/
<div>
hello, qdywxs.
</div>
);
}
}
export default App; /*
6️⃣再通过 ES6 语法，将这个组件“导出”。
然后又在 src 文件夹中的 index.js 文件里将这个组件引入进去；
*/
7️⃣回到上边的 index.js 文件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // ❗️这里将“组件”引入进来。
ReactDOM.render(<App />, document.getElementById('root'));
/*
🏆8️⃣然后通过“第三方模块 ReactDom”的方法 render，
来帮助我们将一个“组件”挂载到一个 DOM 节点上。
就这里的代码而言，我们是将“App 组件”挂载到 id 为 root 的 DOM 节点上。
*/
9️⃣可以验证一下，“App 组件”是否真如我们分析的一样，已经挂载到 id 为 root 的 DOM 节点上了呢？
返回页面，检查元素（确实已挂载）：
🔟但是，我们是怎么想到要把“App 组件”挂载到 id 为 root 的 DOM 节点上的呢，这个“节点”是哪里来的呢？
打开 public 文件夹下的 index.html 文件——上篇文章说过，这个文件是我们项目的首页“HTML 模板”：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>jianshu-test</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <!-- ❗️在这个 HTML 模板里，我们有一个 div 标签，其 id 就为 root。
它就是我们整个网页的“内容”部分。我们把网页所有的内容都放在这个 id 为
root 的 div 标签之中。
而这些内容又是由上边的 React 生成的（如上边生成的 App 组件），
我们又通过 ReactDOM.render() 将这个生成的“组件”挂载到这个“节点”上，
然后页面就展示出了我们的“内容”。
至此，一个完整的逻辑就出来了。
-->
</body>
</html>
再回到上边第 7️⃣步的 index.js 文件中，回答提问：
import React from 'react'; // ❓
// ❓❓❓以下三行代码我们都理解了其用途和整个逻辑，但上边的这一行代码又是什么意思呢，有存在的必要吗？
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
答：
import React from 'react'; 这行代码必须存在，因为我们在挂载“App 组件”时： ReactDOM.render(<App />, document.getElementById('root')); ，我们并没有直接写 App ，而是将其书写为犹如“HTML 标签”一样的形式 <App /> 。
这种语法，我们称之为“JSX 语法”。
而与之对应的，一旦你在代码中使用了“JSX 语法”，那么你就必须在代码对应的文件里引入 React—— import React from 'react'; 以便更顺利地“编译”JSX。
同理，我们返回 App.js 文件，回答提问：
import React, { Component } from "react"; /*
❓❓❓这里引入 React 又是何意呢？
乍一看，仿佛下边的代码并没有用到“JSX 语法”！
*/
class App extends Component {
render() {
return (
<div>
hello, qdywxs.
</div>
);
}
}
export default App;
答：下边的代码也用了“JSX 语法”，所以必须引入 React。
class App extends Component {
render() {
return (
// ❗️❗️❗️render 方法里的这些犹如 HTML 一样的“标签”，也是“JSX 语法”！
<div>
hello, qdywxs.
</div>
);
}
}
2 JSX 语法
如 App.js 中所见，我们使用了“JSX 语法”：
import React, { Component } from "react";
class App extends Component {
render() {
return (
// ❗️❗️❗️以下使用了“JSX 语法”：
<div>
hello, qdywxs.
</div>
);
}
}
export default App;
以前，我们在写这种“元素”的时候（如这里的 <div> 标签），都是在 html 文件中写的。
但现在我们需要在 JS 中写一些“HTML 标签”，在 React 中，我们把需要在 JS 中写的“HTML 标签”称之为“JSX 语法”。
“JSX 语法”中，我们不仅能使用 HTML 中的所有标签，我们还可以用自己定义的标签。
如上边的 index.js 文件中：
ReactDOM.render(<App />, document.getElementById('root'));
我们使用了自己定义的 <App /> 标签（即我们创建的“组件”名）。
“JSX 语法”将伴随我们整个 React 的学习和使用，我个人是很喜欢这种方式的，希望你也能喜欢。
祝好，qdywxs ♥ you！
转载自:https://juejin.cn/post/7241215940909908005