组件化拆分（一）——react中进行封装组件 & 入口组件 & Header 标题组件 & List内容列表组件 & Footer底部筛选菜单组件

组件化拆分——react中进行封装组件 & 入口组件 & Header 标题组件 & List内容列表组件 & Footer底部筛选菜单组件

• 把整个复杂的页面拆解为粒度更细的小组件
  • TodoApp 案例入口组件
  • Header 标题组件
  • List 列表组件
  • Footer 筛选菜单组件

<section className='todoapp'>
  <Header/>
  <List/>
  <Footer/>
</section>

实例

1、src/App.js

import React from 'react';
import './App.css';
import TodoApp from './views/TodoApp.js'

function App() {
  return (
    <div>
      <TodoApp/>
    </div>
  );
}

export default App;

2、src/views/TodoApp.js

3、src/views/header

4\src/views/Footer.js

5、src/views/List.js

6、组件拆分效果