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

1.目錄結(jié)構(gòu)

- 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.目錄結(jié)構(gòu)解釋
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

用于整合及導出所有組件
優(yōu)點：不需要在src/App.js中把所有組件都引用上，這種方式顯得結(jié)構(gòu)清晰

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'

兩種方式區(qū)別：
方式1：如果組件需要做一些處理的話推薦使用第一種方式
方式2：如果不需要處理組件，且顯得清晰的話推薦第二種
2.5.src/components/TodoList組件結(jié)構(gòu)
2.6.src/components/TodoList/index.js組件

react組件

2.6.1.組件文件名稱命名規(guī)則
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運行