--- # (E)尊絕不凡 React 教學 ## - 第四週 --- week4 #### [本次上課專案](https://github.com/explooosion/react-tutorial/tree/master/week4) --- ### 今天の極限目標 - ㄧ、 Re:ReactJS - 二、 Shopping！我的主場！ --- ## ㄧ、Re:ReactJS --- # Re ??? --- ## 什麼是 Re...   --- ### 也許你比較懂這個 Re...  --- ### 你們是否都忘光了呢？🤷‍♂️ # - 讓我們 Re... --- ## 還記得怎麼新建 react 專案嗎？ 1. 安裝全域套件 create-react-app 2. 利用 create-react-app [專案名稱] 產生專案 3. 進入專案 cd [專案名稱] 4. 使用 npm install 或 yarn --- ### 指令使用 ```bash= npm install -g create-react-app create-react-app demo-app cd demo-app npm install # or yarn ``` --- ### npm 和 yarn 差在哪？  --- ### npm 與 yarn 對照： | 功能 | npm | yarn | | -------- | -------- | -------- | | 安裝全部 | npm install | yarn | | 安裝ＯＯ | npm install ＯＯ | yarn add ＯＯ | | 移除ＯＯ | npm uninstall ＯＯ | yarn remove ＯＯ | --- ### 你可以兩個都用  ---  --- ## 經過了三週的課程 --- ### 現在的你是史上最強弟子 👊： - 💛 我會新增並啟動 React 專案。 - 💛 我會建立新的 Component。 - 💛 我會使用 state 與 props。 - 💛 我會使用 router。 --- # BUT --- # 網站架構？ ---  --- ## 試著組件化網站：  --- ## 是不是很簡單呢！  --- ## One more try 試著組件化網站：  --- ## 跟我想得一樣！  --- # 畫出去，寫進來 # 專案發大財 --- ## 二、Shopping 我的主場 ---  --- ### Ｏ掰 の Shopping 業主需求 1. 首頁顯示所有產品。 2. 首頁產品那要有個搜尋功能。 3. 產品點進去有詳細簡介。 4. 有時間，再幫我做個關於我們。 今天晚上給我，很簡單對吧！ --- ### 網站架構  --- ### 以頁面為導向 1. Home 首頁(產品列表) 2. Product 產品詳細頁面 3. About 關於頁面 --- ### 以組件為導向 1. Home - render, renderProducts, renderSearch 2. Product - render 4. About - render 5. Header(Navbar) 6. Footer --- ### 以路由為導向 1. / 2. /product/:id 3. /about --- ### 開發建議順序 1. 底層架構規劃(路由、組件) 2. 版型設計與調整 3. 將元素組件化 4. 功能開發與資料串接 --- ### 實作 1. 建立專案。 2. 所有頁面的路由組件(Home, About, Product)。 3. 基本組件庫（Header, Footer）。 4. 版型設計。 5. 功能開發。 --- ## What's more? - [ ] AJAX (Fetch, $.get, XMLHttpRequest) - [ ] 生命週期 - [ ] Layout - [ ] Redux - [ ] CSS框架 (Bootstrap、AntD、Primereact...etc) - [ ] 多國語系 i18n - [ ] Hooks --- ## 今天的你要比昨天更進步。 ---