
React.js 與 Vanilla.js 的開發差別、官方文件瀏覽
介紹 Virtual DOM 與 Render 畫面渲染觀念
了解 React 掛載在 DOM 的概念
介紹 State 資料狀態
介紹 Render( ) 函式與 JSX 渲染畫面
了解父子組件的參數如何傳遞
環境建置教學 → nvm 安裝、node.js 安裝
介紹 node.js
利用 create-react-app 建立本地端專案
介紹 component 的生命週期
了解生命週期與渲染畫面的關係
了解 State 資料狀態更新與渲染畫面的關係
介紹 React16 新增的 Hooks 功能
介紹 Hooks 的觀點與概念
介紹如何使用 useState 建立資料狀態
介紹如何使用 useEffect 完成資料更新的處理與渲染
了解 useEffect 對應生命週期的概念
介紹如何使用 useRef 以及使用情境
介紹 Single Page Application
介紹路由運作機制
介紹如何建立頁面與 Switch & Route
介紹如何使用 Params 作為路由傳遞參數
介紹如何使用 Query
介紹 404NotFound 路由概念
介紹 Redux 概念
建立 Reducer 與 Actrion Create Function
建立 Store 以及如何使用 Provider 提供資料
介紹如何使用 Connect 讓 component 可以取用資料
介紹 useSelector
介紹 useDispatch
介紹 Next.js
介紹 Server Side Render 與 Client Side Render
介紹 npm init next-app 指令建立 Next 專案
介紹 Next 專案架構
介紹 Pages 資料夾結構與 Router 的關係
介紹 Layout 層開發概念
建置前台與後台 Layout
介紹如何整合 Redux 與 Next 專案
網頁開發是建構應用服務的敲門磚。你是否想過可以自己使用 Javascript 來建置網站?在前端的世界中我們以為只能製作美美的特效,其實 Javascript 能做的不只這樣。在現代的前端工程中已儼然成為一個可以跨足後端的語言,而 Next.js 即是 Node.js 與 Javascript 的完美結合,可以使用 React 與 Javascript 製作全端網站。
你為什麼需要上這堂課?
React 作為 2020 的主戰場,你需要對 React 有一定的理解份量。作為一名前端/網頁工程師,僅僅只會使用 Javascript 已經無法滿足現代應用開發2的情境。因此這堂課會從全端應用的角度切入,並介紹 Next.js 的網頁應用開發,使用部落格來範例說明如何製作一個擁有 SSR(亦即 Server Side Rendering)的網站並具備元件高互動的特性。
本課程將會包含以下內容:
這堂課程分為三個大章節。從 React 主流代碼庫開始了解 Component, JSX, Props 等使用,並接軌至 Functional Component 的開發方向,介紹於 React 新版本 16 之後所支援的 React Hooks,包括 useState, useEffect, useRef 去理解 hooks 的特性提高掌握度。最後一個部分會進入到全端應用 Next.js 的開發項目,理解 SPA 單頁式網站與 React Router,從頁面建立到路由設置以及如何整合 Redux 與 Next 專案。
ReactJS 開發項目上手。
React Router & Redux 教學應用。
Next.js 介紹與網站範例處理。
關於這堂課
快樂學程式在台灣擁有超過 1000 人參與的在地社群活動。截至 2020 年我們已經舉辦超過三年的社群與活動,每個月皆有程式思維相關的聚會與交流,深耕社群並參與推廣工程思維,讓非本科系的男孩女孩皆能一窺程式的風趣與培養解決問題的能力。這次與 Glove 推出這堂「運用前後端 Javascript 熱門代碼庫 React 與流行框架 Next.js 完成一個網站」內容屬於中階需有對 Javascript 有基本認識想學習 ReactJS 與 Next.js 全端應用開發介紹。做為上課學員的你可以在裡面跟著教學一起練習,反覆操作嘗試建立自己的全端應用:)