نحوه شروع کار React Native در سال 2020

علاقمند به یادگیری React Native هستید؟ بیایید کار را شروع کنیم. یک برنامه ساده که لیستی از کشورها را نشان می‌دهد، از یک API REST با درخواست شبکه گرفته شده است. این آموزش با هدف معرفی React Native ساخته شده است و مباحث پایه‌ای از آنچه شما باید قبل از ساختن یک برنامه واقعی React Native بدانید را به شما می‌دهد. پس از آن، ما به شما در ساخت اولین برنامه واقعی ری‌اکت کمک می‌کنیم. در پایان این مقاله شما یک برنامه React Native ایجاد خواهید کرد که هم در آی او اس و هم در دستگاه‌های اندرویدی قابل اجرا باشد.

React Native یک کتابخانه توسعه پلتفرم است که توسط فیسبوک برای سیستم‌عامل‌های توسعه تلفن همراه ساخته شده است. React Native در سال 2013 به عنوان یک پروژه hackthon در داخل Facebook توسعه یافت و بعداً در سال 2015 برای استفاده عمومی منتشر شد.

این موضوع محبوبیت زیادی در جامعه توسعه دهندگان به دست آورد و چندین شرکت فناوری آن را به عنوان یک روش توسعه تلفن همراه پذیرفتند زیرا برنامه‌های React Native یک کد پایه را برای iOS و Android به اشتراک می‌گذارند و به سختی می‌توان از برنامه‌های بومی متمایز شد.

با توجه به گفته وب سایت React Native در سال 2018، React Native دارای بیشترین تعداد همکاری در هر ریپازیتوری در گیت هاب بود. امروزه ری‌اکت با کمک‌های افراد و شرکت‌هایی در سراسر جهان از جمله Expo و Microsoft پشتیبانی می‌شود.

قبل از اینکه پیش برویم و اولین برنامه ری‌اکت را بسازیم، می‌خواهیم جوانب مثبت و منفی آن و جزئیات بیشتری را در مورد آنچه در واقعیت است نشان دهیم.

React Native چه ویژگی‌هایی دارد؟

React Native یک کتابخانه توسعه تلفن همراه ترکیبی است.
برنامه‌های React Native به زبان‌های JSX و Javascript نوشته شده و به صورت کد بومی گردآوری می‌شوند.
برنامه‌های بومی ری‌اکت شامل 85 الی90 درصد Javascript و کد JSX مشترک هستند.
React Native یک webview نیست.
React Native یک PWA نیست.
React Native در این مقاله از توسعه وب پشتیبانی می‌کند.

چرا باید React Native را یاد بگیرید؟

چندین سیستم‌عامل (iOS ، Android ، Web، TVOS) را با همان کد پایه هدف قرار می‌دهد.
دارای یک انجمن بزرگ و رو به رشد است که از پشتیبانی کافی برخوردار است.
دارای پشتیبانی بومی است، به این معنی که می‌توانید کد بومی را متناسب با منطق مورد استفاده در تجارت خود تنظیم کنید.
به دانش جاوا اسکریپت نیاز دارد. جاوا اسکریپت زبانی است که از محبوبیت بالایی برخوردار است و یادگیری آن بسیار با ارزش خواهد بود. ویژگی دیگری که دارد و من شخصا از آن به عنوان نقطه عطف یاد می‌کنم: Fast Refresh (Hot Reloading)

React Native دارای اشکالاتی نیز هست، اما سازندگان کتابخانه‌های آن به طور مداوم در تلاشند تا با پیشرفت انجمن، آن ها را بهبود بخشند:

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

اولین برنامه React Native خود را بسازید

بیایید یک برنامه React Native برای نمایش یک لیست ساده از کشورها بسازیم. این برنامه تنها شامل یک صفحه خواهد بود و ما قصد داریم عملکرد و ظاهر طراحی آن را به حداقل برسانیم، زیرا هدف از این آموزش این است که به شما در تنظیم محیط توسعه دهنده ری‌اکت کمک کرده و آن را با زبان برنامه نویسی React Native تنظیم کنید.

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

1 – نصب Expo

آموزش رسمی در مورد نحوه نصب Expo را با دقت مطالعه کنید. پس از نصب آن، دوباره به این آموزش مراجعه کرده و مراحل بعدی را برای ساخت اولین برنامه React Native خود دنبال کنید.

2 – ایجاد یک برنامه React Native جدید

expo init firstapp

پروژه خالی را انتخاب کنید.

