نکات ریز در موردreact-native

پیش نیاز react-native

Html-css-js-react

البته جاوا اسکریپتی که نوشتم نه این که شما چیز های که مثلا تو node.js بلد باشی منظورم به اکمااسکریپت و مباحثی که برنامه نویس فرانت اند دولوپر باید بلد باشه مثل style خوبی داشته ومباحث مربوط به api گرفتن بلد باشه. react که نوشتم نه این که طرف خیلی حرفه ای باشه که وب سایت با تمام اختیارات بالا بیاره خود سینتکس react بلد باشه فرقی نمیکنه طرف class component کار کنه یا با function و hook کار کنه وحتما state-management بلد باشه خود من اوایل که اپلیکیشن برنامه نویسی میکردم بدون state-management بود واینجا دو بخش از برنامه نویسی کاملا از دست اپ من یکی backend development یکی front-enddevelopment حرص می خورد.

کن یاد بگیری منم قبول کردم و سعی میکنم اپ هایی که جلو میرم معمولا با context-api کار کنم ولی نیاز به middlewareداشته باشه با redux کار کنم و کد redux به ساده ترین شکل ممکن بنویسم این چند کد نگاه کنید.

Redux

من برای یک reducer سه صفحه باز کردم این چه کاری اخه طرف اگه تازه کار باشه فکر میکنه redux چقدر سخته بی خیال میشه ،بیایید برای سادگی کد هر چیزی یک جا تعریف کنید و به جای سه صفحه درست کردن دو صفحه درست کنید. یا تو index با یک const جدا این کار انجام بدید که من هردو انجام میدم ببینید کدوم بهتر هست.

البته خود من گزینه ی اول می پسندم معمولا اینطوری کد نویسی میکنم که همه reducer درست کنم بعد تو index معرفی کنم ولی یکی اینطوری راحت تراست.

من اینجا اومدم واسه هر چیزی const درست کردم توی بعد تو react-domو قسمت provider اون store معرفی کردم.

من خودم با قسمت اول موافقم بقیه مثال ها با همون قسمت اول در مورد redux می زنم.

lifecycle

چیز مهمی که خیلی مهمه بلد باشی در مورد react مفهوم lifecycle ها یک عکس از اقای dan Abramov نشون میدم که مفهوم lifecycle به زیباترین مفهوم کشیده وهر کسی این عکس مفهومش متوجه بشه مفهوم lifecycle به خوبی میدونه

ما الان دو راه برای ساخت کامپونت تو react داریم یکی class component کار میکنه یکی با hook componentوfunction کار میکنه و منم با این طرز کد حال می کنم که و حتما اگه اپی دارید که نسخه پایین حتما به نسخه 0.58 به بعد به روزش کنی و سعی کنید همه چیز با function و hook کار کنید کد نویسی بهتر میشه به این مثال توجه کنید.

حالا همین کد میشه به زیباترین نحو ممکن با hook نوشت وکدش خیلی مفهومی تر می شود.

قسمت اخرش این طوری

count.map((item,index)=>(

<div id={item.id>{item.title}</div>))

use effect(()=>{

دستوری که قراره mount بشه این با component did mount فرقی نداره

{(

حالا دیدی با hook چقدر کدتون کمتر شد پس به جای class component از function component و hook استفاده کنید.

از چه پکیج هایی برای زیبا سازی یک اپلیکیشن تو react-native استفاده کنم.

React-native-elements react-native-paper native-base react-native-vector-icons

از چه پکیج هایی برای map استفاده کنم .

React-native-maps mapbox-gl