<react> 组件的详细介绍：

<react> 组件的详细介绍：

思维导图：

代码介绍：

TodoList:(组件)

 import React, { Component } from 'react'
 import Style from  './style.css'

 export default class index extends Component {
     render() {
         return (
             <div>
                 <h2>TodoList</h2>
         m
             </div>
         )
     }
 }

Todoinput ：（组件）

 import React, { Component } from 'react'
 import  Style  from './style.css'

 export default class index extends Component {
     render() {
         return (
             <div>
                 <h2>Todoinput</h2>

             </div>
         )
     }
 }

Header:(组件)

 import React, { Component } from 'react'
 import Title from './Title'
 import Style from './style.css'
 export default class index extends Component {
     render() {
         return (
             <div>
                 <h2>Header</h2>
                  <Title/>
             </div>
         )
     }
 }

Title:(组件)

 import React, { Component } from 'react'

 export default class Title extends Component {
     render() {
         return (
             <div>
                 <h3>Title</h3>
          </div>
         )
     }
 }

Component 里面的index.js ：（抛出去）

 // import TodoList from './TodoList'
 // import Header from './Header'
 // import Todoinput from './Todoinput
 // export{
 //     TodoList,
 //     Header,
 //    Todoinput
 // }
 -------------------------------------------------
 export {default as TodoList} from './TodoList'
 export {default as Header} from './Header'
 export {default as Todoinput} from './Todoinput'
 -------------------------------------------------------
 两种方法都可以
 （把Component 里面的组件全部抛出去）

App.js:（组件）

 /* eslint-disable no-unused-vars */
 import React, { Component,Fragment } from 'react'
 import{
   TodoList,
   Header,
  }from './Component'
 import Title from './Component/Header/Title';

 export default class App extends Component {
   render() {
     return (
         <Fragment >
         <TodoList/>
         <Header/>
         <Todoinput/>
         </Fragment >
         // {/* // <> */}
         // {/* // </> */}
     )
   }
 }

index.js:（组件）

 import React from "react";
 import ReactDOM from "react-dom";
 import App from './App'

 ReactDOM.render(<App />, document.getElementById("root"));