React คืออะไร คู่มือภาษาง่ายสำหรับผู้ที่ไม่ใช่โปรแกรมเมอร์

React คือไลบรารี JavaScript สำหรับสร้างส่วนติดต่อผู้ใช้ ซึ่งเป็นส่วนของแอปที่คนเห็นและคลิก คุณสร้างหน้าจอจากชิ้นส่วนที่นำกลับมาใช้ได้เรียกว่า คอมโพเนนต์ เช่น ปุ่ม การ์ดสินค้า หรือทั้งหน้า และ React จะทำให้หน้าจอตรงกับข้อมูลของคุณอยู่เสมอ เมื่อข้อมูลเปลี่ยน React จะอัปเดตเฉพาะส่วนของหน้าที่ขึ้นกับข้อมูลนั้น React ถูกสร้างขึ้นที่ Facebook (ปัจจุบันคือ Meta) เป็นโอเพนซอร์ส และเป็นหนึ่งในวิธีการสร้างแอปเว็บที่ใช้กันแพร่หลายที่สุด

ทำไมเรื่องนี้สำคัญเมื่อสร้างด้วย AI

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

คุณไม่จำเป็นต้องเขียน React เพื่อสร้างด้วย AI แต่การรู้เล็กน้อยช่วยให้คุณ:

• อธิบายการเปลี่ยนแปลงได้แม่นยำ "เปลี่ยนคอมโพเนนต์ ProductCard ให้ราคาเป็นตัวหนา" ชัดเจนกว่า "ทำให้ราคาเด่นขึ้นตรงไหนสักแห่ง"
• เข้าใจข้อผิดพลาด ข้อความอย่าง "Cannot read properties of undefined" หรือ "Too many re-renders" จะเข้าใจได้มากขึ้น
• เลือกอย่างสมเหตุสมผล แอป React ธรรมดาเรนเดอร์ในเบราว์เซอร์ ซึ่งส่งผลต่อการมองเห็นในการค้นหาและความเร็วในการโหลดครั้งแรก การรู้เรื่องนี้ช่วยให้คุณตัดสินใจได้ว่าเมื่อไรควรขอการตั้งค่าอื่น
• ทำงานกับนักพัฒนาในภายหลัง React เป็นทักษะที่พบบ่อย นักพัฒนาจึงมักเข้าใจโค้ด React ได้ทันที

ตัวอย่างในชีวิตประจำวัน

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

คอมโพเนนต์ของ React คือบล็อกเหล่านั้น คอมโพเนนต์ Button ถูกใช้ภายใน ProductCard ซึ่งถูกใช้ภายใน ProductGrid ซึ่งเป็นส่วนหนึ่งของ ShopPage เปลี่ยน Button ครั้งเดียว และทุกปุ่มในแอปจะเปลี่ยนตาม

อีกครึ่งหนึ่งของการเปรียบเทียบ: ลองนึกภาพว่าโมเดล LEGO สร้างตัวเองใหม่ทุกครั้งที่คุณเปลี่ยนคำแนะนำ นั่นคือเทคนิคอีกอย่างของ React คุณอธิบายว่าหน้าจอควรหน้าตาเป็นอย่างไรกับข้อมูลปัจจุบัน และ React จะคิดเองว่าต้องเปลี่ยนอะไรบนหน้า

แนวคิดหลัก

คอมโพเนนต์

คอมโพเนนต์คือฟังก์ชัน JavaScript ที่คืนค่าชิ้นส่วนของส่วนติดต่อ เอกสารของ React อธิบายคอมโพเนนต์ว่าเป็นชิ้นส่วนของ UI ที่มีตรรกะและรูปลักษณ์ของตัวเอง ชื่อคอมโพเนนต์ขึ้นต้นด้วยตัวอักษรพิมพ์ใหญ่

JSX

คอมโพเนนต์มักเขียนด้วย JSX ซึ่งดูเหมือน HTML ผสมอยู่ใน JavaScript:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX เป็นทางเลือก แต่เอกสารของ React ระบุว่าโปรเจกต์ส่วนใหญ่ใช้มัน มันถูกแปลงเป็น JavaScript ธรรมดาก่อนรันในเบราว์เซอร์

Props

Props คือข้อมูลนำเข้าที่ส่งเข้าไปในคอมโพเนนต์ เหมือนการตั้งค่าบนชิ้นส่วนที่นำกลับมาใช้ได้:

<ProductCard name="Lavender Candle" price={24} />

ProductCard เดียวกันสามารถแสดงสินค้าใดก็ได้

State

State คือข้อมูลที่คอมโพเนนต์จดจำและสามารถเปลี่ยนแปลงได้ขณะแอปทำงาน เช่น เมนูเปิดอยู่หรือไม่ มีอะไรพิมพ์ในช่องค้นหา หรือมีสินค้ากี่ชิ้นในตะกร้า เมื่อ state เปลี่ยน React จะเรนเดอร์คอมโพเนนต์ใหม่เพื่อให้หน้าจอตรงกัน

Hooks

Hooks คือฟังก์ชันที่ชื่อขึ้นต้นด้วย use เช่น useState (จดจำค่า) และ useEffect (รันโค้ดหลังการเรนเดอร์ เช่น ดึงข้อมูล) คุณจะเห็นมันได้ทุกที่ในโค้ด React ที่ AI สร้างขึ้น

ตัวอย่างประกอบ: ตัวนับตะกร้าสินค้า

สมมติว่าร้านค้าออนไลน์ของคุณมีปุ่ม "Add to cart" และไอคอนตะกร้าที่แสดงจำนวนสินค้า ใน React จะหน้าตาประมาณนี้:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

