在本文中，我们将讨论组件文件和React项目的结构。
→
第1部分：课程概述，React，ReactDOM和JSX普及的原因→
第2部分：功能组件→
第3部分：组件文件，项目结构→
第4部分：父级和子级组件→
第5部分：TODO应用程序的开始工作，样式设计的基础→
第6部分：关于本课程的一些功能，JSX和JavaScript→
第7部分：内联样式→
第8部分：继续研究TODO应用程序，熟悉组件的属性→
第9部分：组件属性→
第10部分：使用组件特性和样式的研讨会→
第11部分：动态标记生成和映射数组方法→
第12部分：研讨会，TODO应用程序的第三阶段工作→
第13部分：基于类的组件→
第14部分：关于基于类的组件，组件状态的研讨会→
第15部分：组件健康研讨会→
第16部分：TODO应用程序的第四阶段工作，事件处理→
第17部分：TODO应用程序的第五阶段工作，修改组件的状态→
第18部分：TODO应用程序的第六阶段工作→
第19部分：组件生命周期方法第20部分：条件渲染的第一课→
第21部分：关于条件渲染的第二课和研讨会→
第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据→
第23部分：关于使用表格的第一课→
第24部分：第二形式课→
第25部分：使用表单的研讨会→
第26部分：应用程序体系结构，容器/组件模式→
第27部分：课程项目第8课。组件文件，React项目的结构
→
原创组件文件
如果我们假设您使用
create-react-app的标准项目执行了上一堂实践课中的任务，那么现在它使用公用文件夹中的
index.html文件（内容适合我们）和
src文件夹中的
index.js文件，我们在其中编写代码。 特别是，
index.js现在看起来像这样：
import React from "react" import ReactDOM from "react-dom" function MyInfo() { return ( <div> <h1>Bob Ziroll</h1> <p>This is a paragraph about me...</p> <ul> <li>Thailand</li> <li>Japan</li> <li>Nordic Countries</li> </ul> </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") )
请注意，
MyInfo功能组件的代码包含在此文件中。 您记得，React允许您创建许多组件，这是它的优势之一。 显然，尽管在技术上可行，但将大量组件的代码放在一个文件中实际上意味着极大的不便。 因此，组件的代码（即使是很小的组件）也通常安排在单独的文件中。 开发React应用程序时，建议遵循此方法。
组件文件的名称与这些文件存储其代码的组件的名称相对应。 如果是
create-react-app ，请将它们放置在
index.js文件所在的
src文件夹中。 通过这种方法，带有
MyInfo组件的文件将被命名为
MyInfo.js 。
创建一个
MyInfo.js文件，并将
MyInfo组件代码传输到其中，将其从
index.js删除。
在这个阶段，
index.js将如下所示：
import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <MyInfo />, document.getElementById("root") )
MyInfo.js代码将如下所示：
function MyInfo() { return ( <div> <h1>Bob Ziroll</h1> <p>This is a paragraph about me...</p> <ul> <li>Thailand</li> <li>Japan</li> <li>Nordic Countries</li> </ul> </div> ) }
这就是VSCode中的外观。
将组件代码传输到新文件我们从
index.js转移了组件代码，但现在的结构仍然无法使用。
首先，请记住
index.js import React from "react"命令
import React from "react"目的，即使我们不在这里直接访问
React 。 原因是没有
React导入，该库的机制（特别是JSX）将无法工作。
ReactDOM.render()此导入命令，在以前的类中，我们能够将JSX代码传递给
ReactDOM.render()方法，并将基于其创建的HTML标记输出到页面。 所有这些意味着在
MyInfo.js文件中，我们还需要导入React。 这是组件文件的常见做法。
其次，我们需要确保
MyInfo.js文件中的
MyInfo函数可以在其他应用程序文件中使用。 为此，需要将其导出。 这里使用ES6标准的功能。 结果，更新后的
MyInfo.js代码采用以下形式：
import React from "react" function MyInfo() { return ( <div> <h1>Bob Ziroll</h1> <p>This is a paragraph about me...</p> <ul> <li>Thailand</li> <li>Japan</li> <li>Nordic Countries</li> </ul> </div> ) } export default MyInfo
现在让我们处理
index.js文件。 即，我们需要
MyInfo组件在此文件中可用。 您可以
index.js导入使其在
index.js可用。
如果我尝试根据
index.js的
react和
react-dom导入
react编写组件导入命令怎么办？ 例如，将以下导入命令添加到文件中：
import MyInfo from "MyInfo.js"
系统特别看到了这样的命令，即依赖于该命令不包含有关文件相对路径的信息这一事实，它将寻找项目依赖项-具有调用此命令时指定名称的模块（以下是在使用
create-react-app创建的项目中安装依赖项的方法-
create-react-app ；然后可以像导入React库一样将这些依赖项导入到React项目中。 她将找不到这样的模块，因此，导入命令将不起作用。 因此，必须使用文件路径重写文件导入命令。 在这种情况下，我们对当前目录（
./ ）的指示感到满意，并且import命令将采用以下形式：
import MyInfo from "./MyInfo.js"
另外，如果我们讨论
import命令，则必须考虑暗示它意味着JavaScript文件是在其帮助下
import ，这一点很重要。 也就是说，
.js扩展名可以完全删除，并且具有以下所示格式的
import命令将不会失去其功能。
import MyInfo from "./MyInfo"
通常，这些JS文件导入命令以这种方式编写。
这是完整的
index.js文件
index.js 。
import React from "react" import ReactDOM from "react-dom" import MyInfo from "./MyInfo" ReactDOM.render( <MyInfo />, document.getElementById("root") )
▍项目结构
随着React项目的规模和复杂性的增长，保持其结构良好状态非常重要。 在我们的案例中，尽管我们的项目现在很小，但是可以在
src文件夹中创建
components文件夹，该文件夹旨在存储带有组件代码的文件。
创建一个这样的文件夹并将
MyInfo.js文件移动到其中。 之后，您将需要在
index.js编辑此文件的import命令。
即，现在
MyInfo.js的路径指示此文件与
index.js位于同一位置，但实际上，此文件现在位于与
index.js相同文件夹中的
components文件夹中。 结果，
index.js的相对路径将如下所示：
./components/MyInfo 。 这是更新的
index.js代码：
import React from "react" import ReactDOM from "react-dom" import MyInfo from "./components/MyInfo" ReactDOM.render( <MyInfo />, document.getElementById("root") )
这就是VSCode中的外观。
用于存储组件并将组件从该文件夹导入VSCode的文件夹实际上，一个旨在存放所有组件代码的
components文件夹是一个极其简化的项目结构的示例。 在实际项目中，为了确保使用大量实体的便利性，使用了更为复杂的文件夹结构。 这些结构的确切含义将取决于项目的需求以及程序员的个人喜好。
建议尝试使用您今天学到的所有内容。 例如，您可以尝试将
MyInfo.js文件移动到某个文件夹中，然后查看
MyInfo.js什么
MyInfo.js ，可以尝试重命名该文件，更改其中的一些代码。 当在这样的实验过程中，项目的正确运行将受到干扰时-了解问题并使项目恢复工作状态将非常有用。
总结
在本课程中，我们讨论了将组件代码格式化为单独的文件，使用ES6导出和导入代码以及React项目的结构。 下次，我们将继续熟悉组件的功能。
亲爱的读者们！ 我们要求经验丰富的React开发人员与新来者分享有关项目结构组织的想法。