1. ความเข้าใจพื้นฐานของ JSX
JSX (JavaScript XML) เป็นไวยากรณ์ที่ใช้ใน React เพื่อเขียนโครงสร้าง UI ที่ดูคล้าย HTML แต่ทำงานร่วมกับ JavaScript ได้อย่างลงตัว

คุณสมบัติของ JSX:

• เขียน UI ได้ง่ายขึ้น: JSX ช่วยให้อ่านและเขียนโค้ดได้เหมือน HTML
• แปลงเป็น JavaScript: JSX จะถูกแปลงเป็นคำสั่ง JavaScript โดย Babel เพื่อให้เบราว์เซอร์เข้าใจ
• รองรับการเขียนแบบไดนามิก: สามารถใช้ตัวแปรหรือฟังก์ชันใน JSX ได้

ตัวอย่างโค้ด JSX

const element = <Text>Hello, React Native!</Text>;

ข้อควรระวัง:

• JSX ต้องมีแท็ก <View> หรือแท็กอื่นๆ ครอบไว้เสมอถ้ามีหลายองค์ประกอบ
• ทุกแท็กต้องปิดให้ครบ เช่น <Text></Text> หรือ <Text />

การใช้ JSX เพื่อสร้าง UI
JSX ใช้เพื่อสร้าง UI โดยกำหนดส่วนประกอบต่างๆ ของหน้าจอ เช่น View, Text, และ Image

ตัวอย่าง: สร้าง UI ด้วย JSX

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Welcome to React Native</Text>
      <Text style={styles.description}>
        This is an example of using JSX to build UI.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  description: {
    fontSize: 16,
    color: '#666',
    marginTop: 10,
  },
});

export default App;

คำอธิบายโค้ด:

• <View>: ใช้เป็นคอนเทนเนอร์ครอบองค์ประกอบต่างๆ
• <Text>: ใช้สำหรับแสดงข้อความ
• styles: ใช้ StyleSheet.create() เพื่อกำหนดสไตล์ให้กับองค์ประกอบ

การทำงานของ JSX ร่วมกับ JavaScript:
JSX สามารถใช้ JavaScript Expression ได้โดยการครอบไว้ด้วย {}

ตัวอย่าง: การใช้ตัวแปรใน JSX

const name = "React Native";

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <Text>Hello, {name}!</Text>
    </View>
  );
};

ตัวอย่าง: การใช้เงื่อนไขใน JSX

const isLoggedIn = true;

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      {isLoggedIn ? <Text>Welcome back!</Text> : <Text>Please log in.</Text>}
    </View>
  );
};

ข้อดีของการใช้ JSX:

1. กระชับและอ่านง่าย: เขียน UI ในรูปแบบที่คล้าย HTML
2. รวมโค้ดกับการออกแบบ: ทำให้ UI และ logic อยู่ในที่เดียวกัน
3. รองรับการแสดงผลแบบไดนามิก: ใช้ JavaScript ในการควบคุมการแสดงผล