آنچه باید قبل از یادگیری React Native بیاموزید

اگر می خواهید سطح حرفه خود را به عنوان یک توسعه دهنده به بالاتر ببرید، باید React و React Native را در کمربند ابزار خود داشته باشید. ایجاد اپلیکیشن های موبایل با استفاده از فریمورک های کراس پلتفرمی این روزها به trend توسعه تبدیل شده است.

معرفی React Native

فریمورک‌ های اپلیکشین کراس پلتفرم مانند React Native می‌توانند به شما کمک کنند تا برنامه‌های موبایلی native را توسعه دهید که هم در دستگاه‌های Android و iOS کار می‌کنند.اگر هنوز ریکت نیتیو را نصب کردید، آموزش نصب و راه اندازی ریکت نیتیو را مطالعه کنید.

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

React Native چیست؟

React Native یک فریم ورک جاوا اسکریپت است که برای ساخت برنامه‌های کراس پلتفرمی و به صورت رندر بومی (natively-rendering) استفاده می‌شود و بر اساس کتابخانه React (توسط فیس بوک) ایجاد شده است.

مانند React، React Native برای ساخت کامپوننت های رابط کاربری(UI Component) استفاده می شود، با یک مزیت اضافه: React Native می تواند UI را در پلتفرم های مختلف، نه فقط در مرورگر، ارائه دهد. علاوه بر برنامه‌های مبتنی بر وب، از React Native می‌توان برای ساخت برنامه‌ها برای اندروید، iOS، macOS و ویندوز استفاده کرد.

React Native مجموعه ای استاندارد از API ها را برای ساخت کامپوننت های UI ارائه می کند، در نتیجه توسعه دهندگان را قادر می سازد تنها یک بار کد بنویسند و آن را بر روی چندین پلتفرم اجرا کنند. یادگیری React Native برای افرادی که از background توسعه وب می آیند بسیار آسان است.

توسعه‌دهنده‌ای که React را می‌شناسد می‌تواند برای هر پلتفرمی که توسط React Native پشتیبانی می‌شود، برنامه‌هایی را ایجاد کند. HTML، CSS و جاوا اسکریپت ، technology های اصلی وب هستند که برای یادگیری React مورد نیاز هستند. React صرفاً در جاوا اسکریپت با برخی دستورات HTML مانند به نام JSX برای ایجاد کامپوننت های UI نوشته شده است. با استفاده از CSS، می توانید کامپوننت های رابط کاربری را style های مختلف بدهید.

اکنون، بیایید نگاهی دقیق‌تر به این تکنولوژی ‌ها به صورت جداگانه بیندازیم.

HTML و CSS

HTML و CSS ، تکنولوژی های اصلی در توسعه وب هستند. HTML اسکلتی است که element ها و layout ‌ها را برای یک web page ایجاد می‌کند و CSS به این element و layout یک style می‌دهد. تسلط بر HTML و CSS یک مرحله حیاتی است.

منابعی برای یادگیری HTML و CSS

• https://www.w3schools.com/html/
• https://www.w3schools.com/css/
• https://developer.mozilla.org/en-US/docs/Learn/HTML/IntroductiontoHTML
• https://developer.mozilla.org/en-US/docs/Learn/CSS

(جاوا اسکریپت) JavaScript

هنگامی که با HTML و CSS کنار آمدید، می توانید یادگیری جاوا اسکریپت را شروع کنید. جاوا اسکریپت یک زبان برنامه نویسی است که به شما اجازه می دهد تا تعاملات و منطق را به صفحات وب خود اضافه کنید. با استفاده از جاوا اسکریپت، می‌توانید به event  هایی مانند کلیک روی دکمه‌ها یا input focus گوش دهید و تعاملی را به برنامه‌های خود اضافه کنید.

به طور مشابه، در React Native ، می توانید به event  های مختلف گوش دهید(listen)، به API هایnative  دسترسی داشته باشید و core business logic (business logic بخشی از برنامه ای است که قوانین تجارت در دنیای واقعی را رمزنگاری میکند که تعیین میکند داده چگونه ذخیره، ایجاد و تغییر میکند) را با استفاده از جاوا اسکریپت بنویسید. بنابراین، بسیار مهم است که قبل از یادگیری React Native با جاوا اسکریپت راحت باشید.

