آموزش react native


آموزش react native

آموزش react native فارسی

به کاملترین آموزش react native رایگان خوش آمدید، سلام دوستان اگه براتون سوال پیش آمده است که react native چیست ما در این مینی دوره آموزش react native به شکل کامل به اینکه برنامه نویسی با ری اکت چگونه هست میپردازیم.

همچنین اگر به دنبال دانلود آموزش react native هستید میتوانید از لینک پایین کتاب کوچک آموزش ری اکت نیتیو رو دانلود کنید

کتاب آموزش react native

آموزش react native pdf فارسی

آموزش پروژه محور react native

گام اول در آموزش ری اکت نیتیو

1-  مقدمه‌ای بر React Native

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

 https://developer.mozilla.org/en-US/docs/Web/JavaScript

 مراجعه نمایید.

آموزش جامع react native

1-1-  مؤلفه‌های اصلی و بومی (Core and Native Components)

React Native یک چارچوب منبع باز برای ساخت برنامه‌های Android و iOS با استفاده از کتابخانه جاوااسکریپتی React و قابلیت‌های بومی پلتفرم برنامه است. با استفاده از React Native، از JavaScript برای دسترسی به API‌های پلتفرم خود و همچنین توصیف ظاهر و رفتار رابط کاربر (UI) خود با استفاده از مؤلفه‌های React استفاده می‌کنید: بسته‌های کد قابل استفاده مجدد و قابل نصب.

1-1-1-  نماها و توسعه موبایل (Views and mobile development)

در توسعه اندروید و iOS، یک نمای (view) اصلی سازمان رابط کاربری است: یک عنصر مستطیل شکل کوچک روی صفحه که می‌تواند برای نمایش متن، تصاویر یا پاسخ به ورودی کاربر استفاده شود. حتی کوچک‌ترین عناصر بصری یک برنامه، مانند یک خط متن یا یک دکمه، از نوع نما هستند. برخی از انواع نماها می‌توانند شامل نماهای دیگری باشند.

 

 

react native generate

آموزش react native

 

2-1-1-  مؤلفه‌های بومی

در توسعه اندروید، شما نماهایی را در kotlin یا جاوا می‌نویسید. در توسعه iOS، شما از Swift یا Objective-C استفاده می‌کنید. در React Native می‌توانید با استفاده از مولفه‌های React این دیدگاه‌ها را با JavaScript فراخوانی کنید. هنگام اجرا، React Native نماهای مربوط به Android و iOS را برای آن مؤلفه‌ها ایجاد می‌کند. از آنجا که اجزای React Native با همان نماهای Android و iOS پشتیبانی می‌شوند، برنامه‌های React Native مانند سایر برنامه‌ها ظاهر، احساس و عملکرد خوبی دارند. به این اجزای پشتیبانی شده از پلتفرم، اجزای بومی می‌گویند.
React Native به شما امکان می‌دهد که مؤلفه‌های بومی خود را برای Android و iOS متناسب با نیازهای منحصر به فرد برنامه خود بسازید. React Native همچنین شامل مجموعه‌ای از مؤلفه‌های بومی و آماده برای استفاده است که می‌توانید از امروز برای شروع ساخت برنامه خود استفاده کنید. این‌ها مؤلفه‌های اصلی React Native هستند.

3-1-1-  مؤلفه‌های اصلی

React Native دارای مؤلفه‌های اصلی بسیاری برای همه موارد است، از کنترل فرم (form control) گرفته تا شاخص‌های فعالیت (activity indicators). همه آن‌ها را می‌توانید از طریق

https://reactnative.dev/docs/components-and-apis

پیدا کنید. شما بیشتر با اجزای اصلی زیر کار خواهید کرد:

jadvalllllllll

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

react native tutorial

آموزش react native

2-1- اساس و پایه React

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

• مؤلفه‌ها
• JSX
• props
• state

1-2-1- اولین مؤلفه

