react antd confirm content list_教程5——一个 react 组件化项目的目录结构组织方式

咋们会有一个整体的单一应用入口文件，我们一般会叫做：App.js 文件，它是一个组件。

这个组件是可以由自己定义的

为了方便写，咱们一般会安装一些插件

//

例子1--两个文件夹之间是不是搞不清楚谁是干什么的？？这种方式来渲染

不就是-------引用呗

在 App.js 文件下：

import 

在 index.js 文件：

import 

npm start 运行一下咯，结果：app 就出来啦。

接下呢，剩余的组件，咱们就都包含在那个 app 里面就行了。所以在 index.js 里面它才会去做渲染，其他地方其他组件都会成为咱们 app 的子组件。

App.js 文件下：

import 

那咱们想做一些其他的组件，怎么做呢？

这个时候咱们会去新建一个目录，叫做：components。在 components 文件下面，会去建一些其他组件。我们每一个组件它并不是单文件组件，因为它中的class等可能是外部引入，所以每一个组件都会创建一个文件夹。组件的名字叫什么，那文件夹的名字就叫什么。

假如我要创建一个组件，叫：TodoHeader，它下面又创建文件的方式有两种：一种是它就叫TodoHeader.js 或者又可以叫 index.js。个人推荐用 index.js，引入会方便一点。每一个组件也是一个目录，目录的名字就是组件的名字。

TodoHeader 文件夹下的 index.js 文件中写：

import 

如果在 App.js 里面去引入所有的组件文件，是不是过于繁琐了呀，所以我们会在components 文件下面去再新建一个 index.js 文件，专门用来导出所有的组件。

目录结构，就是这个样子的！！注意级别

在 components 文件下的 index.js 文件中：

import 

然后，我们会写一些其他组件，TodoInput 文件、TodoList 文件，再在其下面都创建一个 index.js 文件

那么我们在跟组件同级的 index.js 文件中，就可以这样引入导出：

import 

那么我们在 App.js 文件中就可以这样引入

import

注意：这样子的导入方式，目录的结构组织会更合理。

这样我们就可以直接调用新建的<TodoHeader /><TodoInput />组件了

import 

是不是很方便了

这里的运行结果：

就是这样的

完整的目录结构（项目结构）应该是这个样子的：

当然你可能会添加其他组件，不过大概结构是这样的

例子2--组件里面还有组件的情况

组件它可以分得很细

比如，我们在 TodoList 的组件中，想直接用一个 TodoItem 组件，怎么做？

TodoItem 组件在外面不会用的，它只在 TodoList 的组件中用。所以我们直接在 TodoList 的组件中创建一个 TodoItem.js 的文件就好了。

TodoItem.js 文件下：

import 

然后在 TodoList 文件下的 index.js 文件中引入 TodoItem.js 文件就可以了

import 

注意：组件里面有组件的情况，我们可以把子组件（私有组件）直接写在父组件里面，然后引入即可。

在我们写了新的组件之后，一定记得要去跟组件同级的 index.js 文件中做补充，引入导出你新写的组件！！

import 

同样，我们也可以去 App.js 里面引用 TodoList 组件

import 

最终结果：

结果是这样的，例子要一步一步跟着做，不然哪里出错了也不知道

例子3--补充说一些知识点

首先声明这是错误写法

import 

<div className="abc"> 这样是没有DOM节点的

那有些人会这么写：

import 

报错是因为，return 的东西必须只有一个根元素。

react 里面本身提供了一个组件，用来展示空标签的，叫：Fragment。

（下面2种都是正确写法）

import 

写法一：

import React,{Component,Fragment }from'react'

<Fragment> 组件们</Fragment>

写法二：

import React,{Component }from'react'

<> 组件们 </>

import 

例子4--引入导出的两种写法

一种：需要统一再处理组件的情况，就必须用这种方式

import 

另一种：不需要统一再处理组件的情况下，推荐这种方式，简单

export 

不做推荐，看个人开发情况

ok，我们完成例子1、2、3后，目录结构就算建好了；我们就可以开始添加组件的细节了，就可以开发一下东西了

比如说，我们可以在 TodoInput 组件下的 index.js 中写：

import 

看一下结果：

最后的结果是这样的，希望你同我一样是没有 ERR 的

这节就讲完啦，下个教程见啦 over