--- # (H)尊絕不凡 React 教學 ## - 第三週 --- week3 - [本次上課專案](https://github.com/explooosion/react-tutorial/tree/master/week3) --- ### 今天の學習目標 - ㄧ、 Router 路由 - 二、 Ajax 請求 --- ### React 的殘酷現實 1. 官方只有提供 React Library 2. 其餘什麼都沒有 3. 善用工具：Stack Overflow, Github, npm --- # ㄧ、React Router --- ### ㄧ、React Router  --- ### ㄧ、React Router [Github](https://github.com/ReactTraining/react-router) 導讀文件：[quick-start](https://reacttraining.com/react-router/web/guides/quick-start) --- ### ㄧ、React Router - 建立新專案 ```bash= npm install -g create-react-app create-react-app demo-app cd demo-app ``` - 安裝路由套件 ```bash= npm install react-router-dom # or yarn add react-router-dom ``` --- ### ㄧ、React Router 組件：[Route](https://reacttraining.com/react-router/web/guides/quick-start) - path: 匹配路徑 - exact: 完全匹配 - component: 掛載組件 - render: 渲染組件, 與 component 不太一樣 --- ### ㄧ、React Router 組件：[Redirect](https://reacttraining.com/react-router/web/api/Redirect) replace: 用於轉址路由 --- ### ㄧ、React Router 在 props 裡面有：[history](https://reacttraining.com/react-router/web/api/history) location - 取得當前路徑 push(路由名稱) - 推送當前頁面 goBack - 返回前一頁 --- ### ㄧ、客戶の需求 - 情境練習 1. 安安！幫我寫公司網站。 2. 網站首頁顯示文字： ＯＯ公司 3. 另外我要「後台管理」頁面。 4. 首頁有個是否登入的狀態。 5. 如果沒有登入 false，則「後台管理」轉址到首頁。 --- # 二、Ajax 請求 --- ### 二、Ajax 請求 常見的 Ajax 方式： 1. XMLHttpRequest 2. jQuery - $.get, $.post 3. fetch --- ### 二、Ajax 請求 - 一般會建立以下資料夾 1. components - 存放各式組件 2. services - ajax 等資源請求  --- ### 二、Ajax 請求 - 非同步問題 1. [JavaScript Await 與 Async](https://wcc723.github.io/javascript/2017/12/30/javascript-async-await/) 2. [從 ES6 Promise 到 ES7 的 async await 入門](https://mlwmlw.org/2016/03/es7-%E7%9A%84-async-await-%E5%85%A5%E9%96%80/comment-page-1/) 3. [ES7 Async Await 聖經](https://medium.com/@peterchang_82818/javascript-es7-async-await-%E6%95%99%E5%AD%B8-703473854f29-tutorial-example-703473854f29) --- ### 二、Ajax 請求 - Promise 圖解  --- ### 二、Ajax 請求 - 免費測試資料 - [JSONPlaceholder](https://jsonplaceholder.typicode.com/)  --- ### 二、HUNTER × 試卷A 1. [https://jsonplaceholder.typicode.com/todos](https://jsonplaceholder.typicode.com/todos) 2. 建立 component：TodoList 3. 建立 service: Todos 4. 顯示資料 5. 應用 checkbox --- ### 二、HUNTER × 試卷B 1. 接續使用「二、Ajax 請求 」 的範例專案 UserList 2. App.js 建立一個 login 的狀態 3. 若沒登入就進入 UserList, 則會被轉址回首頁。 4. 提示：使用 react-router 轉址 --- ### ＊.學習統整 1. 可以根據不同頁面，製作出路由。 2. 我會在路由組件中使用 render 傳入 state。 3. 我會使用 fetch 介接資料。 4. 我理解 services 應該要放什麼。 5. 我會使用轉址。 --- # 下課