Header元件

第一個元件先從 Header.js 開始
Header要負責

• 顯示標題
• 待辦事項 和 完成事項 NavLink連結顯示
• Redirect重新導向首頁為待辦事項

記得安裝react-router-dom，並且要在index.js用標籤把根元件包住，
才能用router唷！

//安裝router套件
yarn add react-router-dom

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(

//包住根元件讓整個專案元件可以使用router
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

reportWebVitals();

Header的程式碼

//components/Header.js

import React from 'react';
import { NavLink, Redirect } from 'react-router-dom';

function Header() {

    return (
        <div className="header flex-between">
            <h1>TodoList</h1>
            <ul className="flex nav gap">

		//設置NavLink連結切換路由
                <NavLink to="/undo" >待辦項目</NavLink>
                <NavLink to="/done" >完成項目</NavLink>

		//除了NavLink連結外，其他url都導向路徑/undo(待辦項目)
                <Redirect to="/undo" />
            </ul>
        </div>
    );
}

export default Header;

App.scss檔 - Header的scss樣式

//Header樣式
.header{
    margin-inline:auto ;
    padding-inline:20px ;
    margin-bottom: 30px;
    align-items: center;
    background-color: rgb(113, 95, 78);
    width: 700px;
    color: #fff;

   
    
    li{
        list-style: none;
        width: max-content;
        font-weight:bolder;
        cursor: pointer;
    }
    .nav{
        a{
            color: #fff;
            text-decoration: none;
            font-weight: normal;
        }
        .active{
            text-decoration:underline;
            font-weight: bolder;
        }
    }

}

下面是之後會用到的共用樣式scss，可以寫在App.js的最上面

//App.scss

//共用樣式
.flex{
    display: flex;
}

.flex-between{
    display: flex;
    justify-content:space-between;
}

.to-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gap-10{
    gap:10px;
    justify-content: space-around;
}

 .gap{
        gap:20px;
        justify-content: space-around;
    }
//Header樣式
//....

Button元件-重複利用的按鈕

將Button設為一個元件，根據讓Button根據props可以改變樣式跟用途

Button.js

import React from 'react';

function Button(props) {

//根據傳入props的type來判斷按鈕顏色
  const typeStyle = function () {
    if (!props.type) return 'rgb(113, 95, 78)'
    if (props.type === "detele") return 'red'
  }

  const style = {
    backgroundColor: typeStyle()
  }

  return (
    <div className="button">
//props的content為按鈕上想顯示的字
      <button style={style} >{props.content}</button>
    </div>
  );
}

export default Button;

Button元件的scss樣式

//App.scss

//共用樣式...

//Header樣式...

//Button 樣式
.button{
  button{
      width: max-content;
      padding-inline:20px ;
      padding-block:10px ;
      border-radius:5px;
      border: none;
      cursor: pointer;
      background-color: rgb(113, 95, 78);
      color: #fff;
      &:hover{
          opacity: 0.8;
      }
  }
}

List元件-事項顯示區

這個元件會根據路由useLocation()判斷pathname是'/undo'還是'/done'
分別顯示 待辦事項 和 完成事項 兩種不同的內容，
在List.js中會增加事項的Item元件，並且使用迴圈的方式將每條新增事項渲染出來。

import React from 'react';
import { useLocation } from 'react-router-dom';
import Button from './Button';


function List(prop) {

	
/*下篇會加入迴圈渲然item的函式 */


    return (
        <div className="content-edit wrap">
            <div className="title">
               //預計放入顯示此路由名稱小標題和目前項目數量
            </div>
            <div className="item">
              //預計放入迴圈渲染的item元件，顯示項目
            </div>

        </div>
    );
}

export default List;

List元件的scss樣式

//App.scss

//共用樣式...

//Header樣式...

//Button 樣式...

//list 樣式
.content-edit{
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.item-wrap{
    p{
        width: 600px;
    }
}

建立好後，我們便可以在App.js中引用使用它們，下一篇來看看在App上排好後的UI視覺效果。