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

Current Time 0:00
/
Duration Time 0:00
Progress: NaN%

ราคา

ซื้อคอร์สนี้ : 2,000.00 ฿

สามารถเรียนที่ไหน เมื่อไหร่ก็ได้ตลอดชีพ

เนื้อหาทั้งหมด 62 วิดีโอ ความยาวรวมกัน 6 ชั่วโมง 12 นาที

สอน Full-stack React App ที่ render ทั้งฝั่ง client และ server

อธิบายและ config Tools ต่างๆ อย่างเข้าใจ

สามารถนำความเข้าใจไปสร้าง Boilerplate/ starter kit ของตัวเองได้

เขียน GraphQL และ Apollo เพื่อโหลดข้อมูลแทน Rest API

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

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

ปัจจุบันการเขียนเว็บแอพพลิเคชั่นด้วย 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" นี้

ผู้สอน

React Thailand

สถาบันฝึกอบรมด้าน React และ Node.js/ JavaScript เพื่อพัฒนาเว็บแอพพลิเคชั่นหรือโมบายแอพด้วยเทคโนโลยีใหม่ทันสมัย

หลักสูตรของคอร์สนี้

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