ReactJS คือ ตอนที่ 1 : พื้นฐาน (Fundamentals) ของ ReactJS

1. องค์ประกอบ (Elements)
2. JSX – JavaScript XML
3. ส่วนประกอบ (Components)
   3.1 ส่วนประกอบของฟังก์ชัน (Function Components)
   3.2 ส่วนประกอบของคลาส (Class Components)
   3.3 ส่วนประกอบของส่วนประกอบ (Composition of Components)
   3.4 ส่วนประกอบและ Props (Components and Props)
   3.5 พลังของส่วนประกอบปฏิกิริยา (The Power of React Components)

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

1. องค์ประกอบ (Elements)

ในขอบเขตของ ReactJS องค์ประกอบ (Elements) คือหน่วยการสร้างที่เล็กที่สุด ซึ่งแตกต่างจากองค์ประกอบ DOM ของเบราว์เซอร์ องค์ประกอบ React เป็นวัตถุธรรมดาและราคาถูกในการสร้าง React DOM ดูแลการอัปเดต DOM เพื่อให้ตรงกับองค์ประกอบของ React พูดง่ายๆ ก็คือ อิลิเมนต์ (Elements)คือออบเจกต์ที่แสดงถึงส่วนหนึ่งของส่วนติดต่อผู้ใช้ (UI)

ตัวอย่างเช่น โค้ดต่อไปนี้ประกาศองค์ประกอบใน ReactJS:

const element = <h1>Hello, world</h1>;

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

2. JSX – JavaScript XML

JSX ย่อมาจาก JavaScript XML และเป็นส่วนขยายของไวยากรณ์สำหรับ JavaScript อาจทำให้คุณนึกถึงภาษาเทมเพลต แต่มาพร้อมกับพลังเต็มรูปแบบของ JavaScript JSX ออกแบบมาเพื่อใช้กับ ReactJS เพื่ออธิบายว่า UI ควรมีลักษณะอย่างไร

นี่คือนิพจน์ JSX อย่างง่าย:

const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;

ในตัวอย่างข้างต้น เราฝังนิพจน์ JavaScript nameไว้ในวงเล็บปีกกา JSX คอมไพล์เป็นการReact.createElement()โทรที่ส่งคืนองค์ประกอบ React ดังนั้นจึงเป็นส่วนสำคัญในการเขียนส่วนประกอบใน ReactJS

นี่คือองค์ประกอบเดียวกันโดยไม่ใช้ JSX:

const name = 'John Doe';
const element = React.createElement('h1', null, `Hello, ${name}`);

ตามที่เห็นข้างต้น JSX ให้ไวยากรณ์ที่อ่านได้ง่ายและใช้งานง่ายกว่ามากสำหรับการกำหนดองค์ประกอบของเรา ความง่ายและอ่านง่ายของ JSX เป็นหนึ่งในหลายๆ เหตุผลที่นักพัฒนาสนุกกับการทำเว็บ ReactJS และทำแอพ

3. ส่วนประกอบ (Components)

ส่วนประกอบ (Components) เป็นส่วนพื้นฐานของ ReactJS พวกเขาให้คุณแยก UI ออกเป็นส่วนๆ อิสระ ใช้ซ้ำได้ และคิดถึงแต่ละส่วนแยกกัน ตามแนวคิดแล้ว ส่วนประกอบต่างๆ ก็เหมือนกับฟังก์ชัน JavaScript พวกเขายอมรับอินพุตโดยพลการ (เรียกว่า “Props”) และส่งคืนองค์ประกอบ React ที่อธิบายถึงสิ่งที่ควรปรากฏบนหน้าจอ

ใน ReactJS มีส่วนประกอบสองประเภท – ส่วนประกอบของฟังก์ชันและส่วนประกอบของคลาส

3.1 ส่วนประกอบของฟังก์ชัน (Function Components)

ส่วนประกอบของฟังก์ชันคือฟังก์ชัน JavaScript อย่างง่ายที่ยอมรับ Props เป็นอาร์กิวเมนต์และส่งคืนองค์ประกอบปฏิกิริยา นี่คือตัวอย่าง:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ในตัวอย่างนี้ เรากำลังสร้างส่วนประกอบของฟังก์ชันชื่อ ‘ยินดีต้อนรับ’ ส่วนประกอบนี้รับวัตถุpropsเป็นอาร์กิวเมนต์และส่งกลับองค์ประกอบ JSX

3.2 ส่วนประกอบของคลาส (Class Components)

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

