โครงสร้างโฟลเดอร์ในโปรเจกต์ React Native
เมื่อสร้างโปรเจกต์ React Native ใหม่ คุณจะได้โครงสร้างโฟลเดอร์พื้นฐานดังนี้:
MyFirstApp/
├── android/ # โฟลเดอร์สำหรับโค้ดที่เกี่ยวข้องกับ Android
├── ios/ # โฟลเดอร์สำหรับโค้ดที่เกี่ยวข้องกับ iOS
├── node_modules/ # โฟลเดอร์เก็บ dependencies
├── app.json # ไฟล์สำหรับกำหนดค่าแอป
├── babel.config.js # การตั้งค่า Babel สำหรับการแปลงโค้ด
├── index.js # Entry point ของแอป
├── metro.config.js # การตั้งค่า Metro bundler
├── package.json # เก็บรายละเอียดของโปรเจกต์และ dependencies
├── package-lock.json # รายละเอียด dependencies และเวอร์ชันที่แม่นยำ
├── App.js # ไฟล์หลักที่เริ่มต้นแอปพลิเคชัน
ไฟล์สำคัญในโปรเจกต์
ไฟล์ App.js
- เป็นไฟล์หลักที่แสดง UI และฟังก์ชันการทำงานของแอป
- ใช้เขียนโค้ด React Native สำหรับสร้างหน้าจอแอปพลิเคชัน
ตัวอย่าง App.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Welcome to My React Native App!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
},
text: {
fontSize: 18,
color: '#000000',
},
});
export default App;
ไฟล์ index.js
- เป็นจุดเริ่มต้น (entry point) ของแอปพลิเคชัน
- ทำหน้าที่เรียกใช้ไฟล์
App.js
และลงทะเบียนแอป
ตัวอย่าง index.js
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
AppRegistry.registerComponent(appName, () => App);
คำอธิบาย:
AppRegistry
: ใช้ลงทะเบียนแอปและระบุว่าควรเริ่มต้นที่ไหนApp
: อ้างอิงไปยังไฟล์App.js
เพื่อแสดงเนื้อหาหลักappName
: ดึงชื่อแอปจากไฟล์app.json
คำอธิบายเพิ่มเติมเกี่ยวกับโครงสร้างโฟลเดอร์
android/
:- เก็บโค้ดและการตั้งค่าที่เกี่ยวข้องกับ Android เช่น Gradle และ Manifest
ios/
:- เก็บโค้ดและการตั้งค่าที่เกี่ยวข้องกับ iOS เช่น Xcode project
node_modules/
:- เก็บ dependencies ที่ติดตั้งผ่าน
npm
หรือyarn
- เก็บ dependencies ที่ติดตั้งผ่าน
babel.config.js
:- การตั้งค่า Babel สำหรับแปลง JavaScript ให้ทำงานได้ในทุกแพลตฟอร์ม