คอร์สอบรม React.js และ Gatsby.js 101

ข้อมูลของคอร์สอบรม

  • วันที่อบรม: 24-25 (ส-อา) สิงหาคม 2562 เวลา: 9.00-16.00 น.
  • ค่าอบรม: 4,500 บาท
  • โปรโมชั่นค่าอบรม: เพียง 3,490 บาท (ราคาส่วนลดก่อนวันที่ 20 สิงหาคม 2562)
  • สถานที่อบรม: OASIS Coffee BTS: สถานีอนุสาวรีย์ชัยฯ

ติดต่อขอใบเสนอราคา LINE ID: tutor4dev, โทร. 081-572-2129

เพิ่มเพื่อน tutor4dev***

Prerequisite

  • พื้นฐานการเขียนโปรแกรมภาษา HTML และ CSS
  • พื้นฐานการเขียนโปรแกรมภาษา JavaScript

เกี่ยวกับคอร์สอบรม

ตัวอย่างคลิปสอน Gatsby.js Framework

Gatsby.js เป็น React.js Based Framework ที่ใช้สำหรับสร้าง Static Website โดยจะได้ผลลัพธ์เป็นไฟล์ HTML ธรรมดา ที่สามารถนำไปติดตั้งที่โฮสได้ทั้ง Shared Hosting, VPS, Cloud, GitHub Page, Netlify และ อื่นๆ

เนื่องจาก Website ที่สร้างด้วย Gatsby.js เป็นไฟล์ HTML จึงให้บริการได้อย่างรวดเร็ว และ ทำให้หมดปัญหาเรื่อง SEO ยิ่งไปกว่ากว่านั้น Gatsby.js ยังจัดการเรื่อง Client-side Routing และ Single Page Application โดยที่นักพัฒนาไม่ต้องออกแรงใดๆ เพิ่มเติม

การสร้าง Website ด้วย Gatsby.js เหมาะเป็นอย่างยิ่งสำหรับการทำ Portfolio, Content Driven Website, Online Documentation โดยใช้ภาษา Markdown เป็นตัวจัดการ Content ของ Website และ Gatsby.js เองก็ยังสามารถสร้าง Website โดยใช้ Content จากแหล่งข้อมูลจากภายนอกเช่น ReST API, Database, Headless CMS เป็นต้น

Gatsby.js Framework มาพร้อมกับ Official และ Community Plugin ที่จะช่วยอำนวยความสะดวกในการพัฒนา Website อย่างครบครัน

เนื้อหาของคอร์สอบรม

React.js Foundation

  • React.js Component
  • state และ props

Gatsby.js Overview

  • Static Site Generator และ Gatsby.js Overview
  • Gatsby.js Project Setup
  • Gatsby Project Structure
  • React.js Component และ Gatsby.js Page
  • Gatsby.js Page Navigation
  • Custom Gatsby.js Error Page
  • Static Folder
  • Styling Gatsby.js Website
  • Layout และ Theme
  • Programmatic Gatsby.js Page
  • Image Optimization และ Responsive
  • Pagination
  • Localization และ Multi-lingual Website

Gatsby.js Lifecycle API

  • ไฟล์ config-gatsby.js
  • ไฟล์ node-gatsby.js
  • ไฟล์ browser-gatsby.js
  • ไฟล์ gatsby-ssr.js

GraphQL Foundation

  • GraphiQL และ Gatsby.js GraphQL Data
  • React.js Component และ GraphQL Usage
  • GraphQL Query
  • GraphQL Fragment
  • GraphQL Runtime Argument

File System และ Markdown Data Source

  • Markdown Syntax
  • Markdown FrontMatter
  • Remark.js Transformation Plugin
  • Remark.js Plugin for Gatsby.js
  • MDX
  • Syntax Highlighting

@reach/router

  • Hybrid Web App
  • Client-only Route
  • Authentication
  • Router Guard

Gatsby.js Custom Configuration

  • Babel.js
  • Webpack
  • html.js
  • Environment Variable
  • ESLint
  • Proxy API Request

Deployment

  • Production Build
  • Schedule Build
  • Deployment via Netlify