در ادامه این آموزش React از گربه‌ها در مثال‌های خود استفاده می‌کند. موجوداتی دوست‌داشتنی و نزدیک که به نام و کافه احتیاج دارند. در اینجا اولین مؤلفه به نام Cat آورده شده است:

آموزش react native

 

نحوه انجام این کار به شرح زیر است: برای تعریف مؤلفه Cat خود، ابتدا از واژه کلیدی import از JavaScript برای import کردن React و مؤلفه اصلی Text استفاده می‌کنیم:

آموزش react native

مؤلفه شما به عنوان یک تابع شروع می‌شود:

آموزش react native

شما می توانید مؤلفه‌ها را به عنوان طرح اصلی (blueprint) در نظر بگیرید. هر چند خروجی یک مؤلفه تابع یک عنصر React می‌باشد. عناصر React به شما امکان می‌دهند آنچه را که می‌خواهید روی صفحه مشاهده کنید توصیف کنید. در اینجا مؤلفه Cat یک عنصر <Text> را ارائه می‌دهد. شما می‌توانید مؤلفه عملکرد خود را با استفاده از دستور export default  از JavaScript برای استفاده در سراسر برنامه خود صادر کنید. مانند زیر:

آموزش react native

اکنون نگاهی دقیق به جمله return بیندازیم. عبارت <Text>Hello, I am your cat!</Text> از نوعی Syntax از JavaScript استفاده می‌کند که نوشتن عناصر را راحت می‌کند: JSX.

2-2-1- JSX

React  و React Native از JSX استفاده می‌کنند، یک نحو که به شما امکان می‌دهد عناصری را در JavaScript بنویسید مانند: <Text>Hello, I am your cat!</Text>. اسناد React یک راهنمای جامع برای JSX دارند که می‌توانید برای کسب اطلاعات بیشتر به آن‌ها مراجعه کنید. از آنجا که JSX مبتنی بر جاوااسکریپت است، می‌توانید از متغیرهای داخل آن استفاده کنید. در اینجا شما یک نام برای گربه تحت name، اعلام می‌کنید و آن را داخل {} در درون <Text> جایگذاری می‌کنید.

آموزش react native

هر عبارت JavaScript بین {} کار خواهد کرد، از جمله فراخوانی‌های تابع مانند
{getFullName(“Rum”, “Tum”, “Tugger”)}

آموزش react native

3-2-1- مؤلفه‌های شخصی

شما قبلاً با مؤلفه‌های اصلی React Native آشنا شده‌اید. React به شما امکان می‌دهد این مؤلفه‌‌ها را درون یکدیگر به صورت تودرتو بنویسید تا مؤلفه‌های جدید ایجاد کنید. این مؤلفه‌های قابل استفاده مجدد (reusable) و تودرتو در قلب الگوی React قرار دارند. به عنوان مثال، می‌توانید Text و TextInput را در view زیر به صورت تودرتو بنویسید و React Native آنها را با هم رندر می‌کند:

آموزش react native

در Android، معمولاً نماهای خود را در داخل LinearLayout، FrameLayout، RelativeLayout و غیره قرار می‌دهید تا نحوه چیدمان فرزندان را روی صفحه تنظیم کنید. در React Native، View از Flexbox برای لایه‌بندی فرزندان خود استفاده می‌کند.

ا استفاده از <Cat> می‌توانید چندین بار و در چند مکان این مؤلفه را بدون تکرار کد خود رندر کنید:

آموزش ری اکت نیتیو

هر مؤلفه‌ای که مؤلفه‌های دیگری را رندر کند، یک مؤلفه اصلی است. در اینجا، cafe مؤلفه parent یا والد است و هر گربه یک مؤلفه child یا فرزند است. می‌توانید به تعداد دلخواه گربه را در کافه خود قرار دهید. هر <Cat> یک عنصر منحصر به فرد را رندر می‌کند که می توانید آن را با props سفارشی کنید.

4-2-1- props

