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三个档，分别处理不同的画面区块。

App.js作为根元件放置在最上层
我们将预设的App.js用不到程序码先删除清空

//App.js

import './App.scss';

function App() {
  return (
    <div >

    </div>
  );
}

export default App;

设立一个components资料夹放要引入App.js的Header.js和List.js元件
整个专案架构最後如下

因为是比较小的专案，元件结构不复杂，所以我统一把样式写在App.scss中，
如果想将样式分类，可将样式用Styled-Components独立，

或将元件资料夹细分新增scss档：