Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
運用前後端 Javascript 熱門代碼庫 React 與流行框架 Next.js 完成一個網站
Highest Rated
Rating: 4.7 out of 5(38 ratings)
144 students

運用前後端 Javascript 熱門代碼庫 React 與流行框架 Next.js 完成一個網站

製作網站建置有許多作法,你知道如何開始嗎?使用 React 搭配網頁框架 Next.js 是主流 Javascript 的搭配組合,來磨練全端整合技能
Last updated 3/2021
Chinese (Traditional)

What you'll learn

  • 學習 Javascript 語言概念與特性
  • 使用 Javascript ES6 撰寫程式邏輯
  • 了解 ReactJS 前端函示庫
  • 上手網站框架 Next

Course content

3 sections26 lectures7h 48m total length
  • React.js 簡介與 React 官方文件介紹11:32
    • React.js 與 Vanilla.js 的開發差別、官方文件瀏覽

    • 介紹 Virtual DOM 與 Render 畫面渲染觀念

  • React.js 使用 - RenderDom12:57
    • 了解 React 掛載在 DOM 的概念

  • React Component 組件22:59
    • 介紹 State 資料狀態

  • Component Props 組件傳參21:43
    • 介紹 Render( ) 函式與 JSX 渲染畫面

  • Render & JSX 組建渲染27:03
    • 了解父子組件的參數如何傳遞

  • React 本地端開發介紹與 node.js 環境建置15:29
    • 環境建置教學 → nvm 安裝、node.js 安裝

  • React in Node.js 本地端開發12:57
    • 介紹 node.js

    • 利用 create-react-app 建立本地端專案

  • React Lifecycle 生命週期34:15
    • 介紹 component 的生命週期

    • 了解生命週期與渲染畫面的關係

    • 了解 State 資料狀態更新與渲染畫面的關係

  • Functional Component 函式組件8:52
  • React Hooks8:47
    • 介紹 React16 新增的 Hooks 功能

    • 介紹 Hooks 的觀點與概念

  • React Hooks - useState28:43
    • 介紹如何使用 useState 建立資料狀態

  • React Hooks - useEffect14:33
    • 介紹如何使用 useEffect 完成資料更新的處理與渲染

    • 了解 useEffect 對應生命週期的概念

  • React Hooks - useRef16:18
    • 介紹如何使用 useRef 以及使用情境

Requirements

  • 不需要嚴謹的程式背景,願意思考學習
  • 有操作 Mac/Windows 電腦的基礎
  • 具備快樂學習的心情與一個假日
  • 對網頁有認識,操作過 JavaScript

Description

網頁開發是建構應用服務的敲門磚。你是否想過可以自己使用 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 全端應用開發介紹。做為上課學員的你可以在裡面跟著教學一起練習,反覆操作嘗試建立自己的全端應用:)

Who this course is for:

  • 對前端開發有興趣,有嘗試使用 JS 來撰寫程式
  • 嘗試使用現代 JS ES6 語法,並有興趣加強 JS 能力
  • 透過前後端 Javascript 代碼庫與框架 Next 建置網站