รีแอ็กต์เนทีฟ

รีแอ็กต์เนทีฟ () เป็นกรอบงานซอฟต์แวร์ส่วนต่อประสานกับผู้ใช้แบบต้นทางเปิดที่พัฒนาโดย เมตาแพลตฟอมส์ (เดิมคือ เฟซบุ๊ก) ใช้เพื่อพัฒนาแอปพลิเคชันสำหรับ แอนดรอยด์, แอนดรอยด์ ทีวี, ไอโอเอส, แมคโอเอส, ทีวีโอเอส, เว็บ, วินโดวส์, และ UWP โดยช่วยให้นักพัฒนาสามารถใช้กรอบงานรีแอ็กต์ ร่วมกับความสามารถของแพลตฟอร์มเฉพาะของระบบปฏิบัติการนั้น ใช้เพื่อพัฒนาแอปพลิเคชันแอนดรอยด์และไอโอเอสของ เฟซบุ๊ก, ไมโครซอฟท์ และชอปปิฟาย (Shopify) นอกจากนี้ยังใช้ในการพัฒนาแอปพลิเคชันเสมือนจริงของโอคูลัส (Oculus) อีกด้วย

 ประวัติ 
ในปี ค.ศ. 2012 มาร์ก ซักเคอร์เบิร์ก ให้ความเห็นว่า "ความผิดพลาดครั้งใหญ่ที่สุดที่เราทำในฐานะบริษัทคือการให้ความสำคัญกับเอชทีเอ็มแอล5 มากเกินไป แทนที่จะเป็นแบบเนทีฟ" การใช้เอชทีเอ็มแอล5 สำหรับเวอร์ชันอุปกรณ์เคลื่อนที่ของเฟซบุ๊ก ส่งผลให้แอปพลิเคชันไม่เสถียรและดึงข้อมูลได้ช้า เขาสัญญาว่าเฟซบุ๊กจะมอบประสบการณ์การใช้งานอุปกรณ์เคลื่อนที่ที่ดีขึ้นในเร็ว ๆ นี้

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

ในปี ค.ศ. 2015 หลังจากการพัฒนามาหลายเดือน เฟซบุ๊กได้เปิดตัวเวอร์ชันแรกสำหรับโครงแบบจาวาสคริปต์รีแอ็กต์ (React JavaScript Configuration) ในระหว่างการสัมมนาทางเทคนิค  คริสโตเฟอร์ เชโด (Christopher Chedeau) อธิบายว่าเฟซบุ๊กได้ใช้รีแอ็กต์เนทีฟในการผลิตสำหรับแอปพลิเคชันกลุ่ม (Group App) และแอปพลิเคชันจัดการโฆษณา (Ads Manager App) อยู่แล้ว

 การใช้งาน 
หลักการทำงานของรีแอ็กต์เนทีฟแทบจะเหมือนกับรีแอ็กต์ ยกเว้นว่ารีแอ็กต์เนทีฟจะไม่จัดการแบบจำลองอ็อบเจกต์เอกสาร (DOM) ผ่าน Virtual DOM  รีแอ็กต์เนทีฟทำงานในกระบวนการเบื้องหลัง (ซึ่งตีความจาวาสคริปต์ที่นักพัฒนาเขียนขึ้น) โดยตรงบนอุปกรณ์ปลายทาง และสื่อสารกับแพลตฟอร์มเฉพาะของระบบปฏิบัติการนั้น  ด้วยข้อมูลแบบอนุกรมผ่านบริดจ์แบบประมวลผลเป็นกลุ่มและไม่ประสานเวลา

ส่วนประกอบของรีแอ็กต์จะห่อหุ้มรหัสเนทีฟที่มีอยู่และโต้ตอบกับส่วนต่อประสานโปรแกรมประยุกต์เนทีฟผ่านทางการประกาศรูปแบบส่วนต่อประสานกับผู้ใช้และจาวาสคริปต์ของรีแอ็กต์ ไทป์สคริปต์ (TypeScript) มักใช้แทนจาวาสคริปต์ในแอปพลิเคชันรีแอ็กต์เนทีฟรุ่นใหม่เนื่องจากมีชนิดข้อมูลที่มีความปลอดภัยเพิ่มขึ้น

แม้ว่ารูปแบบการเขียนของรีแอ็กต์เนทีฟจะมีรูปแบบคล้ายกับแคสเคดดิงสไตล์ชีตส์ (CSS) แต่ไม่ได้ใช้เอชทีเอ็มแอล หรือซีเอสเอส แต่ข้อความจากเธรดจาวาสคริปต์จะถูกใช้เพื่อจัดการมุมมองแบบเนทีฟ เทลวินด์ (Tailwind) สามารถใช้งานร่วมกับรีแอ็กต์เนทีฟได้โดยใช้ปลั๊กอิน

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

 ตัวอย่าง 
โปรแกรมเฮลโลเวิลด์ ในรีแอ็กต์เนทีฟมีลักษณะดังนี้:

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

const HelloWorldApp = () => {
  const [count, setCount] = React.useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text>Hello world!</Text>
      <Text>{count}</Text>
      <Button onPress={incrementCount} title="Increase Count" />
    </View>
  );
};

export default HelloWorldApp;

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

 ตัวอย่างไทป์สคริปต์ 
ในไทป์สคริปต์ ส่วนโปรแกรมตัวนับจะมีลักษณะดังนี้:

import { Button, Text, View } from "react-native";
import React from "react";

interface CounterProps {
    title: string; // Required prop
    baseNumber?: number; // Optional prop
}

const Counter: React.FC<CounterProps> = ({ title, baseNumber }) => {
    const [count, setCount] = React.useState<number>(baseNumber || 0);

    const incrementCount = (): void => setCount((prevCount) => prevCount + 1);

    return (
        <View>
            <Text>{count}</Text>
            <Button onPress={incrementCount} title={title}></Button>
        </View>
    );
};

 ดูเพิ่ม 

 รีแอ็กต์
 ฟลัตเตอร์
 คิวต์

 อ้างอิง 

 บรรณานุกรม 


หมวดหมู่:ซอฟต์แวร์ข้ามแพลตฟอร์ม
หมวดหมู่:ซอฟต์แวร์เฟซบุ๊ก
หมวดหมู่:การพัฒนาซอฟต์แวร์อุปกรณ์เคลื่อนที่
หมวดหมู่:การพัฒนาซอฟต์แวร์
หมวดหมู่: ซอฟต์แวร์ที่ใช้สัญญาอนุญาตของสถาบันเทคโนโลยีแมสซาชูเซตส์