4.React组件化目录结构组织方式

教程1-14完整项目地址 https://github.com/x1141300029/react-Todos.git

1.目录结构

- src
    - component
        - TodoHeader #组件
            - index.js
            - index.css/sass/less
        - TodoInput #组件
            - index.js
            - index.css/sass/less
        - TodoList #组件
            - index.js
            - index.css/sass/less
            - TodoItem #子组件
                - index.js
                - index.css/sass/less
        - index.js #用于导出所有组件
    - App.js #主页面
    - index.js #react主入口

2.目录结构解释
2.1.src/index.js主入口

把所有的组件及引用关系组件添加到DOM中

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'

ReactDOM.render(<App title={"新标题"}/>,document.getElementById("root"));

2.2.src/App.js主页面

引用所有组件及页面排版

import React, {Component, Fragment} from 'react';
import {
    TodoHeader,
    TodoInput,
    TodoList
} from './component'

class App extends Component {
    render() {
        return (
            //Fragment表示空标签
            //如果不需要的话可以使用Fragment进行替代
            //如果需要添加class等信息还是需要用div
            //或空标签  <> </>  这样也不会报错
            <Fragment>
                <TodoHeader/>
                <TodoInput/>
                <TodoList/>
            </Fragment>
        );
    }
}

export default App;

2.3.src/components组件目录

所有组件都放在此目录下

2.4.src/components/index.js

用于整合及导出所有组件
优点：不需要在src/App.js中把所有组件都引用上，这种方式显得结构清晰

2.4.1.导出组件第一种方式

import TodoHeader from './TodoHeader'
import TodoInput from './TodoInput'
import TodoList from './TodoList'
export {
    TodoHeader,
    TodoInput,
    TodoList
}

2.4.2.导出组件第二种方式

export {default as TodoHeader} from './TodoHeader'
export {default as TodoInput} from './TodoInput'
export {default as TodoList} from './TodoList'

两种方式区别：
方式1：如果组件需要做一些处理的话推荐使用第一种方式
方式2：如果不需要处理组件，且显得清晰的话推荐第二种
2.5.src/components/TodoList组件结构
2.6.src/components/TodoList/index.js组件

react组件

2.6.1.组件文件名称命名规则
2.6.1.1.使用index.js #推荐
2.6.1.2.使用父文件名命名TodoList.js

//在index.js中引用 例如：
//2.6.1.1:
import TodoList from './TodoList' #推荐使用
//2.6.1.2:
import TodoList from './TodoList/TodoList'

2.7.src/components/TodoList/TodoItem子组件目录
3.组件代码
3.1.src/components/TodoHeader/index.js

import React, {Component} from 'react';

export default function TodoHeader(){
    return (
        <h1>待办事项</h1>
    )
};

3.2.src/components/TodoInput/index.js

import React, {Component} from 'react';

class TodoInput extends Component {
    render() {
        return (
            <div>
                组件1
            </div>
        );
    }
}

export default TodoInput;

3.3.src/components/TodoList/index.js

import React, {Component} from 'react';
import TodoItem from './TodoItem'

class TodoList extends Component {
    render() {
        return (
            <ul>
                <TodoItem/>
            </ul>
        );
    }
}

export default TodoList;

3.4.src/components/TodoList/TodoItem/index.js

import React, {Component} from 'react';

class TodoItem extends Component {
    render() {
        return (
            <li>
                子组件
            </li>
        );
    }
}

export default TodoItem;

yarn start运行