นี่คือตัวอย่างของส่วนประกอบของคลาส:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ในตัวอย่างนี้ เรากำลังสร้างส่วนประกอบของคลาสชื่อ ‘Welcome’ ซึ่งขยายReact.Component. เมธอดrenderส่งคืนองค์ประกอบ JSX

3.3 ส่วนประกอบของส่วนประกอบ (Composition of Components)

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

คอมโพเนนต์สามารถใช้ในเอาต์พุตของคอมโพเนนต์อื่นได้ ซึ่งคล้ายกับการใช้ฟังก์ชันหรือคลาสของ JavaScript นี่คือตัวอย่างเพื่ออธิบายสิ่งนี้:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ในAppคอมโพเนนต์ เราใช้Welcomeคอมโพเนนต์หลายครั้ง แต่ละครั้ง เราจะส่งชื่อที่แตกต่างกัน จากนั้น คอมโพเนนต์Appจะแสดงผลไปยัง DOM ผ่านReactDOM.render()เมธอด นี่คือตัวอย่างวิธีที่เราสามารถเขียนส่วนประกอบเพื่อสร้าง UI ที่ซับซ้อนขึ้นได้

โมเดลส่วนประกอบของ React นั้นทรงพลัง ช่วยให้คุณแสดง UI ที่สมบูรณ์และประกอบได้ เนื่องจากคอมโพเนนต์เป็นเหมือนฟังก์ชัน—พวกเขาสามารถรับอินพุตโดยพลการ (ในกรณีนี้คือ “Props”) และส่งคืนองค์ประกอบ React ที่อธิบายสิ่งที่ควรปรากฏบนหน้าจอ

3.4 ส่วนประกอบและ Props (Components and Props)

Props ย่อมาจาก Properties ใน ReactJS คล้ายกับอาร์กิวเมนต์ที่ส่งผ่านไปยังฟังก์ชันใน JavaScript ธรรมดา สิ่งเหล่านี้จะถูกส่งผ่านไปยังส่วนประกอบต่างๆ และช่วยให้คุณสร้างส่วนประกอบที่มีไดนามิกมากขึ้นและสามารถนำมาใช้ซ้ำได้

ในการส่งพร็อพไปยังส่วนประกอบ คุณต้องรวมเป็นแอตทริบิวต์เมื่อคุณแสดงผลส่วนประกอบ:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

ในตัวอย่างนี้ เรากำลังส่งnameเสาไปยังWelcomeส่วนประกอบ ภายในWelcomeส่วนประกอบ เราเข้าถึง Propsโดยใช้props.name.

Props เป็นแบบอ่านอย่างเดียว ไม่ว่าคุณจะประกาศส่วนประกอบเป็นฟังก์ชันหรือคลาส ส่วนประกอบนั้นจะต้องไม่แก้ไขส่วนประกอบของมันเอง นี่เป็นหลักการสำคัญใน ReactJS และเป็นสิ่งสำคัญสำหรับการรักษา UI และพฤติกรรมที่สอดคล้องกันในแอปพลิเคชันของคุณ

3.5 พลังของส่วนประกอบปฏิกิริยา (The Power of React Components)

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

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

ไม่เพียงแต่คุณสามารถทำเว็บ ReactJS และทำแอพเท่านั้น แต่คุณยังสามารถใช้ทำเว็บ ReactJS และทำแอพได้ด้วย ต้องขอบคุณเฟรมเวิร์กอย่าง React Native ด้วย React Native คุณสามารถใช้โมเดล React ที่ใช้คอมโพเนนต์เดียวกันเพื่อทำเว็บ ReactJS และทำแอพมือถือสำหรับ iOS และ Android

---

การทำความเข้าใจองค์ประกอบ JSX และส่วนประกอบใน ReactJS เป็นพื้นฐานในการใช้ไลบรารีอย่างมีประสิทธิภาพและชื่นชมกับปรัชญาการออกแบบ พวกมันก่อตัวเป็นรากฐานในการสร้างไลบรารี ReactJS ทั้งหมด เมื่อคุณเข้าใจแนวคิดหลักเหล่านี้แล้ว คุณจะสามารถทำเว็บ ReactJS และทำแอพที่ซับซ้อน แข็งแกร่ง และไดนามิกมากขึ้นได้

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

---

React คืออะไร (ReactJS)

ReactJS คือ ตอนที่ 2 : วงจรชีวิตของส่วนประกอบ (Component Lifecycle)