React Full Stack และเขียน Blog ง่ายๆ ด้วย GraphQL

React Full Stack และเขียน Blog ง่ายๆ ด้วย GraphQL

React Full Stack และเขียน Blog ง่ายๆ ด้วย GraphQL

รายละเอียด

ผู้สอน React Thailand

คำอธิบายคอร์สออนไลน์

ปัจจุบันการเขียนเว็บแอพพลิเคชั่นด้วย JavaScript ได้รับความนิยมอย่างมากทั่วโลก โดยที่หนึ่งใน library ที่เป็นที่นิยมอย่างมากคือ React เนื่องจากมีแนวคิดแบบใหม่ที่สวนกระแสแนวคิดแบบเดิมๆ และเนื่องจาก React เป็น JavaScript Library ที่สามารถใช้งานร่วมกันกับ Node.js เพื่อ Render ฝั่ง server ได้ง่าย

แต่เนื่องจาก React เป็นแค่ Library ที่ช่วยพัฒนา View หรือ UI เท่านั้น การพัฒนาโปรเจคจริงด้วย React จึงต้องอาศัย packages และ tools อื่นๆ อีกมากมาร่วมด้วยช่วยกัน 

ในคอร์สนี้เราจะเริ่มต้นจากศูนย์และค่อยๆ รู้จักกับ Tool แต่ละตัว ตั้งแต่ Babel, webpack, Hot module replacement, CSS modules รวมถึงหลักการทำงานของ React และ packages ตัวอื่นๆ เช่น react-router, redux รวมไปถึงวิธีการ render ฝั่ง server, การทำ Code Splitting จนจบโปรเจคการสร้าง Blog ง่ายๆ ด้วยการเขียน GraphQL Server และใช้ React Apollo ช่วยจัดการโหลดข้อมูลฝั่ง Client โดยคอร์สนี้จะเป็นลักษณะ Screencast ที่เน้นให้เห็นหน้าจอขณะที่เขียนโค้ดสดๆ และตัดต่อให้กระชับ โดยที่จะหลีกเลี่ยงการพูดทฤษฏีหรือสไลด์ยาวๆ แต่เน้นการเขียนโค้ดขึ้นมาใหม่ทั้งหมดจริงๆ ไม่ใช่จาก template ที่มีอยู่แล้ว

ประโยชน์ที่ผู้เรียนจะได้รับ

ถ้าใครที่ชอบดูการเขียน Code แบบเริ่มต้นตั้งแต่ศูนย์จนจบโปรเจค จะชอบคอร์สนี้ เพราะว่าผู้สอนเชื่อว่าวิธีนี้จะช่วยให้เรียนรู้ได้ดีที่สุด โดยผู้ที่เรียนจบจะสามารถเขียนเว็บแอพพลิเคชั่นได้ด้วย React และเข้าใจการทำงานของ Tool สมัยใหม่ต่างๆ ทั้ง Babel, webpack และ GraphQL โดยที่สามารถ render ได้ทั้งฝั่ง client และ server อีกทั้งยังรู้จัก package ที่จำเป็นๆ พื้นฐานหลายๆ ตัวในการทำโปรเจคของตัวเองอีกด้วย

ใครควรเรียนคอร์สออนไลน์นี้

- ผู้ที่สนใจและอยากหัดเขียนเว็บแอพพลิเคชั่นด้วย React และ Node.js - Full-stack React

- คนที่สับสนกับ tools สมัยใหม่และ boilerplate ต่างๆ และคิดอยากจะเขียนโปรเจคด้วยตัวเองโดยไม่พึ่ง boilerplate ของคนอื่น

- คนที่สนใจ GraphQL และคิดอยากจะเปลี่ยนมาใช้แทน Rest API ก็สามารถเรียนการเขียน GraphQL Server ได้

ผู้เรียนต้องมีความรู้อะไรมาก่อน

ควรรู้จัก JavaScript (ES2015 and beyond) และ Node.js, Express ซึ่งสามารถ เรียนฟรีได้จากคอร์ส "เตรียมพื้นฐาน ES2015 และ Node.js ก่อนจะไปลุย React" นี้

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

