<react> 组件的详细介绍：

思维导图：

代码介绍：

TodoList:(组件)

 1 import React, { Component } from ‘react‘
 2 import Style from  ‘./style.css‘
 3
 4 export default class index extends Component {
 5     render() {
 6         return (
 7             <div>
 8                 <h2>TodoList</h2>
 9         m
10             </div>
11         )
12     }
13 }

Todoinput ：（组件）

 1 import React, { Component } from ‘react‘
 2 import  Style  from ‘./style.css‘
 3
 4 export default class index extends Component {
 5     render() {
 6         return (
 7             <div>
 8                 <h2>Todoinput</h2>
 9
10             </div>
11         )
12     }
13 }

Header:(组件)

 1 import React, { Component } from ‘react‘
 2 import Title from ‘./Title‘
 3 import Style from ‘./style.css‘
 4 export default class index extends Component {
 5     render() {
 6         return (
 7             <div>
 8                 <h2>Header</h2>
 9                  <Title/>
10             </div>
11         )
12     }
13 }

Title:(组件)

 1 import React, { Component } from ‘react‘
 2
 3 export default class Title extends Component {
 4     render() {
 5         return (
 6             <div>
 7                 <h3>Title</h3>
 8          </div>
 9         )
10     }
11 }

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

 1 // import TodoList from ‘./TodoList‘
 2 // import Header from ‘./Header‘
 3 // import Todoinput from ‘./Todoinput
 4 // export{
 5 //     TodoList,
 6 //     Header,
 7 //    Todoinput
 8 // }
 9 -------------------------------------------------
10 export {default as TodoList} from ‘./TodoList‘
11 export {default as Header} from ‘./Header‘
12 export {default as Todoinput} from ‘./Todoinput‘
13 -------------------------------------------------------
14 两种方法都可以
15 （把Component 里面的组件全部抛出去）

App.js:（组件）

 1 /* eslint-disable no-unused-vars */
 2 import React, { Component,Fragment } from ‘react‘
 3 import{
 4   TodoList,
 5   Header,
 6  7 }from ‘./Component‘
 8 import Title from ‘./Component/Header/Title‘;
 9
10 export default class App extends Component {
11   render() {
12     return (
13         <Fragment >
14         <TodoList/>
15         <Header/>
16         <Todoinput/>
17         </Fragment >
18         // {/* // <> */}
19         // {/* // </> */}
20     )
21   }
22 }

index.js:（组件）

1 import React from "react";
2 import ReactDOM from "react-dom";
3 import App from ‘./App‘
4
5 ReactDOM.render(<App />, document.getElementById("root"));

原文地址：https://www.cnblogs.com/yjzs/p/12298835.html