# พื้นฐาน React (React Native)

> JSX, คอมโพเนนต์, props, state, อีเวนต์, การเรนเดอร์แบบมีเงื่อนไข, ลิสต์และ keys

- 20 คำถามสัมภาษณ์
- Junior
- [คำถามสัมภาษณ์: React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions.md)

## 1. JSX ใน React คืออะไร?

**คำตอบ**

JSX คือส่วนขยายทางไวยากรณ์ของ JavaScript ที่ช่วยให้เขียนโค้ดคล้าย HTML ได้โดยตรงภายใน JavaScript โดยจะถูกแปลง (transpile) เป็นการเรียกฟังก์ชัน React.createElement() ด้วยเครื่องมืออย่าง Babel JSX ทำให้โค้ดอ่านง่ายขึ้นและช่วยให้สร้าง UI ได้สะดวกขึ้นด้วยการรวมตรรกะและการเรนเดอร์ไว้ในไฟล์เดียวกัน

## 2. จะแทรกนิพจน์ JavaScript ลงใน JSX ได้อย่างไร?

**คำตอบ**

นิพจน์ JavaScript จะถูกแทรกลงใน JSX โดยการครอบด้วยวงเล็บปีกกาเดี่ยว ตัวอย่างเช่น หากต้องการแสดงตัวแปร name ให้เขียน {name} ไวยากรณ์นี้ช่วยให้สามารถแทรกค่าแบบไดนามิก เรียกใช้ฟังก์ชัน หรือประเมินนิพจน์ได้โดยตรงในการเรนเดอร์คอมโพเนนต์

## 3. ความแตกต่างหลักระหว่าง functional component และ class component ใน React คืออะไร?

**คำตอบ**

Functional component คือฟังก์ชัน JavaScript ธรรมดาที่คืนค่า JSX ในขณะที่ class component จะ extend React.Component และใช้เมธอด render() ตั้งแต่มีการเปิดตัว Hooks ใน React 16.8 functional component สามารถจัดการ state และ side effect ได้ ทำให้ class component มีความจำเป็นน้อยลงในโปรเจกต์สมัยใหม่

## มีอีก 17 คำถาม

- prop ใน React คืออะไร?
- state ใน React คืออะไรและแตกต่างจาก props อย่างไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React Native อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-native/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/react-native-basics.md): 22 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-native/interview-questions/react-hooks.md): 20 คำถาม, Junior
- [TypeScript สำหรับ React และ React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/typescript-for-react-native.md): 22 คำถาม, Junior
- [คอมโพเนนต์และ API ของ React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-components-api.md): 20 คำถาม, Junior
- [การจัดสไตล์และเลย์เอาต์ใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-styling-layout.md): 18 คำถาม, Junior
- [การนำทางใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-navigation.md): 22 คำถาม, Mid-Level
- [การจัดการ State ใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-state-management.md): 24 คำถาม, Mid-Level
- [Networking และ API ใน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-networking-api.md): 20 คำถาม, Mid-Level
- [การคงอยู่ของข้อมูล](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-data-persistence.md): 20 คำถาม, Mid-Level
- [ฟอร์มและการตรวจสอบความถูกต้อง](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-forms-validation.md): 18 คำถาม, Mid-Level
- [แอนิเมชัน React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-animations.md): 22 คำถาม, Mid-Level
- [Native Modules & Bridge](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-native-modules.md): 20 คำถาม, Mid-Level
- [โค้ดเฉพาะแพลตฟอร์ม](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-platform-specific-code.md): 18 คำถาม, Mid-Level
- [สิทธิ์และ Device API](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-permissions-apis.md): 20 คำถาม, Mid-Level
- [Push Notifications](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-push-notifications.md): 18 คำถาม, Mid-Level
- [การทดสอบ React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-testing.md): 20 คำถาม, Mid-Level
- [การ Debug React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-debugging.md): 18 คำถาม, Mid-Level
- [Build & Deployment](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-build-deployment.md): 20 คำถาม, Mid-Level
- [Expo vs React Native Bare](https://sharpskill.dev/th/technologies/react-native/interview-questions/expo-vs-bare-rn.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-performance-optimization.md): 24 คำถาม, Senior
- [การจัดการหน่วยความจำ](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-memory-management.md): 20 คำถาม, Senior
- [Architecture Patterns](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-architecture-patterns.md): 22 คำถาม, Senior
- [React Native New Architecture](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-new-architecture.md): 24 คำถาม, Senior
- [แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัย](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-security-best-practices.md): 20 คำถาม, Senior
- [Offline-First Architecture](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-offline-first.md): 20 คำถาม, Senior
- [CI/CD React Native](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-ci-cd.md): 20 คำถาม, Senior
- [Monorepo และการแชร์โค้ด](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-monorepo-architecture.md): 18 คำถาม, Senior
- [หัวข้อขั้นสูง](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-advanced-topics.md): 22 คำถาม, Senior
- [วงจรชีวิตแอปและการทำงานเบื้องหลัง](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-app-lifecycle-background.md): 20 คำถาม, Mid-Level
- [การยืนยันตัวตนและการจัดการเซสชัน](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-auth-session-management.md): 22 คำถาม, Mid-Level
- [Monitoring & Crash Reporting](https://sharpskill.dev/th/technologies/react-native/interview-questions/rn-monitoring-crash-reporting.md): 20 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-native/interview-questions/react-fundamentals