สิ่งที่เกิดขึ้นเมื่อผู้ซื้อคลิก "Add to cart":

1. onClick ของปุ่มเรียก onAdd ซึ่งเรียก setCartCount
2. React อัปเดต state cartCount จาก 0 เป็น 1
3. React เรนเดอร์ Shop ใหม่ โดยส่ง count={1} เข้าไปใน CartIcon
4. หน้าจอแสดง "Cart (1)" ไม่มีใครเขียนโค้ดที่บอกว่า "หาข้อความของตะกร้าแล้วเปลี่ยนมัน" หน้าจอทำตามข้อมูล

นอกจากนี้ยังมีข้อจำกัดให้สังเกต ตัวนับนี้อยู่ในหน่วยความจำของเบราว์เซอร์ รีเฟรชหน้าแล้วจะกลับไปเป็น 0 หากต้องการเก็บตะกร้าไว้ คุณต้องบันทึกมันไว้ในที่ที่คงทน เช่น คุกกี้ พื้นที่เก็บข้อมูลของเบราว์เซอร์ หรือฐานข้อมูล ผ่านแบ็กเอนด์ของคุณ React จัดการหน้าจอ แต่ไม่ได้เก็บข้อมูลของคุณ

React อยู่ตรงไหนในเว็บแอป

แอป "Vite + React" เรนเดอร์ในเบราว์เซอร์ (เป็น single-page app) แอป Next.js สามารถเรนเดอร์หน้าบนเซิร์ฟเวอร์ก่อน ซึ่งช่วยทั้งเครื่องมือค้นหาและความเร็วในการโหลดครั้งแรก

คำศัพท์ที่อธิบายแล้ว

ข้อผิดพลาดและความเข้าใจผิดที่พบบ่อย

• "React เป็นภาษาโปรแกรม" มันคือไลบรารีที่เขียนและใช้งานจาก JavaScript (หรือ TypeScript)
• "React เก็บข้อมูลของฉัน" State อยู่ในเบราว์เซอร์และหายไปเมื่อรีเฟรช ข้อมูลที่คงทนต้องใช้แบ็กเอนด์และฐานข้อมูล
• ใส่ความลับในโค้ด React ทุกอย่างในแอป React จะถูกส่งไปยังเบราว์เซอร์ของผู้เข้าชม API key ที่อยู่ตรงนั้นจึงเป็นสาธารณะ เก็บไว้บนเซิร์ฟเวอร์
• "แอป React ไม่สามารถติดอันดับการค้นหาได้" การเรนเดอร์ฝั่งไคลเอนต์อย่างเดียวอ่อนกว่าสำหรับการค้นหา แต่การ prerender หรือเรนเดอร์บนเซิร์ฟเวอร์แก้ได้ส่วนใหญ่
• คอมโพเนนต์ขนาดยักษ์ คอมโพเนนต์เดียวที่ 1,000 บรรทัดเปลี่ยนแปลงอย่างปลอดภัยได้ยาก ทั้งสำหรับคนและ AI ควรขอให้แยกเป็นชิ้นเล็กลง
• คิดว่าเว็บแอป React คือแอปมือถือ มันทำงานในเบราว์เซอร์ รวมถึงบนมือถือ แต่ไม่ใช่แอปใน App Store

สิ่งที่ควรขอจากเครื่องมือสร้างแอปด้วย AI

• "แยกหน้านี้เป็นคอมโพเนนต์เล็กๆ ที่มีชื่อ และบอกว่าแต่ละตัวอยู่ในไฟล์ไหน"
• "ทำให้คอมโพเนนต์ ProductCard นำกลับมาใช้ได้ โดยมี name, price และ image เป็น props"
• "บันทึกตะกร้าลงฐานข้อมูลเพื่อให้อยู่รอดเมื่อรีเฟรช"
• "เก็บ API key ทั้งหมดไว้บนเซิร์ฟเวอร์ โค้ด React ควรเรียก API ของเราเอง"
• "เพิ่มสถานะกำลังโหลดและข้อผิดพลาดสำหรับข้อมูลที่มาจากเซิร์ฟเวอร์"
• "หากการมองเห็นในการค้นหาสำคัญสำหรับหน้าเหล่านี้ ให้ prerender หรือใช้การตั้งค่าแบบเรนเดอร์บนเซิร์ฟเวอร์"
• "อธิบายด้วยภาษาง่ายๆ ว่าข้อผิดพลาดนี้หมายความว่าอะไร และมาจากคอมโพเนนต์ใด"

สำหรับภาพรวมที่กว้างกว่า ดู frontend กับ backend และสำหรับการตรวจสอบโค้ดที่ AI เขียน ดู วิธีตรวจสอบโค้ดที่สร้างด้วย AI

React ใน Mythex

เว้นแต่คุณจะขอเป็นอย่างอื่น Mythex จะเริ่มโปรเจกต์ใหม่ด้วย Vite + React + TypeScript + Tailwind โดยมีการแสดงตัวอย่างสดทำงานขณะคุณแชต คุณสามารถระบุการตั้งค่าอื่นใน prompt แรกได้ เช่น "ใช้ Next.js" หรือ "หน้า landing แบบ HTML ธรรมดา" และ Mythex จะเลือกจากสิ่งที่คุณเขียน ไม่มีหน้าตั้งค่าแยก หน้าเอกสาร วิธีที่เลือกเทคโนโลยี อธิบายตัวเลือก โปรแกรมแก้ไขโค้ดเป็นแบบอ่านอย่างเดียวในแพ็กเกจ Free ส่วนใน Pro คุณแก้โค้ด React ได้โดยตรง และส่งออกโปรเจกต์เพื่อทำงานต่อที่อื่นได้

คำถาม