กลับสู่หลักสูตรทั้งหมด
ReactFrontendPro

ฝึกสร้างเว็บด้วย React อย่างมือโปร

หลักสูตรที่คุณจะได้เรียนสร้าง Web ด้วยเทคโนโลยีล่าสุดของ Reactjs, Redux, React Routing, Next.js, Babel, Webpack และอื่นๆ

9.5 ชม.
1,033 นักเรียน
4.59 (482 รีวิว)
ฝึกสร้างเว็บด้วย React อย่างมือโปร

คำอธิบาย

เทคโนโลยีที่เปลี่ยนแปลงอย่างรวดเร็วและดีขึ้นตามยุคสมัย คุณพร้อมที่จะก้าวไปอีกระดับในการพัฒนาเว็บแล้ว? หรือจะถูกทิ้งไว้กลางทาง .....

เห็นชัดๆ อยู่แล้วว่า JavaScript เป็นตัวเลือก

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

โดย React ทำหน้าที่ในการจัดการแสดงหน้าเว็บต่างๆ ในรูปแบบ Client Side Rendering (CSR) ทำให้หน้าเว็บแสดงผลอย่างรวดเร็วเมื่อเปลี่ยนหน้า ใกล้เคียงกับแอพพลิเคชั่นบนมือถือ และไม่มีการกระพริบ แบบเว็บสมัยก่อน หรือเราอาจจะเรียกอีกชื่อหนึ่งว่า Single Page Applications (SPAs)

ความต้องการนักพัฒนาเว็บด้วย React ในตลาดแรงงานสูงมาก รวมถึงค่าตอบแทนก็สูงเช่นกัน เป็นก่อนรวยก่อน หรือ จะเก็บไว้เป็นไม้เด็ดไว้ พัฒนาเว็บของคุณให้เทียบเท่าเว็บชั้นนำอย่าง Netflix, Facebook, Intragram, Uber ต่างเลือกใช้ React รับรองเว็บของคุณจะไม่น้อยหน้าใคร

นอกจากพัฒนาเว็บแอพพลิเคชั่นแล้ว React สามารถต่อยอดทำแอพพลิเคชั่นบนมือถือแบบ Cross Platform ได้อีกด้วยผ่าน React Native พัฒนาทีเดียวได้ทั้ง IOS, Android

และการสร้างเว็บที่ประมวลผลฝั่ง Server ที่เรียกว่า Server Side Rendering (SSR) ร่วมกับ Node.js, express เพื่อให้ได้ SEO ที่ดียิ่งขึ้น

ถ้าคุณเป็นโปรแกรมเมอร์ที่รักการเขียน JavaScript คุณจะรัก React ด้วยเช่นกัน

เรียนออนไลน์ได้ 24 ชั่วโมง ทุกทีทุกอุปกรณ์ ไม่มีหมดอายุ และมีทีมคอย Support ให้คำปรึกษาตลอด

ตลอดหลักสูตรครอบคลุมเครื่องมือและเทคโนโลยีมากมายได้แก่

หัวข้อที่ครอบคลุม
react
react-router
redux
redux-thunk
redux-form
babel
webpack
npm
JavaScript ES5, ES6
Next.js (Server Side Rendering)
และอื่นๆ

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

รีวิวจากผู้เรียน

Cheerapan A-Johnsingha

“พูดสรุปโดยรวมดีในเวลาที่มีจำกัด”

Nikorn Punduang

“สอนดีมากเข้าใจหลักการ และเทคนิคอื่นๆ ว้าวทุกตอนเลย”

Khongbeng

“สำหรับคนที่กำลังสนใจคอสนี้แล้วกำลังตัดสินใจลองอ่านรีวิวของผมนะครับ ผมว่าโอเคเลยนะสำหรับคนเริ่มต้นใหม่แบบผม ผมเป็นนักศึกษาที่ มหาลัยไม่ได้สอนความรู้ด้านนี้ผมจึงต้องลงทุนซื้อคอสมาเรียนเพื่อหาความรู้เพิ่มเติมเอง ในราคานี...”

Thanwadon chomngam

“ผมไม่มี พื้นฐานในการเขียน www เลย ดูแล้ว เข้าใจขึ้นเยอะ เลยครับ เคยหาหนังสืออ่าน ก้อไม่เข้าใจ เท่าดู คลิปนี้ ครับ”

นพพร ยศประสงค์

“สอนดีมากครับ เข้าใจง่าย ต่อยอดได้เลย อยากให้มี React Native อีกคอร์สครับ”

