pycharm项目目录结构_教程5——一个 react 组件化项目的目录结构组织方式
咋们会有一个整体的单一应用入口文件，我们一般会叫做：App.js 文件，它是一个组件。这个组件是可以由自己定义的为了方便写，咱们一般会安装一些插件//在 App.js 文件里面，咱们是不是每次都要引入一些文件，一直写重复的太麻烦了//这个时候用插件就方便多了// rcc 回车:自动就帮我们写好了import React, { Component } from 'react'export...
咋们会有一个整体的单一应用入口文件，我们一般会叫做：App.js 文件，它是一个组件。
这个组件是可以由自己定义的
为了方便写，咱们一般会安装一些插件
//在 App.js 文件里面，咱们是不是每次都要引入一些文件，一直写重复的太麻烦了
//这个时候用插件就方便多了
// rcc 回车:自动就帮我们写好了
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
</div>
)
}
}
// rfc 回车：函数式组件就自动生成了
import React from 'react'
export default function App() {
return (
<div>
</div>
)
}
例子1--两个文件夹之间是不是搞不清楚谁是干什么的？？这种方式来渲染
不就是-------引用呗
在 App.js 文件下：
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
app
</div>
)
}
}
在 index.js 文件：
import React from 'react'
import { render } from 'react-dom'
import App from './App'
//这里js可以不写，import App from './App.js'
render(
<App />,
document.getElementById('root')
)
npm start 运行一下咯，结果：app 就出来啦。
接下呢，剩余的组件，咱们就都包含在那个 app 里面就行了。所以在 index.js 里面它才会去做渲染，其他地方其他组件都会成为咱们 app 的子组件。
App.js 文件下：
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
app
</div>
)
}
}那咱们想做一些其他的组件，怎么做呢？
这个时候咱们会去新建一个目录，叫做：components。在 components 文件下面，会去建一些其他组件。我们每一个组件它并不是单文件组件，因为它中的class等可能是外部引入，所以每一个组件都会创建一个文件夹。组件的名字叫什么，那文件夹的名字就叫什么。
假如我要创建一个组件，叫：TodoHeader，它下面又创建文件的方式有两种：一种是它就叫TodoHeader.js 或者又可以叫 index.js。个人推荐用 index.js，引入会方便一点。每一个组件也是一个目录，目录的名字就是组件的名字。
TodoHeader 文件夹下的 index.js 文件中写：
import React from 'react'
export default function TodoHeader() {
return (
<h1>
待办事项列表
</h1>
)
}
如果在 App.js 里面去引入所有的组件文件，是不是过于繁琐了呀，所以我们会在components 文件下面去再新建一个 index.js 文件，专门用来导出所有的组件。
在 components 文件下的 index.js 文件中：
import TodoHeader from './TodoHeader'
export {
TodoHeader
}然后，我们会写一些其他组件，TodoInput 文件、TodoList 文件，再在其下面都创建一个 index.js 文件
那么我们在跟组件同级的 index.js 文件中，就可以这样引入导出：
import TodoHeader from './TodoHeader' //引入
import TodoInput from './TodoInput'
import TodoList from './TodoList'
export { //导出
TodoHeader,
TodoInput,
TodoList
}那么我们在 App.js 文件中就可以这样引入
import{
TodoHeader,
TodoInput,
TodoList
} from './components'
//两种写法，看你觉得自己喜欢哪种：import{ TodoHeader, TodoInput, TodoList } from './components'注意：这样子的导入方式，目录的结构组织会更合理。
这样我们就可以直接调用新建的<TodoHeader /><TodoInput />组件了
import React, { Component } from 'react'
import{
TodoHeader,
TodoInput,
TodoList
} from './components'
export default class App extends Component {
render() {
return (
<div>
<TodoHeader />
<TodoInput />
<TodoList />
</div>
)
}
}是不是很方便了
这里的运行结果：
完整的目录结构（项目结构）应该是这个样子的：
例子2--组件里面还有组件的情况
组件它可以分得很细
比如，我们在 TodoList 的组件中，想直接用一个 TodoItem 组件，怎么做？
TodoItem 组件在外面不会用的，它只在 TodoList 的组件中用。所以我们直接在 TodoList 的组件中创建一个 TodoItem.js 的文件就好了。
TodoItem.js 文件下：
import React from 'react'
export default function TodoItem() {
return (
<div>
TodoItem
</div>
)
}然后在 TodoList 文件下的 index.js 文件中引入 TodoItem.js 文件就可以了
import React, { Component } from 'react'
import TodoItem from './TodoItem'
export default class TodoList extends Component {
render() {
return (
<ul>
<TodoItem />
</ul>
)
}
}注意：组件里面有组件的情况，我们可以把子组件（私有组件）直接写在父组件里面，然后引入即可。
在我们写了新的组件之后，一定记得要去跟组件同级的 index.js 文件中做补充，引入导出你新写的组件！！
import TodoHeader from './TodoHeader'
import TodoInput from './TodoInput'
import TodoList from './TodoList'
export {
TodoHeader,
TodoInput,
TodoList
}同样，我们也可以去 App.js 里面引用 TodoList 组件
import React, { Component } from 'react'
import{
TodoHeader,
TodoInput,
TodoList
} from './components'
export default class App extends Component {
render() {
return (
<div>
<TodoHeader />
<TodoInput />
<TodoList />
</div>
)
}
}最终结果：
例子3--补充说一些知识点
首先声明这是错误写法
import React, { Component } from 'react'
import{
TodoHeader,
TodoInput,
TodoList
} from './components'
export default class App extends Component {
render() {
return (
<div className="abc"> //这样是没有DOM节点的
<TodoHeader />
<TodoInput />
<TodoList />
</div>
)
}
}<div className="abc"> 这样是没有DOM节点的
那有些人会这么写：
import React, { Component } from 'react'
import{
TodoHeader,
TodoInput,
TodoList
} from './components'
export default class App extends Component {
render() {
return (
<TodoHeader /> //这样是会报错的
<TodoInput />
<TodoList />
)
}
}报错是因为，return 的东西必须只有一个根元素。
react 里面本身提供了一个组件，用来展示空标签的，叫：Fragment。
（下面2种都是正确写法）
import React, { Component,Fragment } from 'react'
import{
TodoHeader,
TodoInput,
TodoList
} from './components'
export default class App extends Component {
render() {
return (
<Fragment> //这样是没有DOM节点的
<TodoHeader />
<TodoInput />
<TodoList />
</Fragment>
)
}
}写法一：
import React,{Component,Fragment }from'react'
<Fragment> 组件们</Fragment>
写法二：
import React,{Component }from'react'
<> 组件们 </>
import React, { Component} from 'react'
import{
TodoHeader,
TodoInput,
TodoList
} from './components'
export default class App extends Component {
render() {
return (
<>
<TodoHeader />
<TodoInput />
<TodoList />
</>
)
}
}例子4--引入导出的两种写法
一种：需要统一再处理组件的情况，就必须用这种方式
import TodoHeader from './TodoHeader'
import TodoInput from './TodoInput'
import TodoList from './TodoList'
export {
TodoHeader,
TodoInput,
TodoList
}另一种：不需要统一再处理组件的情况下，推荐这种方式，简单
export { default as TodoHeader } from './TodoHeader'
export { default as TodoInput } from './TodoInput'
export { default as TodoList } from './TodoList'不做推荐，看个人开发情况
ok，我们完成例子1、2、3后，目录结构就算建好了；我们就可以开始添加组件的细节了，就可以开发一下东西了
比如说，我们可以在 TodoInput 组件下的 index.js 中写：
import React, { Component } from 'react'
export default class TodoInput extends Component {
render() {
return (
<div>
<input type="text" /><button>添加</button>
</div>
)
}
}看一下结果：
这节就讲完啦，下个教程见啦 over
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)