React 實務分享

###### tags: `學期 3` `工作坊頁面` [toc] # React 實務分享 ## Before Webinar ### 報名 React 實務分享 - 1！ #### React 實務分享 - 1 <div style="width:65%; background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; width:fit-content;"> 日期與時間：07/27 (四) 19:30 - 21:00</span><br> 與會連結：<a href="https://zoom.us/j/89798493306">https://zoom.us/j/89798493306</a><br> 會議密碼：842271<br> <span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，以利工作坊進行</span><br> <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=NzViMzZ1NGc2MzEzdWd2MGFrcWRrc24yOXUgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a> </div> 分享內容包含以下主題： - 在 React 中的事件處理 - 學習第一個 hook：useState，了解如何透過 state 儲存資料 - useState 的兩種寫法與使用情境 - 多 state 的管理與優化 - React 背後的渲染機制 - 聊聊什麼是 JSX #### 行前準備為了讓你在工作坊中能有效學習、吸收，以下幾項基本概念建議你在工作坊前事先準備。 1. 熟悉 JavaScript ES6 語法。 - 學習建議：完成 [盤點 JavaScript ES6 觀念](https://lighthouse.alphacamp.co/courses/207/units/28580) 單元學習。 2. 了解 JavaScript setTimeout 和 setInterval 的使用方法。 - 學習建議：完成 Week 1 **【S1 非同步處理．觀念入門】**。 3. 了解 React 中 state 的基本概念。 - 學習建議：完成 Week 2 **【用 React 打造動態應用程式】** 章節的學習。 --- ### React 實務分享 - 1 - 行前提醒為了讓同學能更順利學習，我們為同學額外加開這次的實務分享活動。本次的活動邀請到了經驗豐富的奶綠茶老師來分享在 React 上的實務經驗。總計有兩個場次： - 第一場：`07/27（四）晚上 7:30 - 9:00` - 第二場：`08/03（四）晚上 7:30 - 9:00` 本次活動前，請同學務必**完成行前準備**，詳細內容請到活動頁面查看 ➡️ [React 實務分享](https://lighthouse.alphacamp.co/courses/207/units/29028) <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ### 【今晚 7:30 工作坊提醒】React 實務分享 - 1 今天晚上 7:30 的 React 實務分享工作坊邀請到了經驗豐富的奶綠茶老師，來分享在 React 上的實務經驗。幫助大家可以更熟悉怎麼使用在課程中學到的新技術。別忘記做行前準備，幫助自己更好吸收哦！我們晚上見！ #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：07/27 (四) 19:30 - 21:00<br> • 與會連結跟行前準備：請參考 <a href="https://lighthouse.alphacamp.co/courses/207/units/29028"> React 實務分享 - 1</a> </div>  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> ### 【今晚 7:30 工作坊提醒】React 實務分享 - 2 今天晚上 7:30 的 React 實務分享工作坊邀請到了經驗豐富的奶綠茶老師，來分享在 React 上的實務經驗。幫助大家了解 Components 之間如何傳遞資料，與 React.Context 帶來的優勢與劣勢。別忘記做行前準備，幫助自己更好吸收哦！我們晚上見！ #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:450px; width:fit-content;"> • 活動時間：08/03 (四) 19:30 - 21:00<br> • 與會連結跟行前準備：請參考 <a href="https://lighthouse.alphacamp.co/courses/207/units/29029"> React 實務分享 - 2</a> </div>  <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ### 報名 React 實務分享 - 2！ #### React 實務分享 - 2 <div style="width:65%; background: #ececec; padding: 15px; border-radius: 10px ; font-weight: bold; width:fit-content;"> 日期與時間：08/03 (四) 19:30 - 21:00</span><br> 與會連結：<a href="https://zoom.us/j/83854175500">https://zoom.us/j/83854175500</a><br> 會議密碼：083521<br> <span style="color:#CE2D0F; font-size: 0.95rem; font-weight: bold;">注意：請使用電腦開啟連結，以利工作坊進行</span><br> <a class="btn btn-normal" target="_blank" href="https://calendar.google.com/calendar/event?action=TEMPLATE&tmeid=M290OHBwdmx2Z2VlOW41OHJmOWtkM291a3AgczdpYmk3OHUxZ2NuYTRxOWhtbzc4cGxoMjhAZw&tmsrc=s7ibi78u1gcna4q9hmo78plh28%40group.calendar.google.com">將行程添加到 Google 日曆</a> </div> 分享內容包含以下主題： 1. 如何在元件間傳遞 state 2. 實作小型的 TodoList App 3. 什麼是 Context 4. 了解如何透過 context 直接跨組件取得資料 5. 實作小型的 Context 應用程式 #### 行前準備為了讓你在工作坊中能有效學習、吸收，以下幾項基本概念建議你在工作坊前事先準備。 1. 了解 React 中 useContext 的基本概念。 - 學習建議：完成 Week 3 【**用 State 管理狀態**】章節的學習。 --- ### React 實務分享 - 2 - 行前提醒 08/03 的 React 實務分享邀請到了經驗豐富的奶綠茶老師來分享在 React 上的實務經驗，本次的學習目標是讓學員了解 Components 之間如何傳遞資料，與 React.Context 帶來的優勢與劣勢。 #### 活動資訊 <div style="background: #ececec; padding: 15px; margin-bottom: 10px; border-radius: 10px ; min-width:350px; width:fit-content;"> • 活動時間：08/03（四）晚上 7:30 - 9:00<br> </div> 本次活動前，請同學務必**完成行前準備**，詳細內容請到活動頁面查看 ➡️ [React 實務分享](https://lighthouse.alphacamp.co/courses/207/units/29029) <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- # After Webinar ### 07/27 React 實務分享 - 1 會後精華本次的活動邀請到了經驗豐富的奶綠茶老師來分享在 React 上的實務經驗分享內容包含以下主題： - 在 React 中的事件處理 - 學習第一個 hook：useState，了解如何透過 state 儲存資料 - useState 的兩種寫法與使用情境 - 多 state 的管理與優化 - React 背後的渲染機制 - 聊聊什麼是 JSX <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/849297596?h=38ecdc5829&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen></iframe> </div> -------- ## 07/27 React 實務分享 - 1 會後精華上架囉！本次的工作坊，目的幫助同學可以更熟悉怎麼使用在課程中學到的新技術，這次邀請到了經驗豐富的奶綠茶老師，來分享在 React 上的實務經驗。 <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22876/___2023-07-28___8.34.23.png"></div> <div style="height: 5px;"></div> 現在就去看看精彩的會後錄影吧 ➡️ [07/27 React 實務分享 - 1 會後精華](https://lighthouse.alphacamp.co/courses/207/units/29028) <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div> --- ### 08/03 React 實務分享 -2 會後精華本次的活動邀請到了經驗豐富的奶綠茶老師來分享在 React 上的實務經驗分享內容包含以下主題： 1. 如何在元件間傳遞 state 2. 實作小型的 TodoList App 3. 什麼是 Context 4. 了解如何透過 context 直接跨組件取得資料 5. 實作小型的 Context 應用程式 <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/851486675?h=ae0cd78b62&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allowfullscreen></iframe> </div> --- ## 08/03 React 實務分享 - 2 會後精華上架囉！本次的工作坊，目的幫助同學可以更熟悉怎麼使用在課程中學到的新技術，這次邀請到了經驗豐富的奶綠茶老師，來分享在 React 上的實務經驗，幫助大家了解 Components 之間如何傳遞資料，與 React.Context 帶來的優勢與劣勢。 <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/22877/___2023-08-04___9.13.07.png"></div> <div style="height: 5px;"></div> 現在就去看看精彩的會後錄影吧 ➡️ [08/03 React 實務分享 -2 會後精華](https://lighthouse.alphacamp.co/courses/207/units/28907) <div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>