khomgrich khongpim

“เนื้อหาครบ อธิบายเป็นขั้นตอนเข้าใจง่าย สามารถใช้งานได้จริง”

ดูรีวิวทั้งหมด

เนื้อหาหลักสูตร

สไลด์คอร์ส

สไลด์คอร์ส ฝึกสร้างเว็บด้วย React อย่างมือโปร 1
สไลด์คอร์ส ฝึกสร้างเว็บด้วย React อย่างมือโปร1 / 8

ทำความรู้จัก React

  • React คืออะไร ?
  • Component Based Architecture
  • ทำไมถึงต้องเลือก React ?
  • Single Page Applications (SPAs)

เตรียมเครื่องให้พร้อมก่อนเริ่มพัฒนาเว็บด้วย React

  • ติดตั้ง Visual Studio Code
  • ติดตั้ง Node.js
  • การติดตั้ง Nodemon
  • npm (Node Package Manager)
  • คำสั่ง npm พื้นฐาน
  • Source Code สำหรับคอร์ส "ฝึกสร้าง เว็บ ด้วย React อย่างมือโปร"

ปูพื้น Javascript สมัยใหม่ ES5, ES6 ก่อนเขียน React

  • let & var & const
  • Multi-line String & Expression interpolation
  • Destructuring assignment
  • Rest parameters
  • Spread Operators
  • Default Parameters
  • Class
  • Object
  • Arrow Functions
  • Array Functions
  • Modules
  • Imports และ Exports

เริ่มต้นใช้ React สร้างเว็บไซต์

  • สร้างโปรเจคเริ่มต้นด้วย create-react-app
  • ส่วนประกอบต่างๆ ของ React
  • โครงสร้างของ Folder ของ React
  • JSX
  • การสร้าง Functional Components
  • การใช้งาน Props
  • การสร้าง Class Components
  • การใช้งาน State
  • Lifecycle ของ Components
  • สรุป Components ใน React

กำหนด Class และ Style ให้กับ React Components & Elements

  • React + Bootstrap Framework
  • การติดตั้ง Bootstrap Framework ใน React
  • กำหนด Class ด้วย className
  • การใช้ Inline Styles
  • การ Load ข้อมูล JSON
  • ออกแบบ Components แบบ Composition
  • Lists และ Keys

การจัดการ Events ของ React Components & Elements

  • Handling Events ด้วย Methods
  • การใช้งาน Handling Events
  • Event Object
  • Conditional Rendering
  • การอ้างอิง Methods ระหว่าง Components

การรับส่งข้อมูลผ่าน API ด้วย React

  • API (Application Programming Interface)
  • สร้าง Rest API ด้วย JSON Server
  • การรับข้อมูลผ่าน API ด้วย HTTP GET
  • การรับข้อมูลผ่าน API ด้วย Axios
  • การส่งข้อมูลผ่าน API ด้วย HTTP POST
  • การใส่ข้อความแจ้งเตือน

สร้างเว็บหลายหน้าและจัดการเส้นทางด้วย React Router

  • Routing และ Single Page Applications
  • ติดตั้ง React Router และปรับโครงสร้าง Project
  • Home Page | /
  • About Page | /about
  • Orders Page | /orders
  • Products Page | /products
  • <Link> VS <a>
  • 404 Not Found
  • การใช้ withRouter และ Route Props

จัดการ State ด้วย Redux

  • ทำไมต้องใช้ Redux ?
  • โครงสร้างและการทำงาน Redux
  • ติดตั้ง Redux
  • React + Redux : Store
  • React + Redux : Reducers #1
  • React + Redux : Actions #1
  • React + Redux : Reducers #2
  • React + Redux : Actions #2
  • React + Redux : connect #1
  • React + Redux : connect #2
  • React + Redux : สรุป

จัดการ Form กรอกข้อมูลด้วย Redux Form

  • การใช้ Form บน React
  • Redux Form
  • การตั้งค่า Form reducer
  • สร้าง Form component
  • Product Edit Page | /products/add และ /products/edit/:id
  • การใช้ Field Component #1
  • การใช้ Field Component #2
  • Validating Forms
  • การแสดง Errors ให้กับ Users
  • อัพเกรด Actions และ Reducers
  • การจัดการ Form Submit
  • กำหนดค่าเริ่มต้นให้กับ Form
  • การใส่ข้อความแจ้งเตือน ให้กับ Users

Deploying นำเว็บไซต์ขึ้น Online

  • environment variable ของ React
  • Build เว็บแอพพลิเคชั่น React สำหรับขึ้น Server

