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 完成一個網站
Rating: 4.7 out of 5(38 ratings)
144 students

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

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

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 建置網站