คอร์ส React ฟรี [MERN stack] ง่ายๆ step by step

ยินดีต้อนรับสู่ MERN Stack CRUD  Back to Front by รอยไถ พัฒนา  
สำหรับเนื้อหาในเพลลิสต์นี้ เราจะมาสร้างเว็บแอพพลิเคชั่นสำหรับ เพิ่ม แสดง แก้ไข ลบ ข้อมูล
สำหรับเครื่องมือที่จะใช้ในหลักสูตรนี้ก็คือ Node.js, Express, React, Redux and MongoDB 

เป็นเนื้อหาวิชาที่อัพเดตใหม่ 2021 ทันสมัยต่อโลกในปัจจุบันอย่างแน่นอน ตอบโจทย์สำหรับผู้ที่อยากจะพัฒนาเว็บแอพพลิเคชั่นที่รองรับการทำงานผ่าน อุปกรณ์ทุก ๆ อุปกรณ์ไม่ว่าจะเป็น ComputerPC, Notebook, Tablet, Mobile ก่อนอื่นเดี๋ยวเราไปดูเนื้อหาของคอร์สเรียนในวิชานี้กันครับ

สร้างเซิฟเวอร์ด้วย backend API with Node.js & Express

• เริ่มต้นกันด้วยสร้างเซิฟเวอร์ ExpressJS ที่จะเป็นพระเอกของเราในส่วนของ back-end
• แยก Routing  ออกจากไฟล์หลักของเรา ทำให้โค้ดกระชับและอ่านง่ายยิ่งขึ้น
• แยก Controller ออกจาก Routing เพื่อให้โค้ดอ่านง่ายยิ่งขึ้นไปอีกนะครับ
• ก่อนอื่นเรามาทำการสมัครสมาชิก Register กันก่อนเลย เราจะใช้ Bcrypts  เข้ามาช่วยในส่วนของการเข้ารหัส password
• การล็อกอิน Login จะใช้ JWT (JSON Web Tokens) เข้ามาช่วยในเรื่องของการจัดการ Tokens เพื่อส่งไปยัง endpoint 
• สำหรับการเทส API testing  จะใช้โปรแกรม Postman เข้ามาช่วยในการยิงรีเควส
• ฐานข้อมูล แน่นอนครับพระเอกของเราคือเจ้า MongoDB ที่ใช้งานง่ายมาก แถมโค้ดยังสั้นอีกด้วย รับรองใช้แล้วจะติดใจแน่นอนครับ
• เมื่อการสมัครกับล็อกอิน เรียบร้อยแล้ว เราจะมาสร้าง end-point สำหรับติดต่อกับฝั่ง client (front-end) กันไว้รอสักนิดนึงนะครับ

สร้าง Front-End ด้วย ReactJS

• มาเริ่มกันที่ Create-react-app กันนะครับ ใจปัจจุบันเราสามารถสร้างโปรเจ็คจาก react ง่ายมากๆ เพียงแค่ 1 คำสั่งเท่านั้น
• สำหรับการจัดการกับ State เราจะใช้ตัว  Redux เข้ามาช่วยในการจัดการ state management ถ้าท่านใดเคยใช้ state เพียวๆ อาจจะรู้สึกว่าเมื่อคอมโพเนน เราเยอะขึ้นการจะส่งค่า state ข้ามไปยังคอมโพเนนอื่น จะเป็นเรื่องที่ยาก redux จะเข้ามาช่วยจัดการในเรื่องนี้ เพียงแค่เราสร้าง store เข้ามาเก็บข้อมูลเป็นของส่วนกลาง เมื่อคอมโพเนนใดอยากใช้ ก็เพียงเข้ามาดึงไปใช้งาน
• สร้าง reducers and actions เพื่อใช้สำหรับเข้าถึงตัว store และส่งค่าเข้ามา
• สำหรับการดึงข้อมูลจาก API เราจะใช้ Axios (แอ็ก-ซิ-โอส) เข้ามาช่วยในการ Get, Post, Put, Delete สำหรับ สร้าง , แสดง , แก้ไข, ลบ ข้อมูล
• การเขียนฝั่งหน้าบ้านก็เหมือนเดิมนะครับ เราจะแยกโค้ดเช่น ส่วนแสดงผล , ฟังชั่นก์, คอมโพเนน ออกจากกัน เพื่อให้โค้ดเราสั้นและกระชับ เวลาเราแก้นะครับ จะได้หาโค้ดง่ายๆ
• สำหรับเว็บแอพพลิเคชั่นนี้เราจะสามารถเพิ่มข้อมูลบุคคล ข้อมูลรูปภาพ และสามารถแสดง ลบ แก้ไข ได้นะครับ
• เมื่อทำได้ขนาดนี้ ก็อาจจะเป็นประโยชน์บ้าง สำหรับการนำไปพัฒนาต่อยอด ไปยังแอพพลิเคชั่นอื่นๆ  

