دوره آموزش react native

آموزش React native

قسمت اول

مقدمه آموزش React Native:

سلام در این جا می خواهیم آموزش React Native را از مبتدی شروع کرده و به امید خدا به پیشرفته برسیم پس با ما همراه باشید.

اصلا React Native چیست : React Native مانند React هست اما به جای Component های مبتنی بر وب از Component های native به عنوان اجزای سازنده Application استفاده می کند. برای فهم ساختار یک React Native Application باید کمی با مفاهیم پایه React مثل JSX , Application , state و props آشنا شوید.

اگر با React آشنا هستید هنوز مواردی مختص React Native هستند که باید یاد بگیرید.در این جا سعی می کنیم طوری آموزش دهیم که برای همه مناسب باشد چه اینکه تجربه کار با React داشته باشید یا نه

شروع کار با React Native

این بخش آموزش React Native به شما کمک می کند اولین Application React Native خود را نصب و build کنید. اگر React Native را قبلا نصب کرده اید، می توانید این بخش را رها کنید و مستقیما از بخش مفاهیم پایه در React Native ( بخش دوم آموزش ) شروع کنید.

اگر پیش زمینه ای از وب دارید، ساده ترین روش شروع کار با React Native ابزارهای Expo است. می توانید بدون نصب و راه اندازی Xcode یا Android Studio پروژه خود را راه اندازی کنید. توسط Expo CLI می توانید یک محیط توسعه روی سیستم خود راه اندازی کنید و در عرض چند دقیقه شروع به توسعه application React Native خود کنید. برای توسعه سریع، میت وانید از Snack برای توسعه و اجرای React Native در مرورگر خود استفاده کنید.

اگر با توسعه ی application به صورت native(جاوا یا swift) آشنا هستید، می توانید از React Native CLI استفاده کنید. برای شروع باید XCode یا Android Studio را نصب داشته باشید.

شروع با Expo CLI:

با این فرض که قبلا Node version 10 به بالا را نصب کرده اید، می توانید از npm برای نصب ابزار خط فرمان Expo CLI استفاده کنید:

npm install -g expo-cli

سپس برای ساخت یک پروژه React Native جدید به اسم AwesomeProject، دستورات زیر را اجرا کنید:

expo init AwesomeProject

cd AwesomeProject

npm start # you can also use: expo start

این کار یک سرور توسعه برای شما راه اندازی می کند.

اجرای یک Application React Native

برنامه مخصوص Client Expo را روی iOS یا android خود نصب کنید و به شبکه wireless مشترک با کامپیوترتان، وصل شوید. روی android، با استفاده از application Expo کد QR را از ترمینال scan کنید تا برنامه تان باز شود. روی iOS، دستورالعمل های روی صفحه را دنبال کنید تا لینک بگیرید.

آموزش React Native

تغییر در Application

حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید. فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید. بعد از ذخیره آخرین تغییرات، application به طور اتوماتیک reload می شود.

تمام شد!

تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!

قدم بعدی؟

Expo مستندات زیادی دارد که می تواند مرجع خوبی برایتان باشد. بعلاوه می توانید در forum آن سوالات خود را مطرح کنید.

این ابزارها به شما کمک می کنند سریع توسعه را شروع کنید، اما قبل از ادامه کار با Expo CLI، درمورد محدودیت های آن مطالعه کنید.

اگر هنگام کار با Expo به مشکلی برخوردید، قبل از ایجاد یک issue جدید، لطفا issue های موجود را ببینید:

· صفحه ی Expo CLI issues (برای مشکلات مرتبط یا Expo CLI)

· صفحه ی Expo issues (برای مشکلات مربوط به Expo client یا SDK)

اگر می خواهید درمورد React Native بیشتر بدانید با ادامه این آموزش همراه باشید.

اجرای برنامه روی شبیه ساز یا Virtual device

با Expo CLI براحتی می توانید برنامه تان را روی device واقعی بدون راه اندازی هیچ گونه محیط توسعه، اجرا کنید. اگر می خواهید برنامه را روی شبیه ساز iOS یا Virtual device android اجرا کنید، به بخش شروع با React Native CLI مراجعه کنید، برای اینکار باید Xcode یا محیط توسعه لازم برای android را راه اندازی کنید.

پس از راه اندازی پیش نیازها، می توانید با دستور npm run android برنامه را روی Virtual device android اجرا کنید. با دستور npm run ios روی Mac، می توانید برنامه را روی شبیه ساز iOS اجرا کنید.

هشدارها

از آنجا که موقع استفاده از Expo برای ایجاد پروژه از هیچ کد native (برای مثال جاوا) استفاده نمی کنید، نمی توان ماژول های native سفارشی به غیر از آنچه API های React Native فراهم می کند و component های موجود در application Client Expo، استفاده کرد.

