آموزش مبتدی react native همراه با مثال از صفر تا صد - قسمت ۱

سلام
در این مجموعه آموزشی قصد دارم که یک مثال ساده Todo List رو از ابتدا شروع کنم و در هر قسمت ۳ قدم برای تکمیلش انجام بدم و به زبان خیلی ساده برای همه منتشر کنم. این پروژه با ReactNative و یا به اختصار RN انجام میشه و در ادامه پکیج های navigation & native-base & Redux به برنامه اضافه می شوند. البته این همه ماجرا نیست و کلی ترفند و پکیج دیگه هم داریم که در طی آموزش بهشون اشاره و کاربردشون رو بررسی میکنم.

همچنین میتوانید سایر نوشته های من در ویرگول رو مطالعه کنید:

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

و بر روی شبیه ساز iOs:

قدم اول : نصب و راه اندازی

برای اینکه روی پلتفورم های خودتون (ویندوز - لینوکس - مک) بتونید به درستی پکیج های لازم رو دریافت کنید به سایت ری اکت نیتو مراجعه کنید و با استفاده از راهنما، اقدام به نصب موارد لازم کنید.میتونید از این لینک برای اینکار استفاده کنید. (سایت خود ری اکت نیتیو)

من در طی این آموزش از نصب شبیه ساز های اندروید و آی او اس و یا expo صرفنظر کردم و موضوع آموزش رو صرفا ری اکت نیتیو قرار دادم . ولی در صورتی که در نصب و اجرای شبیه ساز ها مشکل داشتید به من بگید تا آموزشی هم برای اون قسمت آماده کنم.

من از ادیتور قدرتمند WebStorm استفاده میکنم - شما میتونید از Microsoft Visual Studio code استفاده کنید. ادیتور های خوب دیگه هم مثل sublime و atom وجود دارند که با نصب ماژول های لازم ، قدرت وراحتی خوبی رو به کاربر ارائه میکنن.

در انتخاب ادیتور این نکته خیلی مهم هست:
در ابتدا همه دوستانی که تازه کار و مبتدی هستند سوال میکنند که فلان ادیتور رو داریم آیا خوبه یا عوضش کنیم یا اینکه کدومشون بهتره؟
در جواب عرض میکنم محصولات کمپانی jetBrain مثل همین webStorm و یا intellij
و کمپانی Microsoft مثل Visual Studio
تمامی موارد لازم برای شروع کار رو دارند و از قدرتمندترین های این عرصه هستند.
با توجه به اینکه Visual Studio Code و یا به اختصار VS رایگان هست و نیازی به کرک و سریال و ... نداره برای دوستان ممکن است که راحت تر به نظر برسه و محیط ساده تری رو هم داره و برای افراد مبتدی به شدت توصیه میشه.

حرف آخر اینکه ما ادیتور خوب ندایم ! و این برمیگرده به شما که چقدر با اون ادیتور راحت هستین و باهاش ارتباط برقرار میکنید و توقع چه امکاناتی از ادیتورتون دارید. یک ادیتور ساده مثل  sublime text و atom هم به اندازه کافی قدرتمند هستند که همه پروژه رو بشه با راحتی باهاشون پیش برد.

همچنین میتونید این سری آموزشی رو هم دنبال کنید:

قدم دوم: شروع پروژه

من اسم این پروژه رو todoList انتخاب کردم که شما میتونید از اسم دلخواه خودتون استفاده کنید.

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

با اجرای این دستور یک پوشه با اسم ورودی todoList ساخته میشه و همه ساختار پروژه به صورت خودکار داخل این پوشه قرار میگیره. توجه کنید که اگه دفعه اول هست که دستور ساخت یک پروژه رو اجرا میکنید به اینترنت نیاز دارید و در دفعه های بعدی نصب پکیج ها به صورت آفلاین انجام میشه .

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

حالا نوبت به اجرای پروژه برای بار اول است .
دقت کنید که این مرحله برای بار اول مدتی زمان بر است چون هنوز build انجام نشده ( یعنی هنوز کد های ما جاواسکریپتی هستند و به زبون های اندروید و سوئیفت ترجمه نشدند)

و اینکه برای دانلود موارد لازم به اینترنت آزاد نیاز دارید !
همه این ها برای بار اول است و برای دفعه های بعدی به سرعت از این مرحله عبور میکنید پس نگران نباشید.
برای اجرای نسخه اندروید react-native run-android
 و برای اجرای نسخه ios از دستور react-native run-ios در ترمینال استفاده کنید.
دقت کنید که لازم نیست هر دو دستور همزمان استفاده بشه و بعد از اجرای کامل یک شبیه ساز - دستور دوم را اجرا کنید. (‌معمولا توسعه دهنده های حرفه ای از هر دو شبیه ساز به صورت همزمان استفاده میکنند ولی برای شما که تو مرحله آموزش هستید اصلا نیازی به این کار نیست و میتونید با هر شبیه سازی که راحت تر هستید کار کنید)

این مرحله مدتی طول میکشه و بستگی به قدرت سیستم شما و سرعت اینترنت متغیر هست. تو این مرحله یک ترمینال دیگه هم باز میشه که Metro نام داره . این ترمینال در حین اجرای شبیه ساز باید باز بمونه و یه جورایی میشه گفت که سرور اجرایی ما برای شبیه ساز هست)

بعد از اینکه همه چیز به خوبی کار کرد باید این تصور رو داخل شبیه ساز ببینید:

قدم سوم:‌ بهبود بخشیدن به ساختار پروژه

برای اینکه در آینده بتونیم بهتر با پروژه ای که ساختیم ارتباط برقرار کنیم و بتونیم راحت به کد هامون دسترسی داشته باشیم لازم هست که از همین ابتدای پروژه، چند قواعد( نانوشته )رو رعایت کنیم تا در آینده نزدیک دچار مشکل نشیم.

برای این کار کافی است یک پوشه src که مخفف کلمه source هست رو به root پروژه اضافه کنیم و ازین پس همه کد هامون رو داخل این پوشه قرار بدیم.
بعد از ساخت این پوشه، ۲ پوشه دیگه به اسم های app و components هم داخل پوشه src میسازیم و
App.js رو که فایل اصلی هست که توسط index.js خونده میشه رو به همین پوشه app داخل src منتقل میکنیم.

دقت کنید ممکنه همه فایل هایی که اینجا میبینید رو نداشته باشید . فایل هایی مثل .gitignore و امثال این فایل ها که مربوط به پروژه ما نیستند. در صورتی که این طوری بود هیچ مشکلی نیست و نگران چیزی نباشید. مهم اینه که برنامه تون با اجرای دستور run توی ترمینال اجرا بشه !

ما تا اینجا هیچ کدی نزدیم و کار خاصی هم برای پروژه مون انجام ندادیم. فقط یکم نظم دادیم به ساختار پروژه و اون رو به شکل دلخواه خودمون درآوردیم.

در قسمت آینده ۳ قدم دیگه به پروژمون اضافه میکنیم و اون رو جلو میبریم.

برای دسترسی به سورس کد های پروژه میتونید به گیت هاب این پروژه مراجعه کنید.

قسمت های دوم و سوم این آموزش هم منتشر شد:

سایر نوشته های من در ویرگول:

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123/