Day 21-制作购物车之前端架构1

进入前端啦～
因为原本比较着重於购物车系统的部分，所以前端可能做的比较不好，还请见谅
以下内容有参考教学影片，底下有附网址。
(内容包括我的不专业解说分析及在实作过程中遇到的困难与解决)
go go~

首先删除及清除一下frontend资料夹里不会用到的档案，这样才不会混淆
先把forntend资料夹里src资料夹中，将不会用到的档案删除

图片中app.test.js、logo.svg及setupTest.js都能删除
再来将档案中预设的程序码清除
例如将index.css内全部程序码清除、在App.js中清除import logo from './logo.svg'及底下一大段header的部分、将App.css内程序码全清除等
接下来在App.js档的div中输入Hello World

开启终端机，切换到frontend，输入npm run dev会出现

以上都完成後，现在就开始设定架构啦
先在App.js打出大概要的结构

导览列=>Navbar(电脑版需要)、侧栏位=>SideDrawer(手机版需要)、主画面=>HomeScreen、物品页=>ProductScreen
购物车页面=>CartScreen
首先要来建立Navbar、SideDrawer、Backdrop这三个components
在frontend的src中，新增components资料夹
并在里面新增Navbar、SideDrawer、Backdrop这三个的js及css档
打开终端机来下载DOM
图
有axios、react-router-dom、redux、react-redux、redux-thunk及redux-devtools-extension。
打开Navbar.js，开始设定

而为了要让Navbar.js的第15-17行links可以使用，需将应用程序与浏览器router连线
打开App.js开始设定browser router与 Route path

接着就是建立HomeScreen、ProductScreen、CartScreen
一样在src资料夹里，新建一个screens资料夹，并建立HomeScreen、ProductScreen、CartScreen的js、css档
然後再三个js档中皆import各自的css档，例如:HomeScreen.js:

第3-9行:是自订义函式rafce，如何自订义，要先下载React snippets extension。
第11行:输出上面函式HomeScreen。
ProductScreen.js、CartScreen.js也跟HomeScreen.js类似
完成之後，把HomeScreen.js、ProductScreen.js、CartScreen.js import到App.js