برای کار با Yarn، Y را بزنید.

پس از کلیک بر رویYes ، Expo کار می‌کند و تمام فایل‌های لازم را برای شما ایجاد می‌کند. می‌توانید به ساختار دایرکتوری نگاهی بیندازید تا از آنچه در پروژه انجام می‌شود، ایده بگیرید.

3 – اولین برنامه React Native خود را اجرا کنید

دستورات زیر را برای شروع برنامه React Native تازه ایجاد شده خود اجرا کنید:

cd firstappyarn start

در این مرحله، اگر Expo را در مراحل قبلی به درستی تنظیم کرده باشید، پروژه جدید React Native باید با موفقیت بارگذاری شود و بتوانید مانند تصویر زیر، برنامه را مشاهده کنید:

در اینجا شما اولین برنامه React Nativeی که ساختید را دارید. به طور پیش فرض می‌گوید: "برای شروع کار با برنامه خود، App.js را باز کنید" و این بهترین پیام خوش آمدید نیست که Expo می‌تواند ارائه دهد، اما قرار است پیش برویم و همه چیز را انجام دهیم. بیایید فایل App.js را باز کنیم، این چنین به نظر می‌رسد:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

اکنون اجازه دهید خلاصه‌ای مختصر از آنچه اتفاق می‌افتد را قبل از شروع کار بیان کنیم.

متغیر استایل‌ها شامل سبک‌های مختلفی از مؤلفه‌ها است.
برنامه یک مؤلفه عملکردی React Native است، پیش فرض آن چیزی است که ما در حال حاضر روی صفحه نمایش خود می‌بینیم که ترکیبی از کامپوننت‌ها را برای ساخت برنامه ارائه می دهد.

4 – لیست کشورها را اضافه کنید

بیایید این صفحه را با رابط کاربری خود بازنویسی کنیم. همانطور که قبلا نیز اشاره کردیم، ما در حال نمایش لیستی از کشورها هستیم. برای این کار باید موارد زیر را پیاده‌سازی کنیم:

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

export default function App() {

  const countriesData = [{"name":"Afghanistan"},{"name":"Åland Islands"},{"name":"Albania"},{"name":"Algeria"}]
  return (
    <FlatList
      data={countriesData}
      contentContainerStyle={styles.container}
      keyExtractor={item => item.name}
      renderItem={({item})=> <Text style={styles.text}>{item.name}</Text>}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
  text: {
    fontSize: 20,
    margin: 10
  },
});

همانطور که مشاهده می‌کنید App.js خود را به روز کردیم و مواردی را اضافه کردیم:

یک فلت لیست برای نمایش لیست کشورها
یک مجموعه داده برای نمایش در لیست
به روزرسانی استایل برای داشتن متن شخصی‌سازی شده

برنامه خود را اجرا کنید و باید این تصویر را ببینید:

نحوه شروع کار React Native در سال 2020

اکنون ما چیزی داریم که با آن کار کنیم. اما داده‌ها ایستا هستند و ما می‌خواهیم یک لیست پویا داشته باشیم که بتواند تغییر کند و ما نیاز داریم که این تغییرات در UI منعکس شود. بنابراین ما به UI نیاز داریم تا نسبت به تغییرات مدل داده "واکنش پذیر" باشد. این مفهوم اصلی React است. بنابراین باید مفهوم State را معرفی کنیم.

یک جزء React Native داده‌ها را در state خود نگه می‌دارد و هر زمان که state تغییر کند، UI مجدداً رندر می‌شود تا آن تغییرات را منعکس کند. بیایید یک متغیر state با نام countriesData اضافه کنیم که لیست پویا کشورهایی که روی صفحه نمایش داده می‌شوند را ذخیره کنیم.

const [countriesData, setCountriesData] = useState([])

useState در React Native؛ hook نامیده می‌شود.

hook یک عملکرد ویژه است که به شما امکان می‌دهد ویژگی‌های React را وارد کنید.

ما فقط یک کشور را با مقدار پیش فرض به عنوان یک آرایه خالی [] و یک تابع setCountriesData برای به روز کردن مقدار کشورها تعریف کردیم. برای مثال، فراخوانی

([1,2,3])setCountriesData مقدار countriesData را به [1,2,3] به روز می‌کند.

استفاده مهم دیگر از hook در قسمت قطعه کد زیر است. به عبارت ساده‌تر، هر كدی كه در قسمت UseEffect نوشته شده باشد هنگام نصب کامپوننت اجرا می‌شود.

