今天目的

由於昨天寫的功能全部寫在一起，這樣不好，我們要優化它，所以把功能拆成一個個組件。

App.js

我們先拆成，只用顯示的組件，如下
App.js

import React from 'react';
import Todolist from './Todolist';
class App extends React.Component {
 
 constructor(props) {
   super(props);
   this.state = {
     data:[
       'apple',
       'banana',
       'orange',
       'purple',
     ], 
   };//內部自定義的變數
  
 }
 
 render() {

   return(
     <div>
        <Todolist item={this.state.data} />
     </div>
   );
 }
}
export default App;

Todolist組件

這個組件只用來顯示，我們利用props把資料傳出去，如下
Todolist.js

import React from 'react';
class Todolist extends React.Component {
  

  render() {
    
    const data = this.props.item.map((item,index) => {
      return <li key={index}>{item}</li>
    })
    return(
      <div>

         <ul>
           {data}

         </ul>
      </div>
    );
  } 

}
export default Todolist;

如圖:

拆解組件好管理

我們把功能慢慢拆成一組件，這樣好管理，我們之後也慢慢把組件拆開來。

這篇比較簡單一些
參考資料:
https://reactjs.org/
自己