اصول جاوا اسکریپت

اولین چیزی که در جاوا اسکریپت باید پوشش دهید، اصول زبان است. این به معنای آشنایی با syntax و basic operation ، درک نحوه اعلان متغیرها و object ها و تعریف و فراخوانی function ها است. همچنین باید نحوه کار با object ها ، آرایه ها، string ها و date ها را با استفاده از متدهای جاوا اسکریپت یاد بگیرید.

DOM (manipulation)

هنگام نوشتن جاوا اسکریپت، یکی از رایج ترین کارهایی که انجام می دهید دستکاری DOM است.

Document Object Model (DOM) یک ساختار درختی است که صفحه وب فعلی را نشان می دهد. مرورگر DOM API توسعه دهندگان را قادر می سازد تا به element )عناصر( HTML به صورت برنامه نویسی دسترسی داشته باشند تا business logic (منطق تجاری) مورد نیاز را اضافه کنند.

به عنوان مثال، می توانید رنگ یک متن را هنگامی که نشانگر ماوس روی آن قرار دارد تغییر دهید

<span id="sampleText">
Hello World
</span>
const text = document.getElementById("sampleText");
 
text.addEventListener("mouseover", function(){
    text.style.color = 'red'
});

آبجکت document ، متدهای مختلفی برای دسترسی و افزودن تعامل به عناصر HTML را دارد.

ویژگی های مدرن (ES6+)

جاوا اسکریپت از زمان پیدایش خود راه طولانی را پیموده است. فیچر های جدید هر سال به طور فعال اضافه می شود و به عنوان یک توسعه دهنده جاوا اسکریپت، باید با آنها همراه باشید. از سال 2015، بسیاری از     فیچر ‌ها مانند arrow function ، , array destructuring object  و اعلان‌های متغیر const و let معرفی شده‌اند و معمولاً هنگام کار با کتابخانه‌هایی مانند React استفاده می‌شوند.

یکی دیگر از ویژگی های مهم برای یادگیری، نحوه استفاده از Fetch API برای دریافت و ارسال داده ها به سرویس های خارجی است. که یک نیاز بسیار رایج در اکثر برنامه های کاربردی وب و موبایل است.

یادگیری اصول جاوا اسکریپت و فیچر های ES6+ به شما یک زیرساخت محکم می دهد و به شما کمک می کند تا مفاهیم اصلی React Native را بهتر درک کنید.

تا این لحظه، تکنولوژی هایی که تاکنون ذکر شد در توسعه وب بسیار رایج هستند. از اینجا به بعد شما می توانید انتخاب کنید که به یک کتابخانه جاوا اسکریپت مانند React یا فریمورکی مانند Vue یا Angular مسلط شوید، و آن وقت است که می توانید واقعاً در دنیای جاوا اسکریپت غواصی کنید.

با این حال، قبل از رفتن به سراغ فریم ورک ها، بسیار مهم است که دانش کاملی از HTML، CSS و جاوا اسکریپت داشته باشید زیرا اینها مهارت های اساسی هستند که در توسعه خود به آنها نیاز خواهید داشت.

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

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Are-introductionto_JavaScript
• https://javascript.info
• https://www.w3schools.com/js

React

React یک کتابخانه جاوا اسکریپت است که توسعه دهندگان را قادر می سازد component های رابط کاربری ایجاد کنند. صفحات وب رایج از HTML و CSS برای ساخت UI استفاده می کنند، اما با React، رابط کاربری صرفاً با استفاده از جاوا اسکریپت ساخته می شود. React همچنین به داشتن یک virtual DOM under the hood معروف است که به جای دستکاری مستقیم DOM استفاده می شود.

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

DOM مجازی(Virtual DOM)

React یک DOM مجازی (VDOM) ایجاد می‌کند که نمایشی از ساختار DOM است که باید در صفحه وب ارائه شود. اگر می خواهید درک عمیق تری از نحوه عملکرد داخلی React به دست آورید، باید در مورد VDOM بیاموزید. Virtual DOM یک مفهوم فریمورک آگنوستیک است، بنابراین در framework های دیگری مانند Vue نیز استفاده می شود.

JSX

با استفاده از React، می‌توانید UI component قابل استفاده مجدد بسازید و داده‌ها را بین آنها ارسال کنید. کامپوننت ها با استفاده از یک پسوند نحوی (syntax extension) خاص جاوا اسکریپت به نام JSX (JavaScript XML) نوشته می شوند.

JSX شبیه به سینتکس HTML است و بسیار قدرتمند است، زیرا می تواند عبارات جاوا اسکریپت را مدیریت کند. در JSX، به جای attribute های HTML، از props برای انتقال داده ها از کامپوننت های والد(parent component) به کامپوننت های فرزند(child component) استفاده می شود.

Data handling

کامپوننت ها همچنین می توانند داده های خود را به صورت داخلی(internally) با استفاده از state مدیریت کنند. props و state دو مفهوم بسیار مهم در React هستند. داشتن درک روشنی از نحوه پردازش داده ها در React بسیار مهم است، زیرا این کاری است که شما اغلب انجام می دهید.

React components (کامپوننت های react)

دو نوع کامپوننت در React  وجود دارد – class component و function component.

class components متدهای چرخه حیات (چرخه حیات) متفاوتی دارند که در طی فرآیند render فراخوانی می شوند. function component می‌توانند از به کارگیری hookها برای مدیریت state های مختلف استفاده کنند. هر دو نوع کامپوننت مزایا و معایب خود را دارند و شما باید بدانید که کدام یک مناسب برای استفاده شما است.

یادگیری بیشتر

هنگامی که اصول React پوشش داده شد، می توانید به موضوعات پیشرفته مانند context ، component pattern ، پورتال ها و تست کامپوننت ها بپردازید. علاوه بر این، می‌توانید کتابخانه‌های third party مختلف مانند Redux، Material UI یا Axios را امتحان کنید.

با package installer های  npm یا yarn آشنا شوید زیرا اغلب با پکیج ها سر و کار دارید.

بهترین مکان برای یادگیری React از documentation رسمی است. اگر خواندن کار شما نیست، می توانید منابع زیادی را در YouTube و Udemy پیدا کنید.

موضوعاتی مانند JSX، کامپوننت‌ها، متدهای چرخه حیات، hook ها و مدیریت state ، المان های اصلی توسعه اپلیکیشن با React Native هستند. شما روزانه به عنوان یک توسعه دهنده React Native روی موضوعات ذکر شده کار خواهید کرد، بنابراین قبل از یادگیری React Native باید با آنها راحت باشید.

نتیجه گیری

در حال حاضر، امیدوارم که ایده روشنی در مورد موضوعات و تکنولوژی هایی که باید قبل از ورود به React Native یاد بگیرید، داشته باشید. در این مقاله ، نحوه یادگیری تکنولوژی های وب مانند HTML، CSS، جاوا اسکریپت و React را توضیح دادیم که می‌تواند به شما در یادگیری React Native کمک کند. من قویاً به شما توصیه می کنم که با جاوا اسکریپت راحت باشید زیرا زبان برنامه نویسی مورد استفاده در React Native است. داشتن یک پایه محکم به شما کمک می کند تا یادگیری را به آسانی شروع کنید و همچنین به شما کمک می کند تا مشکلات را سریعتر عیب یابی کنید.

برای آماده شدن برای یادگیری React Native، می‌توانید کمی در مورد زبان‌های جاوا و سوئیفت یا Objective-C نیز بیاموزید، زیرا این زبان‌ها زبان‌های برنامه‌نویسی اصلی برای توسعه اندروید و iOS هستند.

فقط انجام تئوری کافی نیست. هنگامی که با syntax آشنا شدید، با ایجاد پروژه های کوچک مانند یک ماشین حساب شروع کنید. همانطور که تمرین می کنید، بیشتر متوجه می شوید و با چالش ها روبرو می شوید. هر چه بیشتر به حل مسئله بپردازید، بهتر است. اگر در مشکلی گیر کردید، می توانید در وب جستجو کنید، زیرا اکثر راه حل ها از قبل در دسترس هستند.