iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

看初心者怎麼學React系列 第 26

Day26 React-實作todoList(一)前置

來做個todoList來驗收這近一個月的React學習成效吧!

在製作之前,我先用Html設計想要的樣式,把樣式轉移到React專案上,做出有:
新增事項完成待辦事項刪除事項待辦完成頁面切換
簡易功能的TodoList,如下


建立專案

使用終端機切換到桌面後,建立todoList的 React 專案資料夾 - todolist-react

npx create-react-app todolist-react

安裝Sass

因為樣式撰寫想使用Scss的巢狀寫法,
在建立好專案後,用vsCode打開專案用內建終端機安裝sass

yarn add node-sass@npm:dart-sass

這裡我實際安裝的是dart-sass,因為node-sass已不被官方推薦使用,有兩個原因:
1.下載速度慢有 2.本機編譯速度很慢
我們使用上面方法將node-sass模組資料夾的內容,另外替換安裝dart-sass

安裝完後記得把所有css副檔名改成scss

調整專案架構

將畫面元件先分出來

分為App.js、Header.js、List.js三個檔,分別處理不同的畫面區塊。
https://ithelp.ithome.com.tw/upload/images/20211011/201403032yI2vldyQ5.png

App.js作為根元件放置在最上層
我們將預設的App.js用不到程式碼先刪除清空

//App.js

import './App.scss';

function App() {
  return (
    <div >

    </div>
  );
}

export default App;

設立一個components資料夾放要引入App.js的Header.js和List.js元件
整個專案架構最後如下
https://ithelp.ithome.com.tw/upload/images/20211011/20140303BTOa2aogPL.png

因為是比較小的專案,元件結構不複雜,所以我統一把樣式寫在App.scss中,
如果想將樣式分類,可將樣式用Styled-Components獨立,

或將元件資料夾細分新增scss檔:
https://ithelp.ithome.com.tw/upload/images/20211011/20140303fyWGCpcZjD.png


上一篇
Day25 React useReducer - 另種管理state的方法
下一篇
Day27 React-實作todoList(二)建立子元件
系列文
看初心者怎麼學React30

尚未有邦友留言

立即登入留言