اگر می دانید که قرار است نهایتا از کد native استفاده کنید، Expo همچنان گرینه خوبی برای شروع است. در مرحله آخر، می توانید با eject کردن پروژه، Build های Native بسازید. پس از eject کردن پروژه، بخش شروع با React Native CLI برای ادامه کار مرجع شماست.

شروع با React Native CLI:

اگر می خواهید کد native در پروژه تان داشته باشید از این دستور العمل پیروی کنید. برای مثال، اگر می خواهید React Native را در یک application که قبلا ایجاد کرده اید اضافه کنید، یا اگر یک application با Expo یا ابزار Create React Native Appتوسعه داده اید و "eject" کرده اید، به این بخش نیاز دارید.

این دستورالعمل ها به سیستم عامل مورد استفاده برای توسعه وابسته است و اینکه می خواهید برای iOS یا androidبرنامه بنویسید. اگر می خواهید برای هردو پلتفرم iOS و androidتوسعه بدهید، مشکلی نیست، یکی از آن ها را انتخاب کنید، چرا که هرکدام دستورالعمل متفاوتی دارند:

محیط توسعه: Mac، Windows، Linux

محیط اجرای نهایی: android، iOS

1. محیط Linux و android

آموزش React Native

نصب پیش نیازها

برای اینکار به Node، خط فرمان React Native، و JDK و Android Studio نیاز دارید.

می توانید از هر ویرایشگری برای توسعه application خود استفاده کنید، با این حال Android Studio را برای راه اندازی ابزارهای مورد نیاز برای buildکردن application React Native خود برای android لازم خواهید داشت.

نصب Node

دستورالعمل مخصوص Linux را برای نصب Node 8.3 یا بالاتر دنبال کنید.

آموزش پروژه محور React Native

ابزار React Native CLI

نود Node با npm همراه است، که به شما امکان نصب خط فرمان React Native CLI را می دهد.دستورات زیر را در ترمینال اجرا کنید.

npm install -g react-native-cli

اگر به خطایی مثل Cannot find module 'npmlog' برخوردید، npm را مستیم نصب کنید: curl -0 -L https://npmjs.org/install.sh | sudo sh

نصب Java Development Kit

