คอมโพเนนต์และ JSX ทำงานอย่างไรใน React Native?

Question

Accepted Answer

React Native ใช้ **โมเดลคอมโพเนนต์และ JSX ของ React** — สร้าง UI จาก **คอมโพเนนต์** ที่นำกลับมาใช้ซ้ำได้ซึ่งคืนค่า JSX หากคุณรู้ React สำหรับเว็บ ความรู้นี้โอนย้ายมาได้โดยตรง ความแตกต่างหลักคือการใช้คอมโพเนนต์ native แทน HTML element ## คอมโพเนนต์และ JSX ```jsx // a functional component returns JSX describing the UI (using RN core components) function Greeting({ name }) { // receives props return ( Hello, {name}! {/* JSX with an embedded expression */} ); } // compose components (like React for web) function App() { return ( {/* reuse the component */} ); } ``` คอมโพเนนต์คือชิ้นส่วน UI ที่นำกลับมาใช้ซ้ำได้ (ฟังก์ชันที่คืนค่า JSX) รับ **props** (อินพุต) และประกอบเป็นโครงสร้างแบบต้นไม้ — เหมือนกับ React สำหรับเว็บทุกประการ แต่ใช้คอมโพเนนต์ native ## Props และ state (แนวคิดของ React) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (useState hook) return ( setCount(count + 1)}> Count: {count} {/* re-renders when state changes */} ); } ``` **Props** ส่งข้อมูลเข้าไปในคอมโพเนนต์ ส่วน **state** (ผ่าน `useState`) เก็บข้อมูลที่เปลี่ยนแปลงได้ซึ่งกระตุ้นให้เกิดการ re-render — เป็นโมเดล React เดียวกันกับบนเว็บ ## ความรู้ React โอนย้ายมาได้ ```text ✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys — all the same as React for web ✓ The main difference: native components (View/Text) instead of HTML; styling differs → React developers can apply most of their knowledge directly to React Native. ``` ## ทำไมจึงสำคัญ การเข้าใจว่าคอมโพเนนต์และ JSX ทำงานอย่างไรใน React Native เป็นพื้นฐานสำคัญ เพราะ **React Native สร้างขึ้นบนโมเดลคอมโพเนนต์ของ React** การเข้าใจมันจึงเป็นสิ่งจำเป็น และข้อได้เปรียบสำคัญคือ **ความรู้ React โอนย้ายมาได้โดยตรง** คอมโพเนนต์ (ชิ้นส่วน UI ที่นำกลับมาใช้ซ้ำได้ซึ่งคืนค่า JSX รับ props เป็นอินพุต และประกอบเป็นโครงสร้างต้นไม้) และ JSX (ไวยากรณ์ที่อธิบาย UI ด้วยนิพจน์ฝังอยู่) คือรากฐานของการพัฒนา React Native — เหมือนกับ React สำหรับเว็บ การเข้าใจ **props** (การส่งข้อมูลเข้าไปในคอมโพเนนต์) และ **state** (ผ่าน hook `useState` เก็บข้อมูลที่เปลี่ยนแปลงได้ซึ่งกระตุ้นการ re-render) เป็นสิ่งจำเป็น เพราะแนวคิด React เหล่านี้คือวิธีที่คอมโพเนนต์ React Native รับข้อมูลและจัดการการเปลี่ยนแปลง — เหมือนกับ React บนเว็บทุกประการ ข้อสังเกตสำคัญคือ **ความรู้ React โอนย้ายมาได้**: คอมโพเนนต์, JSX, props, state, hooks (useState, useEffect และอื่น ๆ), composition และ keys ทั้งหมดทำงานเหมือนกับใน React สำหรับเว็บ โดยมีความแตกต่างหลักคือการใช้คอมโพเนนต์ native (View, Text) แทน HTML และการจัดสไตล์ที่ต่างออกไป ความสามารถในการโอนย้ายนี้เป็นเหตุผลสำคัญที่ทำให้ React Native น่าสนใจ — นักพัฒนา React/เว็บจำนวนมากสามารถนำความรู้ที่มีอยู่ส่วนใหญ่มาใช้สร้างแอปมือถือ native ได้โดยตรง ด้วยช่วงเรียนรู้ที่ค่อนข้างสั้นซึ่งเน้นที่คอมโพเนนต์ native และรายละเอียดเฉพาะแพลตฟอร์ม เนื่องจาก React Native โดยพื้นฐานแล้วคือ React (คอมโพเนนต์, JSX, props, state, hooks) ที่นำมาใช้กับ UI แบบ native และการเข้าใจโมเดลนี้เป็นสิ่งจำเป็นต่อการสร้างแอป React Native พร้อมตระหนักว่าความรู้ React โอนย้ายมาได้โดยตรง (ข้อได้เปรียบสำคัญ) ดังนั้นการเข้าใจคอมโพเนนต์และ JSX ใน React Native จึงเป็นความรู้พื้นฐานที่จำเป็น — โมเดลการเขียนโปรแกรมหลักของ React Native ที่จำเป็นต่อการสร้างแอป และมีคุณค่าเป็นพิเศษในการเน้นให้เห็นว่าทักษะ React/เว็บนำมาใช้กับการพัฒนามือถือด้วย React Native ได้โดยตรงเพียงใด