สอนเทคนิคพื้นฐานในการเขียน React

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

รู้จัก React และแนวคิดหลัก

React เป็นไลบรารีที่พัฒนาโดย Facebook เน้นการสร้าง UI ที่สามารถตอบสนองผู้ใช้งานได้ดี โดยใช้แนวคิดของ component ซึ่งเป็นส่วนย่อยที่สามารถนำกลับมาใช้ใหม่ได้

แนวคิด Component-Based

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

JSX คืออะไร

JSX (JavaScript XML) เป็นรูปแบบการเขียนที่ผสมผสานระหว่าง HTML และ JavaScript ช่วยให้นักพัฒนาทำงานได้สะดวกขึ้น เช่น

function Hello() {
  return <h1>สวัสดี React</h1>;
}

เราสามารถแทรก JavaScript ลงไปได้โดยใช้โค้ดในวงเล็บปีกกา { }

เทคนิคพื้นฐานที่ควรรู้เมื่อเขียน React

1. การสร้างและใช้งาน Component

เริ่มต้นจากการสร้างฟังก์ชัน หรือ class ที่ใช้สร้าง component แล้วส่งกลับ JSX:

function Welcome(props) {
  return <h1>ยินดีต้อนรับ {props.name}</h1>;
}

• Props: คือค่าที่ส่งให้ component เพื่อใช้แสดงข้อมูล
• Reusable: Component เดียวกันสามารถเปลี่ยน Props เพื่อแสดงข้อมูลได้หลากหลาย

2. การจัดการ State

React ใช้ state เพื่อเก็บข้อมูลภายใน component ซึ่งสามารถเปลี่ยนแปลงและทำให้ส่วน UI อัปเดตอัตโนมัติ

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>คุณคลิก {count} ครั้ง</p>
      <button onClick={() => setCount(count + 1)}>คลิกฉัน</button>
    </div>
  );
}

React จะ re-render component ใหม่ทุกครั้งที่ state เปลี่ยน

3. การใช้ Effect Hook

useEffect ช่วยในการจัดการกับ side effects เช่น การดึงข้อมูล หรือปรับค่าหลังจาก render

import { useEffect } from 'react';

useEffect(() => {
  console.log('Component โหลดครั้งแรก');
}, []);

ในกรณีนี้ useEffect จะทำงานหลังจาก component ถูก load ครั้งแรกเท่านั้น

4. การจัดการ List และ Key

เมื่อแสดงรายการข้อมูล เช่น รายชื่อสินค้า หรือผู้ใช้งาน ควรกำหนด key ที่ไม่ซ้ำกันให้กับแต่ละรายการ เพื่อประสิทธิภาพที่ดีขึ้น

const items = ['แอปเปิ้ล', 'กล้วย', 'ส้ม'];

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

5. จัดการกับ Form และการป้อนข้อมูล

React ควบคุมฟอร์มผ่าน state ช่วยให้สามารถเข้าถึงและจัดการข้อมูลที่ผู้ใช้กรอกได้ง่าย

const [name, setName] = useState('');

return (
  <form>
    <input value={name} onChange={(e) => setName(e.target.value)} />
    <p>ชื่อของคุณคือ: {name}</p>
  </form>
);

โครงสร้างไฟล์พื้นฐานของโปรเจกต์ React

เมื่อเข้าใจเทคนิคพื้นฐานการเขียน React แล้ว คุณจะเห็นว่า React เป็นเครื่องมือที่มีพลังในการสร้าง UI ให้มีประสิทธิภาพมากขึ้น ไม่ว่าจะเป็น component-based, การจัดการ state หรือการรวม JavaScript เข้ากับ HTML ผ่าน JSX เทคนิคเหล่านี้คือสิ่งที่นักพัฒนาควรเรียนรู้และฝึกฝนสม่ำเสมอเพื่อก้าวสู่การพัฒนาแอปพลิเคชันในระดับที่ซับซ้อนยิ่งขึ้น

หากคุณยังไม่เคยลองเขียน React มาก่อน ลองเปิดเครื่องมือ Text Editor ที่คุณใช้ แล้วเริ่มต้นสร้าง component แรกของคุณได้เลย เพราะไม่มีวิธีไหนจะดีไปกว่าการลองทำจริง!