React 导入语句是如何工作的？答案

【问题标题】：How do React import statements work?React 导入语句是如何工作的？
【发布时间】：2018-09-08 14:35:02
【问题描述】：

在使用 React 进行编程时，我们通常从以下内容开始：

import React from 'react';
import ReactDOM from 'react-dom'

然后我们以某种方式访问 React 功能。这实际上是如何工作的？ react 和 react-dom 模块在哪里，编译器如何知道如何找到它们？

【问题讨论】：

与webpack相关stackoverflow.com/questions/37875592/…
它是 Babel JSX 转译的一部分。 React Babel 插件会转换代码，但如果没有导入，将找不到 React 类，这就是您需要添加导入的原因。

标签： javascript reactjs

【解决方案1】：

这是一篇关于understanding es6 modules.的精彩文章

基础知识

在 ES6 中，每个模块都定义在自己的文件中。模块中定义的函数或变量在外部不可见，除非您明确导出它们。这意味着您可以在模块中编写代码，并且只导出那些应该由应用程序的其他部分访问的值。

ES6 模块本质上是声明性的。要从模块中导出某些变量，您只需使用关键字 export。同样，要在不同的模块中使用导出的变量，您可以使用 import。

在您的示例中，当您通过npm 或yarn 安装它们时，React 和ReactDOM 将添加到您的项目/node_modules 文件夹中。将它们安装到您的项目后，您可以将它们 import 到您的代码中并访问它们导出的函数。

【讨论】：