import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, FlatList } from 'react-native';

export default function App() {

  const [countriesData, setCountriesData] = useState([])

  function fetchCountriesData() {
    fetch('https://restcountries.eu/rest/v2/region/africa?fields=name')
      .then((response) => response.json())
      .then((json) => setCountriesData(json))
      .catch((error) => console.error(error))
  }

  useEffect(()=> {
    fetchCountriesData();
  })

  return (
    <FlatList
      data={countriesData}
      contentContainerStyle={styles.container}
      keyExtractor={item => item.name}
      renderItem={({item})=> <Text style={styles.text}>{item.name}</Text>}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
  text: {
    fontSize: 20,
    margin: 10
  },
});

لطفا از آنچه اتفاق می‌افتد نترسید. ما از API واکشی برای بازیابی اطلاعات کشورها از نقطه انتهایی API و نمایش لیستی از کشورهای آفریقایی استفاده می‌کنیم. API fetch نحوه درخواست شبکه در React Native است. همانطور که مشاهده می‌کنید، از یک API رایگان استفاده کرده‌ایم که در وب سایت restcountries.eu قرار گرفته است.

این یک شیء JSON را برمی‌گرداند که در عبارت then() به روش واکشی تجزیه شده است. پس از تجزیه موفقیت آمیز، متغیر استیت countriesData را با لیست جدیدی از کشورهای تازه بازیابی شده، به روز می‌کنیم. در نتیجه با به روزرسانی شیء استیت، رابط کاربری نیز مجدداً رندر می‌شود و می‌توان کشورها را روی صفحه مشاهده کرد:

5 – برنامه React Native خود را استایل دهی کنید

اکنون بیایید کمی بهتر طراحی را بکار گیریم، زیرا برنامه اصلی را در حال حاضر داریم. ما قصد داریم به طراحی ظاهر برنامه بپردازیم و تمرکز ما روی استایل‌ها است.

import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, FlatList, Pressable, Alert } from 'react-native';
import { StatusBar } from 'expo-status-bar';

export default function App() {

  const [countriesData, setCountriesData] = useState([])

  function fetchCountriesData() {
    fetch('https://restcountries.eu/rest/v2/region/africa?fields=name;capital')
      .then((response) => response.json())
      .then((json) => setCountriesData(json))
      .catch((error) => console.error(error))
  }

  useEffect(()=> {
    fetchCountriesData();
  })

  return (
    <>
      <StatusBar style='light'/>
      <FlatList
        data={countriesData}
        contentContainerStyle={styles.container}
        keyExtractor={item => item.name}
        renderItem={({item})=> <Text onPress={() => {Alert.alert(`The Capital of ${item.name} is ${item.capital}`)}} style={styles.text}>{item.name}</Text>}
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
    backgroundColor: '#483D8B'
  },
  text: {
    fontSize: 18,
    margin: 5,
    color: '#fff'
  },
});

همانطور که می‌بینید، ما با ارائه ویژگی زمینه BackgroundColor با کد #483D8B، رنگ پس زمینه را به بنفش تغییر داده‌ایم.

با این که که سینتکس بسیار شبیه به CSS است، اما کمی تفاوت دارد. مفاهیم اصلی یکسان هستند، بنابراین اگر از قبل CSS را می‌شناسید، یادگیری سینتکس استایل دهی برنامه‌های React Native بسیار آسان خواهد بود. به خصوص اگر از قبل با طرح flexbox آشنایی داشته باشید.

جمع‌بندی

دیدیم که بزرگترین امتیاز فروش برای استفاده از React Native در فرآیند توسعه تلفن همراه شما چیست و ایجاد برنامه برای هر دو سیستم‌عامل iOS و Android چه آسان است.

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

پس از آن، در مورد اجزای عملکردی، hook و state مطلع شدیم. همچنین از API واکشی برای بازیابی داده‌ها از طریق درخواست شبکه استفاده کردیم و با تغییر صفحه استایل، اجزای بصری را طراحی کردیم.

تبریک می‌گوییم! شما توانستید یک برنامه React Native بسازید. اکنون زمان آن است که مفاهیم پیشرفته‌تر را یاد بگیرید، به منظور اضافه کردن ویژگی‌های پیچیده‌تر و توسعه برنامه‌های کاملا کاربردی تلفن همراه، می‌توانید آن‌ها را در فروشگاه App Store و Google Play Store منتشر کنید.

منبع