React 101 – Front-End Web Development + AI Coding
รายละเอียด
React 101 – Front-End Web Development + AI Coding คอร์สเรียนเขียนเว็บไซต์หน้าบ้านด้วย React สำหรับมือใหม่ที่ไม่เคยเขียนโค้ดมาก่อน เรียนรู้ตั้งแต่ติดตั้งโปรเจกต์ด้วย create-react-app และเข้าใจโครงสร้าง React, เขียน JSX, สร้าง Component, จัดการ State และ Event Handling, ทำเงื่อนไขและลูปการแสดงผล, ตกแต่งหน้าตาด้วย CSS, Bootstrap หรือ Tailwind, เพิ่ม Navigation หลายหน้าเว็บด้วย React Router, ดึงข้อมูลจาก Backend API (เช่น Django REST) ด้วย fetch() หรือ axios, และปิดท้ายด้วยการ Deploy เว็บขึ้น Vercel/Netlify พร้อมจดโดเมนของตัวเอง พิเศษ! คอร์สนี้ลุงจะสอนเทคนิคการใช้ AI อย่าง ChatGPT, Copilot, Gemini, Claude, Deepseek และ Grok ช่วยเขียนโค้ด, แนะนำ UI, แก้บั๊ก และต่อยอดฟีเจอร์แบบทันใจ ทำให้คุณเขียนเว็บได้เร็วขึ้นหลายเท่าและเข้าใจพื้นฐานที่นำไปต่อยอดได้จริงในโลกการทำงาน!
>Intro to Web Front-End + React Setup
-ความหมายของ Front-End / Back-End / Full Stack
-React คืออะไร ทำไมจึงนิยมในโลกจริง
-ความแตกต่างระหว่าง JavaScript ปกติกับ React
-ติดตั้ง Node.js และ npm
-การใช้ create-react-app เพื่อเริ่มโปรเจกต์
-โครงสร้างไฟล์พื้นฐานใน React (เช่น src, public, App.js)
-การรันเว็บด้วยคำสั่ง npm start
-การใช้ AI เช่น ChatGPT หรือ Gemini ช่วยตั้งค่าเบื้องต้น
-แนะนำการใช้ VSCode + Extensions ที่จำเป็นสำหรับ React
>JSX & React Components
-JSX คืออะไร และข้อแตกต่างจาก HTML ธรรมดา
-การเขียน Component แบบ Function (Functional Component)
-การส่ง props เข้า Component
-การจัด Component ให้อยู่เป็นหมวดหมู่ (Reusable Components)
-การ render ตัวแปรใน JSX
-การใช้ Fragment (<>...)
-การฝึกเขียน Component UI เช่น ปุ่ม, การ์ด, รายการ
-การใช้ AI ช่วย generate Component จากคำอธิบาย
-เปรียบเทียบการเขียน Component ด้วยคน vs AI
>React State & Event Handling
-ความเข้าใจเรื่อง State คืออะไร
-การใช้ useState() Hook
-การเปลี่ยนค่า State และ rerender
-การจัดการ Event เช่น onClick, onChange
-การรับค่าจาก input field
-การสร้าง Form และเก็บค่าผู้ใช้งาน
-การป้องกัน submit reload page (e.preventDefault())
-AI ช่วยเขียนฟังก์ชันรับข้อมูลจากผู้ใช้
-การใช้ DevTools ตรวจสอบค่าที่อยู่ใน State
>Conditional Rendering & Lists
-การเขียนเงื่อนไขใน JSX ด้วย if และ ternary (? :)
-การ render รายการข้อมูลด้วย .map()
-การใช้ key ให้แต่ละ element ใน list
-การจัดการกับข้อมูลใน Array เช่น push, delete
-การ render เฉพาะบาง component เมื่อตรงเงื่อนไข
-การจัดกลุ่ม List ในกล่องแบบ card หรือ table
-การใช้ checkbox, toggle, filter รายการ
-AI ช่วย generate ตัวอย่าง list และเงื่อนไข
-Workshop: สร้าง To-Do List ที่เพิ่ม/ลบ/เช็คได้
>Styling in React
-การใช้ CSS ปกติใน React (App.css)
-การใช้ inline styles กับ JSX
-ความเข้าใจเรื่อง className แทน class
-การใช้ CSS Modules เพื่อแยกสไตล์แต่ละ Component
-การติดตั้ง Bootstrap และใช้ใน React
-การใช้ Tailwind CSS เบื้องต้น
-การจัด Layout เช่น Grid / Flexbox
-การใช้ AI generate style หรือ theme ได้รวดเร็ว
-Workshop: แต่งหน้าเว็บ Login ให้สวย
>React Router & Navigation
-ติดตั้ง React Router ด้วย npm install react-router-dom
-ความเข้าใจเรื่อง SPA (Single Page Application)
-การสร้างหลายหน้า (Home, About, Contact)
-การใช้
-การสร้าง Navigation Bar หรือ Menu
-การใช้ Link แทน
-การใช้ useNavigate() เพื่อเขียน redirect
-AI ช่วย generate Routing Table และ UI Menu
-Workshop: เว็บ 3 หน้าที่ลิงก์ถึงกัน
>การเชื่อมต่อ Backend (Django API)
-พื้นฐาน HTTP Requests: GET, POST, PUT, DELETE
-การใช้ fetch() และ axios ใน React
-การใช้ useEffect() เพื่อโหลดข้อมูลจาก API
-การแสดงผลข้อมูลที่ได้จาก API
-การสร้าง Form เพื่อส่งข้อมูลไปยัง Backend
-การจัดการ Loading, Error, Success
-การใช้ AI ช่วยเขียน API call และแก้บั๊ก
-การเชื่อม React กับ Django REST Framework
-Workshop: Blog ที่ดึงข้อมูลจาก Django
>โปรเจกต์จริง + Deploy เว็บ
-สร้างโปรเจกต์จริง (Blog / Portfolio / ระบบจองเวลา)
-ออกแบบ Layout และ UX flow ของเว็บ
-ใช้ AI ช่วย generate Component แบบเต็มหน้า
-ปรับหน้าตาให้ Responsive สำหรับมือถือ
-Build แอปด้วย npm run build
-Deploy เว็บไปยัง Vercel / Netlify
-ตั้งค่า domain และ certificate HTTPS
-สรุปภาพรวมการทำงานร่วมกับ Backend
-แนะนำแนวทางการพัฒนาเว็บระดับถัดไป (Next.js, Redux)
<<<วันเวลาเรียน>>>
เรียนออนไลน์ผ่านไลฟ์ในกลุ่มเฟสบุ๊ค ทุกวันเสาร์เวลา 13.00-15.00 น. ยาว 8 สัปดาห์(ดูย้อนหลังได้เลยหลังจบไลฟ์) เริ่มเสาร์ที่ 16 สิงหาคม 2568
<<<ค่าลงทะเบียนปกติ 1960 บาท ลดให้พิเศษ! early bird 75% >>>
สำหรับ 50 คนแรก จ่ายเพียง 490 บาทเท่านั้น!
กดสมัครทางนี้ได้เลยจ้าาา
-----วิธีสมัคร------
1-กรอกข้อมูลตามแบบฟอร์มนี้ https://www.uncle-engineer.com/course/react-101 > 2- โอนชำระผ่านบัญชีด้านล่างแล้วแนบสลิปสมัครแล้วกดส่ง > 3-รอรับอีเมลภายใน 24 ชั่วโมง
-----------------
ชำระค่าใช้จ่ายผ่าน…
บัญชี ออมทรัพย์ ธนาคารกรุงเทพ สาขา สยามพารากอน
ชื่อบัญชี: บริษัท คอนส์ โรโบติกส์ จำกัดเลขบัญชี:
<<<< 855-0-65158-5 >>>>หรือ
พร้อมเพย์ 0105561008411 ชื่อบัญชี: บริษัท คอนส์ โรโบติกส์ จำกัด
สอบถามข้อมูลเพิ่มเติมทางเพจ "ลุงวิศวกร สอนคำนวณ" https://www.facebook.com/UncleEngineer/ หรือไลน์แอด @uncleengineer
-------------------
ราคาปกติ: 1,960 บาท
ส่วนลดบุคคลทั่วไป ลด 75% เหลือ:
490 บาท
สมัครเรียนกรอกแบบฟอร์มทางนี้