ری اکت React Native به version 8 از (package Java SE Development Kit (JDK احتیاج دارد. می توانید OpenJDK را از AdoptOpenJDK یا هر packager دیگری نصب کنید. می توانید از این لینک JDK را دانلود و نصب کنید.

محیط توسعه android

اگر در ابتدای راه توسعه ی android باشید، راه اندازی محیط توسعه android کار خسته کننده ای است. اگر با توسعه android آشنا هستید، مواردی هست که باید configشوند. درهر دو حالت، لطفا گام های بعدی را با دقت دنبال کنید.

1. نصب Android Studio

نرم افزار Android Studio را دانلود و نصب کنید. گزینه ی “Custom” را موقع انتخاب نوع نصب، انتخاب کنید. تمام موارد زیر باید تیک خورده باشند:

Android SDK

Android SDK Platform

Performance (Intel ® HAXM) (ببینید AMDبرای )

Android Virtual Device

گزینه “Next” را بزنید تا component های بالا نصب شوند.

اگر باکس های موارد بالا غیرفعالند می توانید بعدا component مربوطه را نصب کنید.

2. نصب Android SDK

نرم افزار Android Studio به طور پیش فرض آخرین version SDK را نصب می کند. با این حال، build کردن یک application React Native به همراه کد native، نیاز به Android 9 (Pie) SDKدارد. SDK های دیگر از طریق SDK Manager در Android Studio قابل نصب هستند.

از صفحه ی "Welcome to Android Studio" گزینه ی "Configure" را انتخاب کنید. سپس "SDK Manager" را انتخاب کنید.

Android Studio

منیجر "SDK Manager" را می توان در قسمت "Preferences" در خود Android Studio، از مسیر Appearance & Behavior → System Settings → Android SDK پیدا کرد.

تب "SDK Platforms" را در SDK Managerانتخاب کنید، سپس باکس کنار "Show Package Details" را در گوشه پایین سمت راست انتخاب کنید. Android 9 (Pie) را پیدا کنید، آن را باز کنید و موارد زیر را تیک بزنید:

• Android SDK Platform 28
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

سپس تب "SDK Tools" را بزنید و باکس کنار "Show Package Details" را هم تیک بزنید. "Show Package Details" را پیدا کنید، آن را باز کنید و مطمئن شوید 28.0.3 انتخاب شده باشد.

در آخر، دکمه Apply را بزنید تا Android SDK و بقیه ابزارهای build نصب شوند.

3. config ANDROID_HOME environment variable

ابزارهای React Nativeبرای build کردن application با کد nativeنیاز به متغیرهای محیطی (environment variable) دارند.

خطوط زیر را به فایل $HOME/.bash_profile یا $HOME/.bashrc اضافه کنید:

export ANDROID_HOME=$HOME/Android/Sdk

export PATH=$PATH:$ANDROID_HOME/emulator

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH=$PATH:$ANDROID_HOME/platform-tools

پروفایل bash_profileمختص bash است. اگر از Shell دیگری استفاده می کنید، فایل تنظیمات مخصوص آن shell را باید تغییر دهید.

با تایپ کردن source $HOME/.bash_profile فایل را در shell باز کنید. با اجرای دستور echo $PATH بررسی کنید ANDROID_HOME به path اضافه شده باشد.

مطمئن شوید که از مسیر صحیح Android SDK استفاده می کنید. میتوانید مکان SDK را در Android Studio در بخش "Preferences"، در مسیر Appearance & Behavior → System Settings → Android SDK چک کنید.

آموزش React Native

واچ من Watchman

واچ من Watchman ابزاری است که توسط Facebookتوسعه داده شده و برای مانیتور تغییرات در فایل سیستم به کار می رود. توصیه می شود برای عملکرد بهتر و سازگاری بیشتر از آن استفاده کنید. (ممکن است بدون نصب آن کارتان راه بیوفتد اما نصب آن شما را از مشکلات زیادی در آینده نجات می دهد.)

ساخت یک application

توسط خط فرمان React Native یک پروژه ی React Native جدید به اسم AwesomeProject ایجاد کنید:

react-native init AwesomeProject

اگر می خواهید React Native را در یک application موجود ادغام کنید، یا اگر از Expo (یا Create React Native App) پروژه ای را ejectکرده اید، یا اگر می خواهید پشتیبانی از iOS را به یک پروژه ی React Native اضافه کنید(کد پلتفرم-محور را ببینید)، این کار لازم نیست. همچنین می توانید از CLI های دیگری مثل Ignite CLI برای ساخت application React Native خود استفاده کنید.

استفاده از یک version خاص

اگر می خواهید پروژه جدیدی را با یک version خاص از React Nativeبسازید، می توانید از آرگومان –versionاستفاده کنید:

react-native init AwesomeProject --version X.XX.X

react-native init AwesomeProject --version react-native@next

آماده سازی device android

به یک device android نیاز دارید که application android React Native خود را روی آن اجرا کنید. می تواند یک موبایل باشد یا می توانید از Android Virtual Device به عنوان شبیه ساز device android روی کامپیوتر خود استفاده کنید.

درهرصورت، باید device را برای اجرای applicationدرهنگام توسعه، آماده کنید.

استفاده از یک device فیزیکی

اگر یک device android واقعی دارید، می توانید به جای AVD از آن هنگام توسعه استفاده کنید. device را با کابل USB به کامپیوتر وصل کنید و دستورالعمل این بخش را دنبال کنید.

استفاده از یک Virtual device

اگر با Android Studioپروژه ی ./AwesomeProject/android را باز کنید، می توانید لیستی از virtual device هایandroid را ببینید از بخش "AVD Manager" ببینید. دنبال آیکنی شبیه عکس زیر بگردید:

AVD Manager

اگر تازه Android Studio را نصب کرده باشید، احتمالا باید یک AVD جدید بسازید. گزینه ی "Create Virtual Device..." را بزنید، سپس یکی از موبایل ها را از لیست انتخاب کنید و روی "Next" کلیک کنید. سپس Image Pie API Level 28 را انتخاب کنید.

توصیه می کنم برای عملکرد بهتر VM acceleration را روی سیستم خود کافیگ کنید. سپس به AVD Manager بازگردید.

روی "Next" و سپس "Finish" کلیک کنید. در این لحظه برای راه اندازی AVDساخته شده، روی دکمه مثلثی سبز کنار AVD تان کلیک کنید . سپس به مرحله بعد بروید.

اجرای یک application React Native

از دستور react-native run-android در پوشه ی مربوط به پروژه تان استفاده کنید:

cd AwesomeProject

react-native run-android

اگر همه چیز درست انجام شده باشد باید application در شبیه ساز android اجرا شود.

اجرای یک application React Native

دستور react-native run-android فقط یکی از راه های اجرای برنامه است. می توانید مستقیما از داخل Android Studio آن را اجرا کنید.

اگر دراین روش با مشکل مواجه شدید صفحه Troubleshooting را ببینید.

تغییر در application

حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید.

• فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید.
• کلید R را دوبار فشاردهید یا گزینه ی Reload از منوی Developer (Ctrl + M) بزنید تا تغییرات را ببینید.

تمام شد!

تبریک می گویم. شما اولین برنامه React Native خود را اجرا کرده اید!

قدم بعدی؟

• از منوی Developer، Live Reload را فعال کنید. اکنون برنامه با هر تغییری در کد، به طور اتوماتیک reload می شود.
• اگر می خواهید به یک application موجود کد React Native اضافه کنید بخش راهنمای ادغام application های موجود با React Native را ببینید.

اگر می خواهید درمورد React Nativeبیشتر بدانید با ادامه این آموزش همراه باشید.

آموزش React Native