รู้จักกับ Tools ที่จำเป็นก่อน คลิปยาว (นาที)
Babel - JS Compiler ที่ขาดไม่ได้ 05:21
webpack - ทำไมต้องใช้ webpack 03:09
webpack - ตัวรวมไฟล์ที่ทรงพลัง 04:41
webpack + babel-loader = แปลงไฟล์ + รวมไฟล์พร้อมๆ กัน 03:11
Serve เว็บด้วย Express web server 05:50
ใช้ webpack-dev-server เพื่อการพัฒนาที่ง่ายขึ้น 06:04
เรียน React กัน คลิปยาว (นาที)
รู้จัก babel-preset-react ก่อน 01:40
React Element หน่วยย่อยที่สุดของ ​React 03:01
ทำความรู้จัก JSX ให้มากขึ้น 02:35
Component - จุดเด่นของ ​React 03:29
ใส่ Style ด้วย Inline Style Object 02:29
Props - Input ของ Component 08:17
Event ใน React 03:44
รู้จักกับ State 07:37
State ภาคต่อ 08:14
Render List (Array) 06:21
Children Props - ไม่ธรรมดา 11:43
Lifecycle Method ของ Component 16:21
ลอง Load data ใน Component 05:40
Context - ฟีเจอร์ลับที่ไม่ลับ 06:54
Ref - ทางออกสำหรับอ้างอิง Component ลูก 02:21
ทำงานกับ ​Form 09:38
Higher-Order Component คืออะไร 10:04
Children ก็เป็น Function ได้ 03:40
Test ด้วย Jest 13:37
Storybook - เทสแบบเห็นภาพหรือทำเป็น document ก็ได้ 05:14
Workshop: สร้าง Blog ง่ายๆ กัน คลิปยาว (นาที)
Starter Kit หรือ Framework ตัวเลือกที่ควรรู้ก่อนจะเริ่มต้นสร้างโปรเจคเอง 01:09
Preview หน้าตาโปรเจคที่เสร็จแล้วกันก่อน 01:20
สร้าง Express Server และ webpack-dev-server กันก่อน 13:10
เร่ิมต้นใช้งาน React 01:36
วิธีเพิิ่ม Polyfill ที่ต้องใช้ฝั่ง Client 01:47
Refactor config ต่างๆ ให้เป็นระบบ 06:33
HMRE - แก้โค้ดแล้วเห็นเลยโดยไม่ต้อง refresh หน้าเว็บ 04:52
Setup Flow และ Lint เพื่อช่วยลด Bug ในโค้ด 04:10
Setup ฺBasic CSS 05:44
เริ่มต้นเขียน App 02:00
Setup CSS Modules แบบที่เวิร์คที่สุด 07:21
สอน Webpack ให้ resolve modules ตาม path ที่ต้องการ 00:53
Build project แบบ Client-Side Rendering 11:45
Serve app แบบ Client-Side Rendering 08:05
แยก Module ที่ใช้บ่อยไปไว้ใน Vendor 03:49
Inline Webpack Manifest ในหน้า html 03:05
Config webpack ให้ได้ไฟล์ที่เอาไป cache ได้ 03:49
ใช้งาน React Router 05:17
ทำ Server-Side Render (part 1) 14:31
ทำ Server-Side Render (part 2) 09:31
ทำ Code Splitting ด้วย webpack 05:30
setState และปัญหาของ Local State 06:54
เข้าใจ Redux แบบพื้นฐาน 10:27
ใช้ Redux ฝั่ง Server 03:35
Redux Middleware: ใช้งาน Redux กับ Promise (part 1) 04:50
Redux Middleware: ใช้งาน Redux กับ Promise (part 2) 04:11
Redux Devtools Extension - ต้องลง 01:47
Thunk คืออะไร 05:28
Dispatch action แบบ manual ฝั่ง Server 10:54
Dispatch action แบบ dynamic ฝั่ง Server 06:19
GraphQL - แนวคิดใหม่ที่ฮอตฮิตที่สุด (part 1) 08:41
GraphQL - แนวคิดใหม่ที่ฮอตฮิตที่สุด (part 2) 10:44
โหลดข้อมูลฝั่ง Client ด้วย react-apollo 08:04
ทำ Pagination ด้วย react-apollo 08:30
React Apollo + Redux 02:57
ทำ Server-Side Render ด้วย react-apollo 02:30
คุณต้องการออกจากระบบหรือไม่ ?

ส่งอีเมล์ให้เพื่อน

ส่งให้เพื่อนหลายคนใส่ “,” (ส่งพร้อมกันมากสุด 50 อีเมล์)

send