Props مخفف “Properties” است. props به شما امکان می‌دهد اجزای React را سفارشی کنید. به عنوان مثال، در اینجا شما به هر <Cat> نام متفاوتی برای رندر Cat می‌دهید:

آموزش برنامه نویسی react native

 

اکثر مؤلفه‌های اصلی React Native را می توان با props نیز سفارشی کرد. به عنوان مثال، هنگام استفاده از تصویر، شما به آن یک prop با نام source ارسال می‌کنید تا مشخص کند چه تصویری را نشان دهد:

آموزش برنامه نویسی react native

Image دارای بسیاری از props‌های مختلف است، از جمله سبک که یک شی JS را برای طراحی و طرح‌بندی مربوط به جفت خصیصه-ارزش می پذیرد. شما می‌توانید بسیاری از چیزها را با کمک props و مؤلفه‌های اصلی شامل Image، Text و View بسازید! اما برای ساختن چیزی تعاملی‌، به state احتیاج دارید.

5-2-1- State

در حالی که می‌توانید از props‌ها به عنوان آرگومان‌هایی استفاده کنید که برای پیکربندی نحوه نمایش اجزا استفاده می‌شود، state مانند ذخیره‌سازی اطلاعات شخصی یک مؤلفه است. state برای مدیریت داده‌هایی که با گذشت زمان تغییر می‌کنند یا ناشی از تعامل کاربر است مفید می‌باشد. state به مؤلفه‌ها حافظه می‌دهد!

به عنوان یک قاعده کلی، هنگام پیکربندی یک مؤلفه برای رندر از props استفاده کنید. برای پیگیری اطلاعات داده‌های مؤلفه‌ای که انتظار دارید با گذشت زمان تغییر کند، از state استفاده کنید.

مثال زیر در یک کافه گربه اتفاق می‌افتد که در آن دو گربه گرسنه منتظر غذا هستند. گرسنگی آن‌ها، که انتظار داریم با گذشت زمان تغییر کند (برخلاف نام آنها)، به عنوان state ذخیره می‌شود. برای تغذیه گربه‌ها، دکمه‌های آن‌ها را باید فشار دهید (که وضعیت آنها را به روز می‌کند). با فراخوانی React’s useState Hook می‌توانید state را به یک مؤلفه اضافه کنید. hook نوعی تابع است که به شما امکان می‌دهد ویژگی‌های React را به چنگ بیندازید. به عنوان مثال، useState یک hook است که به شما امکان می‌دهد state را به مؤلفه‌های کاربردی اضافه کنید.

آموزش react native

ابتدا می‌خواهید useState را از React import کنید:

آموزش react native

سپس با فراخوانی useState در داخل تابع، state مؤلفه را اعلام می‌کنید. در این مثال، useState یک متغیر state به نام isHungry ایجاد می‌کند:

آموزش react native

فراخوانی useState دو کار انجام می‌دهد:

• این یک “متغیر state” با مقدار اولیه ایجاد می‌کند – در این حالت متغیر state، isHungry نام دارد و مقدار اولیه آن true است
• این یک تابع برای تنظیم مقدار متغیر state (setIsHungry) ایجاد می‌کند.

مهم نیست که از چه اسامی استفاده می‌کنید. اما فکر کردن در مورد الگویی به صورت
[<getter>, <setter>] = useState(<initialValue>) می‌تواند مفید باشد. بعد مؤلفه اصلی Button را اضافه می‌کنید و به آن یک prop به نام onPress پاس می‌دهید:

آموزش react native

حالا، وقتی کسی دکمه را فشار می‌دهد، onPress با فراخوانی setIsHungry(false) اجرا می‌شود. این متغیر حالت isHungry را روی false تنظیم می‌کند. وقتی isHungry به صورت false است، ویژگی disable دکمه روی true تنظیم شده و عنوان آن نیز تغییر می‌کند:

آموزش react native

در نهایت، گربه‌های خود را درون یک مؤلفه کافه قرار دهید:

آموزش react native

گام دوم در آموزش ری اکت نیتیو

2- تنظیم محیط توسعه