Server Side Rendering ด้วย React

  • Server Side Rendering
  • แนะนำให้รู้จัก Next.js
  • การติดตั้ง Next.js
  • การสร้างเว็บด้วย Next.js และ React
  • การใช้ <Head>
  • เปลี่ยนหน้าด้วย <Link>
  • props.childrend และการจัด Layout บนหน้าเว็บ
  • getInitialProps และการรับข้อมูลจาก API
  • นำข้อมูลที่ได้จาก API แสดงผลบนหน้าเว็บ
  • การปรับแต่งหน้า Error
  • การกำหนด Style ด้วย <style jsx>
  • การปรับแต่ง URL ด้วย Custom Server
  • ทดสอบ URL ที่ปรับแต่งโดย Custom Server
  • การ Importing CSS
  • การ Importing Sass

Bonus : การช่วยเหลือ แก้ปัญหา ตอบคำถาม เนื้อหาต่างๆ ภายในคอร์ส

  • การช่วยเหลือ แก้ปัญหา ตอบคำถาม เนื้อหาต่างๆ ภายในคอร์ส

ข้อจำกัด / ข้อกำหนด

  • คอมพิวเตอร์ และ อินเตอร์เน็ต
  • HTML + CSS + JAVASCRIPT ขั้นพื้นฐาน

หลักสูตรนี้เหมาะกับ

  • นักพัฒนาเว็บที่ต้องการเพิ่มทักษะด้าน Frontend Framework สมัยใหม่
  • ผู้ที่ต้องการเปลี่ยนสายงานมาเป็นโปรแกรมเมอร์สายพัฒนาเว็บไซต์
  • นักเรียน นักศึกษา ที่สนใจทำเว็บไซต์สมัยใหม่
  • คนที่ต้องการเขียนเว็บ เพื่อหารายได้เสริมหรือรายได้หลัก
  • คนที่ต้องการสร้างเว็บไซต์ ไว้ใช้เอง
  • หัวหน้าทีม ที่ต้องการนำเว็บไซต์สมัยใหม่ไปใช้ทำโปรเจคต่างๆ
  • เจ้าของกิจการ ที่ต้องการนำเว็บไซต์ไปใช้ในธุรกิจ

ผู้สอน

Instructor
Olan Samritjiarapon

Olan Samritjiarapon

Full Stack Developer

ดูโปรไฟล์บน Udemy

Instructor Bio

สวัสดีครับ ผมนอร์ธเป็นนักพัฒนาซอฟต์แวร์ จบวิศวกรรมคอมพิวเตอร์จาก King Mongkut's Institute of Technology Ladkrabang ชอบเรียนรู้ทดลองเทคโนโลยีใหม่ๆ อยู่เสมอ

ปัจจุบันเป็น Full Stack Developer พัฒนา Web Application มาประมาณ 10+ ปี อยู่กับ Node.js, React, PHP, Java, J2EE, Web Service, Docker และ Firebase ทำด้าน Mobile Application ฝั่ง IOS, Android ประมาณ 8 ปี (Swift, React Native, Kotlin, Flutter) ร่วมถึงการทำ Infrastucture วางเครื่อง Server และตั้งค่าระบบ Cloud (AWS, Digital Ocean, Heroku, Google Cloud Platform)

ผมเป็นโปรแกรมเมอร์ที่ชอบการสอน แชร์ ถ่ายทอดประสบการณ์ต่างๆ ที่เคยทำมา จึงเริ่มเป็นติวเตอร์สอนเขียน โปรแกรมตั้งแต่ตอนเรียน ปัจจุบันเป็นวิทยากรพิเศษให้องค์กรรัฐและมหาวิทยาลัยต่างๆ หวังว่าประสบการณ์ ของผมที่ถ่ายทอดผ่านคอร์สต่างๆ จะช่วยเติมเต็มความรู้และเป็นก้าวนึงที่ช่วยให้ฝันในการทำ Application ของคุณเป็นจริง

เริ่มเรียนหลักสูตรนี้

ราคาโปรโมชั่น

฿2,200฿1,600
ระดับความยากPro
ระยะเวลาเรียน9.5 ชม.
การเข้าถึงตลอดชีพ
คะแนนเฉลี่ย4.59 (482 รีวิว)
สมัครผ่าน Udemyสมัครผ่าน LINE OAสมัครผ่าน Facebook Pageโทรสมัครเรียน

รับใบประกาศนียบัตรเมื่อเรียนจบ