จะได้อะไรบ้างจากหลักสูตรนี้

• สร้าง full stack แอพพลิเคชั่น ด้วย MERN Stack - React, Redux, Node, Express & MongoDB
• สร้าง backend API ด้วย Express
• ใช้ JWT authentication ในการล็อกอิน
• ประยุกต์ใช้งาน React ร่วมกับ Express
• ใช้งาน React Hooks, Async/Await เข้ามาช่วยในการจัดลำดับการทำงาน
• ใช้ Redux ในการจัดการ state

สำหรับคอร์สนี้สิ่งที่ควรรู้คือ

• พื้นฐาน JavaScript & ES6
• พื้นฐาน React & Node Basics

ใครที่เหมาะกับคอร์สนี้บ้าง

• สำหรับทุกๆ ท่านที่สนในและเรียนรู้การสร้างเว็บแอพพลิเคชั่นด้วย full stack MERN application

เรียนฟรี MERN stack CRUD กับ รอยไถ พัฒนา

คอร์สออนไลน์ฟรี, คอร์สReactฟรี, เรียนออนไลน์ MERN Stack ฟรี

1. MERN setup server ติดตั้งเซิฟเวอร์ ExpressJS | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=zzeuF61iuV4
   

2. MERN ExpressJS Routes | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=OZ8mzCF61hc
3. MERN Express Route Auto | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=t9iR-7jyTkQ
4. MERN ExpressJS Controllers | รอยไถ พัฒนา 2021https://www.youtube.com/watch?v=o-uZWKyadIM

5. MERN ExpressJS Models | รอยไถ พัฒนา 2021https://www.youtube.com/watch?v=ZBdC_sfjS2s
6. MERN ExpressJS Register สมัครสมาชิก | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=yPqaBnuPM5A
7. MERN ExpressJS Login ล็อกอิน | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=qGws8u6qlsw
8. MERN ExpressJS Route CRUD | รอยไถ พัฒนา 2021https://www.youtube.com/watch?v=Mel5kxot2so
9. MERN ExpressJS CheckLogin ด้วย MIddleware | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=JBOBh8tN7v4
10. MERN ติดตั้ง React รอยไถ พัฒนา 2021https://www.youtube.com/watch?v=FMxQuUGTpuQ
11. MERN React ติดตั้ง Redux | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=sMS5N_rOrlU
12. MERN Navbar เมนู | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=PZZj0whuGi0
13. MERN React Router เมนู รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=86mN2E9X1I8
14. MERN Register สมัครสมาชิก | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=kBheQjK3VJI
15. MERN Register-2 แจ้งเตือน | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=L4cdHuqn14k
16. MERN Login ล็อกอิน | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=TpdCXxMcD_c
17. MERN Login Redux | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=RcH9UmTIZ_Y
18. MERN Login เช็ค User ปัจจุบัน | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=vQi2zT4r-WQ
19. MERN ปุ่ม LogOut | รอยไถ พัฒนา 2021https://www.youtube.com/watch?v=wtTtKl2-awU
20. MERN ไม่ล็อกอินคุณบ่ได้ไปต่อนะ Protected Route | รอยไถ พัฒนา 2021https://www.youtube.com/watch?v=I9ySszkid2I
21. MERN Protected Route Admin | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=zLuU0hj1Za4
22. MERN เพิ่มเติม Register | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=0C_kY6-xSx8
23. MERN CRUD-Create เพิ่มข้อมูล | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=hJsg-QPxM7w
24. MERN CRUD-Read แสดงข้อมูลในตาราง | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=5OS-MSMwOlM
25. MERN CRUD-Delete ลบข้อมูล | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=rd6VS3UXg6U
26. MERN CRUD-Update แก้ไขข้อมูล | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=u1IWmWL7LZY
27. MERN CRUD Update#2 แก้ไขข้อมูล | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=i0n5YUAXr8k
28. MERN Upload File อัพโหลดไฟล์ | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=wOSOEw_bQL0
29. MERN Progress Bar แถบดาวน์โหลด | รอยไถ พัฒนา 2021 https://www.youtube.com/watch?v=jPlh2lmKBHA
30. MERN ลบไฟล์ unlink | รอยไถ พัฒนา 2021
    https://www.youtube.com/watch?v=r9l8aNQSRRc