آموزش ساخت اولین پروژه در React Native به زبان ساده

برای شروع کار با React Native و ساخت اولین پروژه، مراحل زیر را به صورت گام به گام دنبال کنید. React Native یک فریمورک محبوب برای ساخت اپلیکیشن‌های موبایل با استفاده از جاوااسکریپت و React است.

مرحله ۱: نصب پیش‌نیازها

قبل از هر چیز، نیاز به نصب چند ابزار دارید:

1. Node.js: ابتدا باید Node.js را نصب کنید. می‌توانید آخرین نسخه آن را از وب‌سایت Node.js دانلود و نصب کنید.

2. Expo CLI: برای راحتی در شروع کار با React Native، می‌توانید از Expo استفاده کنید. Expo یک ابزار و فریمورک است که به شما اجازه می‌دهد به راحتی اپلیکیشن‌های React Native بسازید. برای نصب Expo CLI، از دستور زیر در ترمینال یا خط فرمان استفاده کنید:

       bash
       

2. npm install -g expo-cli
   

مرحله ۲: ایجاد پروژه جدید

پس از نصب Expo CLI، می‌توانید یک پروژه جدید ایجاد کنید. برای این کار، دستور زیر را در ترمینال وارد کنید:

    bash
    

expo init MyFirstProject

در اینجا MyFirstProject نام پروژه شماست. پس از اجرای این دستور، از شما خواسته می‌شود که یک الگو (template) انتخاب کنید. می‌توانید گزینه “blank” را انتخاب کنید تا یک پروژه خالی ایجاد شود.

مرحله ۳: ورود به پوشه پروژه

پس از ایجاد پروژه، به پوشه پروژه بروید:

    bash
    

cd MyFirstProject

مرحله ۴: اجرای پروژه

برای اجرای پروژه، از دستور زیر استفاده کنید:

    bash
    

expo start

این دستور یک سرور محلی راه‌اندازی می‌کند و یک QR کد در ترمینال نمایش می‌دهد. می‌توانید این QR کد را با استفاده از اپلیکیشن Expo Go (که باید بر روی گوشی خود نصب کنید) اسکن کنید تا اپلیکیشن را در گوشی خود ببینید.

مرحله ۵: ویرایش کد

فایل اصلی پروژه شما در مسیر App.js قرار دارد. با استفاده از ویرایشگر متن مورد علاقه‌تان (مثل Visual Studio Code)، این فایل را باز کنید و محتوای آن را ویرایش کنید. به عنوان مثال، می‌توانید کد زیر را به آن اضافه کنید:

    javascript
    

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>سلام، این اولین پروژه من در React Native است!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

مرحله ۶: مشاهده تغییرات

پس از ویرایش کد، تغییرات به‌طور خودکار در اپلیکیشن شما به‌روز می‌شود. اگر از Expo Go استفاده می‌کنید، می‌توانید نتیجه تغییرات را بلافاصله مشاهده کنید.

مرحله ۷: یادگیری بیشتر

برای یادگیری بیشتر در مورد React Native، می‌توانید به مستندات رسمی React Native و Expo مراجعه کنید. این مستندات شامل راهنماها و مثال‌های بیشتری هستند که می‌توانند به شما کمک کنند.