این قسمت به شما کمک می‌کند تا اولین برنامه React Native خود را نصب و بسازید. ساده‌ترین راه برای شروع، کار با Expo CLI است. Expo مجموعه‌ای از ابزارهای ساخته شده پیرامون React Native است و گرچه از ویژگی‌های بسیاری برخوردار است، اما مهم‌ترین ویژگی در حال حاضر برای ما این است که می‌توان با کمک آن در عرض چند دقیقه یک برنامه React Native را نوشت. شما فقط به آخرین نسخه Node.js و دستگاه موبایل یا شبیهساز نیاز خواهید داشت. با فرض اینکه شما نسخه Nodejs 12 یا بالاتر را نصب کرده‌اید، می‌توانید از npm برای نصب ابزار خط فرمان Expo CLI استفاده کنید:

آموزش react native

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

آموزش react native

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

1-2- اجرای برنامه React Native ساخته شده

برنامه Expo client را در تلفن iOS یا Android خود نصب کنید و به همان شبکه بی‌سیمی متصل شوید که رایانه‌تان به آن وصل است. در Android، از برنامه Expo برای اسکن کد QR از terminal خود برای باز کردن پروژه خود استفاده کنید. در iOS، از اسکنر کد QR داخلی برنامه دوربین استفاده کنید.

2-2- تغییر برنامه

اکنون که برنامه را با موفقیت اجرا کردید ،اجازه دهید آن را اصلاح کنیم. App.js را در ویرایشگر متن مورد نظر خود باز کرده و برخی خطوط را ویرایش کنید. هنگامی که تغییرات را ذخیره کردید، برنامه باید به طور خودکار بارگیری شود. تبریک! شما اولین برنامه React Native خود را با موفقیت اجرا و اصلاح کرده‌اید.

3-2- اجرای برنامه خود روی شبیه‌ساز یا دستگاه مجازی

Expo CLI به شما امکان می‌دهد بدون ایجاد محیط توسعه، برنامه React Native خود را روی دستگاه فیزیکی اجرا کنید. اگر می خواهید برنامه خود را روی شبیه‌ساز iOS یا دستگاه مجازی Android اجرا کنید، لطفاً به دستورالعمل‌های “React Native CLI Quickstart” مراجعه کنید تا نحوه نصب Xcode یا تنظیم محیط توسعه اندروید را بیاموزید. پس از تنظیم این موارد، می‌توانید با اجرای npm run android در دستگاه مجازی Android یا در iOS Simulator با اجرای npm run ios (فقط macOS) برنامه خود را راه‌اندازی کنید.

گام سوم در آموزش ری اکت نیتیو

3-  ساخت برنامه Hello World!

React Native مانند React است، اما از مؤلفه‌های بومی به جای مؤلفه‌های وب به عنوان بلوک‌های سازنده استفاده می‌کند. بنابراین برای درک ساختار اساسی یک برنامه React Native، باید برخی از مفاهیم اساسی React را مانند JSX، مؤلفه‌ها، state و props درک کنید. اگر با React از قبل آشنا هستید، هنوز باید بعضی از موارد خاص

React-Native را یاد بگیرید، مانند مؤلفه‌های بومی. این آموزش برای همه مخاطبان است، چه شما تجربه کدنویسی با React داشته باشید و چه نداشته باشید. مطابق با سنت‌های باستانی مردم ما، ابتدا باید برنامه‌ای بسازیم که به غیر از گفتن “Hello World!” هیچ کاری نمی‌کند.

آموزش react native

1- اول از همه، ما باید React را import کنیم تا بتوانیم از JSX استفاده کنیم که در نهایت به مؤلفه‌های بومی هر سیستم‌عامل تبدیل می‌شود.

2- در خط 2، ما مؤلفه‌های Text و View را از react native، import می‌کنیم.

