建立新的todo資料夾

npm init react-app todolist

用cd方式轉到todolist資料夾下後，執行專案

npm start

App.js的初始畫面

把app.js裡面不需要的資料先清理一下

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
     Hello React
    </div>
  );
}

export default App;

建立Header

在src資料夾中建立一個Header.js，給todolist的頁面一個大標題

import React from 'react';

function Header(){
    return (
        <header>
            <h1>My First To Do List</h1>
        </header>
    );
}

export default Header;

做一個簡單的json資料

在src資料夾中建立data.js，先預設幾個代辦事項。

[
    {
        "id": 1,
        "task": "todo1",
        "complete": true
    },
    {
        "id": 2,
        "task": "todo2",
        "complete": true
    },
    {
        "id": 3,
        "task": "todo3",
        "complete": false
    }
]

選染出資料在To do list的初始畫面

在App.js中引入useState以及剛剛所做的元件與資料，並建立一個可以操控toDoList的useState

import React, { useState } from 'react';
import data from "./data.json";
//components
import Header from './Header';

import './App.css';

function App() {
  const [ toDoList, setToDoList ] = useState(data);
  return (
    <>
      <Header/>
    </>
  );
}

export default App;

接著，要做的就是做出toDoList，toDoList本身可以拆成兩個元件，一個是包裹在外層的ToDoList.js，以及內容清單的ToDo.js。

1. ToDoList.js

   ToDoList可以props資料到內層的ToDo清單，用map的方式把每一條列出

   import React from 'react'
   import ToDo from './ToDo'
   
   function ToDoList({toDoList}){
       return(
           <div>
              {toDoList.map(todo=>{
               return(
                   <ToDo todo={todo}/>
               )
              })}
           </div>
       )
   }
   
   export default ToDoList;
   

2. ToDo.js

   ToDo內容清單最主要的功能就是顯示data.js中的每一項task內容，從外層props進入的todo，在內層中渲染。

   import React from 'react'
   
   function ToDo({todo}){
       return(
           <div id={todo.id}>
              {todo.task}
           </div>
       )
   }
   
   export default ToDo;
   

最後，整合以上內容，把data透過useState的資料傳toDoList.js中

import React, { useState } from 'react';
import data from "./data.json";
//components
import Header from './Header';
import ToDoList from './ToDoList';

import './App.css';

function App() {
  const [ toDoList, setToDoList ] = useState(data);
  return (
    <>
      <Header/>
      <ToDoList toDoList={toDoList}/>
    </>
  );
}

export default App;

拆成元件後的todolist可以看到以下畫面，明天要開始加上功能!!