سپس به تابع HelloWorldApp برخورد می‌کنیم، که یک مؤلفه عملکردی است و رفتاری مشابه React برای وب دارد. این تابع یک مولفه View را با برخی از سبک‌ها و متن به عنوان فرزند خود برمی‌گرداند. مؤلفه Text به ما امکان رندر کردن متن را می‌دهد، در حالی که مؤلفه View یک ظرف (container) را ارائه می‌دهد. این ظرف شامل چندین سبک است، بیایید کاری را که هرکدام انجام می‌دهند تجزیه و تحلیل کنیم.

اولین سبکی که وجود دارد، flex: 1 است. flex prop تعیین می‌کند که چگونه item‌ها در فضای در دسترس در امتداد محور اصلی پر می‌شوند. از آنجا که ما فقط یک ظرف داریم، تمامی فضای موجود مؤلفه والد را دربر می‌گیرد. در این حالت، تنها مؤلفه همین است، بنابراین فضای صفحه نمایش موجود را اشغال می‌کند.

سبک بعدی justifyContent: “center” است. این سبک فرزندان یک ظرف را در مرکز محور اصلی ظرف تراز می‌کند و در آخر ما alignItems: “center” را داریم که فرزندان یک ظرف را در مرکز محور عرضی ظرف تراز می‌کند.

اول از همه، ES2015 (همچنین به عنوان ES6 شناخته می‌شود) مجموعه‌ای از پیشرفت‌ها در JavaScript است که اکنون بخشی از استاندارد رسمی است‌، اما هنوز توسط همه مرورگرها پشتیبانی نمی‌شود، بنابراین اغلب هنوز در توسعه وب استفاده نمی‌شود.

مورد غیرمعمول دیگر در این مثال کد <View><Text>Hello world!</Text></View> است. این JSX است – یک نحو برای تعبیه XML در JavaScript. بسیاری از چارچوب‌ها از یک زبان الگو اختصاصی استفاده می‌کنند که به شما امکان می‌دهد کدی را در زبان علامت‌گذاری قرار دهید. در React، این حالت معکوس است. JSX به شما امکان می‌دهد زبان نشانه‌گذاری خود را در داخل کد بنویسید. به نظر می‌رسد HTML در وب است‌، مگر اینکه به جای موارد وب مانند <div> یا <span>، شما از مؤلفه‌های React استفاده می‌کنید. در این حالت، <Text> یک مؤلفه اصلی است که مقداری متن را نمایش می‌دهد و View مانند <div> یا <span> است.

1-3- مؤلفه‌ها

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

2-3- Props

بیشتر مؤلفه‌ها هنگام ایجاد، با پارامترهای مختلف می‌توانند سفارشی شوند. این پارامترهای ایجاد را props می‌نامند. مؤلفه‌های شخصی شما همچنین می‌توانند از props استفاده کنند. با این کار می‌توانید یک مؤلفه‌ واحد درست کنید که در مکان‌های مختلف برنامه شما استفاده می‌شود.

آموزش react native

استفاده از name به عنوان یک props به ما امکان می‌دهد تا مؤلفه Greeting را سفارشی کنیم، بنابراین می‌توانیم از آن مؤلفه برای هر یک از Greeting‌ها استفاده مجدد کنیم. در این مثال از مؤلفه Greeting در JSX نیز استفاده می‌شود. قدرت انجام این کار باعث جالب‌شدن React است. مورد جدید دیگر که در اینجا رخ می‌دهد ، مؤلفه View است. View به عنوان ظرفی برای اجزای دیگر مفید است تا به شما در کنترل سبک و طرح کمک کند. با استفاده از props و مؤلفه‌های اصلیText ، Image و View، می‌توانید طیف گسترده‌ای از صفحات ایستا را ایجاد کنید. برای یادگیری اینکه چگونه برنامه خود را با گذشت زمان تغییر دهید، باید در مورد State بیاموزید.

3-3- State

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

آموزش react native

 

 

 

 

به این پست امتیاز دهید

روی ستاره های کلیک کنید و امتیاز بدید

میانگین امتیاز / 5. تعداد:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Enter Captcha Here : *

Reload Image