React Native ویژگی ها و عملکردهای جدیدی را با انگیزه کمک به توسعه دهندگان در نوشتن کد بهتر اضافه می کند. همانطور که جامعه توسعه برای یک اکوسیستم بهتر آماده می شود، افزودنی هایی مانند React Native Codegen ساخت راه حل های موثر را آسان تر و کارآمدتر می کند.
راه اندازی Codegen در راستای تسریع توسعه React Native با خودکارسازی وظایف تکراری و کمک به توسعه دهندگان برای استخراج اسکریپت های کد است.
طبق نسخه رسمی React Native، Codegen به عنوان یک ستون توسعه واجد شرایط نیست. در بهترین حالت، این ابزاری است برای آسان کردن کار برنامه نویس.
آیا میخواهید بیشتر بدانید؟ برای یافتن اطلاعات دقیق درباره Codegen و نحوه استفاده یک شرکت توسعه برنامه بومی React از آن به ادامه مطلب مراجعه کنید.
React Native و Codegen Component چیست؟
React Native یک است توسعه اپلیکیشن موبایل قاب با استفاده از react native، یک شرکت توسعه‌دهنده اپلیکیشن موبایل می‌تواند اپلیکیشن‌های چند پلتفرمی بسازد. آنها این برنامه ها را با جاوا اسکریپت می سازند که زبان برنامه نویسی اصلی React و React Native است.
ساخت اپلیکیشن های چند پلتفرمی آسان تر و مقرون به صرفه تر از اپلیکیشن های بومی است. تصور کنید به جای نوشتن کد برای هر پلتفرم به طور جداگانه، فقط یک بار کار می کنید تا برنامه ای ایجاد کنید که روی اندروید، iOS و ویندوز اجرا شود.
توسعه دهندگان می توانند از همان پایه کد دوباره استفاده کنند و آن را مطابق با پلتفرم تغییر دهند. در نتیجه، برنامه ها به سرعت و با هزینه های نسبتا کمتر ساخته می شوند.
در حالی که سازگاری بین پلتفرم یکی از جنبه‌های اصلی React Native است، مؤلفه Codegen یکی دیگر از موارد اضافی مفید است.
کدگن به تولید مولفه ها و قلاب های ایمن برای برنامه کمک می کند. کاری که انجام می دهد این است که کد داربست را تولید می کند که ساختار اساسی را تشکیل می دهد که می توانید بر اساس آن بسازید برنامه خود را ایجاد کنید.
شما می توانید انتخاب کنید که تمام کدهای داربست را به صورت دستی بنویسید، اما با یک Codegen قابل خواندن، کارها می توانند سریعتر تکمیل شوند.
در React Native، هنگام ساختن یک برنامه iOS یا Android، Codegen به طور خودکار فراخوانی می شود. کدجن از زبان برنامه نویسی TypeScript برای نوشتن کد برای اجزای برنامه استفاده می کند. برای رمزگذاری، Codegen به تعریف TypeScript ذخیره شده در فایل ها اشاره می کند.
علاوه بر این، Codegen یک ابزار خط فرمان است که کد را تجزیه و تحلیل می‌کند و کد جزء ایمن تولید می‌کند. هنگامی که از Codegen استفاده می کنید، به طور خودکار مؤلفه ها و قلاب های پایگاه کد را دریافت خواهید کرد.
بنابراین، در اصل، Codegen کار یک برنامه نویس را تا حد زیادی آسان می کند. زمان و تلاش توسعه را کاهش می دهد و کارهای تکراری را خودکار می کند. توسعه دهندگان می توانند از زمان اضافی برای بهبود بیشتر کار خود و نوآوری استفاده کنند.
برای معرفی به‌روزرسانی‌های Codegen، با React Native نسخه 0.70، تیم یک روش یکپارچه برای تعریف مشخصات Codegen معرفی کرد.
روش جدید به طور مشابه برای برنامه های iOS و اندروید کار می کند. در نسخه‌های قبلی، توسعه‌دهندگان مجبور بودند یک فایل پیکربندی اندروید جداگانه مانند ساخت و ساز. کلاس
توسعه دهندگان اکنون می توانند پیکربندی ها را مستقیماً در آن تعریف کنند package.json;
با پیروی از این سیستم، کارکنان مسئول نگهداری از کتابخانه می توانند تجربه ثابت تری داشته باشند، به خصوص در هنگام مهاجرت پایه کد به معماری جدید.
قبل از اینکه بدانیم چگونه از Codegen استفاده کنیم، به یاد داشته باشید که مربوط به ساخت برنامه است. اسکریپت های مورد نیاز توسعه دهندگان برای فراخوانی Codegen در دسترس هستند واکنش نشان می دهد مخزن NPM
فرآیند استفاده از یک جزء Codegen در React Native
برای استفاده از Codegen، توسعه دهندگان باید JSON را درک کنند، زیرا توسعه دهندگان باید اطلاعات لازم را در فایل JSON ارائه دهند. مؤلفه Codegen کد جاوا اسکریپت مورد نیاز را با توجه به مشخصات به اشتراک گذاشته شده با فایل تولید می کند.
در اینجا مراحل اساسی برای استفاده از Codegen برای کار توسعه شما آمده است.
1. با تعریف رابط یک جزء در a شروع کنید .d.ts فایل. مطمئن شوید که انواع prop و انواع حالت مؤلفه‌ای را که برای آن نیاز به تولید خودکار کد در فایل دارید، اضافه کنید.
2. مرحله بعدی نصب ابزار Codegen به صورت وابستگی به توسعه دهندگان در پروژه برای نصب React Native Codegen از دستور زیر استفاده کنید.
npm نصب -g react-native-codegen
3. سپس یک را ایجاد کنید tsx فایل برای مؤلفه ای که می خواهید برای آن کد تولید کنید. سپس، واردات React و وابستگی های مؤلفه لازم را اضافه کنید.
4. در ادامه، باید ابزار Codegen را در بالای صفحه وارد کنید tsx فایل در ابتدا ایجاد شد برای تکمیل مرحله 4، اسکریپت کد را دنبال کنید.
5. برای گام بعدی، ما می خواهیم کامپوننت Codegen با گرفتن اطلاعات مربوط به یک عنصر JSX را برگرداند پشتیبانی و مرجع. برای این کار از کد زیر استفاده کنید.
6. مرحله بعدی استفاده از ابزار Codegen برای تولید کد TypeScript برای کامپوننت تعریف شده در فایل قبلی است.
کد به دست آمده را می توان MyComponentNative نامید و به همین ترتیب برای سایر قسمت های پروژه استفاده کرد. این کامپوننت را برای استفاده مانند هر مؤلفه دیگر React Native تغییر می دهد.
این یک توضیح اساسی در مورد نحوه استفاده از ابزار codegen بود. اجرای دقیق آن به نیازها و نیازهای پروژه شما بستگی دارد.
در زیر مثالی از نحوه استفاده از Codegen برای تولید کد یک جزء Button آورده شده است.
پس از نصب، توسعه دهندگان باید یک فایل JSON برای تعریف اجزا ایجاد کنند. برای مرجع شما، اسکریپت کد زیر یک فایل JSON است که یک جزء دکمه را تعریف می کند.
به مؤلفه Button و دو ویژگی آن که از طریق یک فایل JSON تعریف شده است توجه کنید. جزئیات مولفه Button عبارتند از:
- سربرگ – که از نوع رشته ای است
- onPress – که یک تابع prop بدون آرگومان و بدون مقدار بازگشتی است.
در ادامه، برای تولید کد جاوا اسکریپت برای همان جزء دکمه، دستور زیر را اجرا کنید.
react-native-codegen MyButton.json MyButton.js را تولید می کند
در نتیجه، توسعه دهندگان دسترسی مستقیم به فایلی به نام MyButton.js دارند که حاوی کد نوع ایمن مؤلفه است.
این یک برنامه از مؤلفه React Native Codegen را خلاصه می کند. همین ابزار همچنین می تواند رابط های TypeScript و Flow Types را تولید کند.
استفاده از این دو برنامه، استفاده از بررسی نوع و تکمیل کد در IDE را آسان‌تر می‌کند. با این ویژگی، نوشتن و نگهداری کد ساده می شود.
همچنین می توانیم از Codegen با TypeScript استفاده کنیم. این چگونه است؟
در اینجا نیز، توسعه دهندگان باید TypeScript را با اطلاعاتی در مورد کامپوننت ها و هوک ها ارسال کنند. با استفاده از این، Codegen می تواند به محتویات فایل نگاه کند و کد ایمن برای کامپوننت و هوک تولید کند.
برای مثال، گرفتن یک فایل TypeScript، Button.tsx حاوی کد یک جزء دکمه است. توسعه‌دهندگان می‌توانند مؤلفه‌های ایمن تایپ را با دستور تولید کنند.
npx react-native-codegen تولید –componentName Button –schema
این دستور به Codegen دستور می دهد تا یک جزء محافظت شده از نوع Button را تولید کند. با استفاده از مسیر فایل TypeScript “
مزایای Codegen برای توسعه اپلیکیشن موبایل
هنگامی که فیس بوک در سال 2018 معماری جدیدی را برای React Native معرفی کرد، انگیزه پشت آن رفع برخی ساختارها و مشکلات طولانی مدت بود. هدف این است که آن را آسان تر کنید ایجاد اپلیکیشن های چند پلتفرمی. در اینجا برخی از مزایای مؤلفه Codegen در توسعه برنامه React Native آورده شده است.
کیفیت کد بهتر:
با استفاده از مؤلفه Codegen، توسعه دهندگان می توانند کد بدون خطا را در کسری از زمان بنویسند زیرا بخش تولید کد را خودکار می کند.
همچنین، تشخیص خطا با Codegen در زمان کامپایل امکان پذیر است، برخلاف موارد قبلی در زمان اجرا. در نتیجه، الف شرکت توسعه اپلیکیشن موبایل در نهایت باعث صرفه جویی در زمان و تلاش می شود در غیر این صورت صرف رفع اشکال می شود.
تعامل سریعتر با توسعه:
Codegen تمرین تولید کد را حداقل برای کارهای تکراری خودکار می کند. این به طور خودکار اجزا و قلاب های ایمن را تولید می کند و به توسعه دهندگان این امکان را می دهد تا بدون تأکید بیش از حد بر اجرای پروژه، روی ساختن عملکرد اصلی برنامه تمرکز کنند.
کد قابل استفاده مجدد:
یکی از مزایای اصلی توسعه یک برنامه بومی React استفاده مجدد از کد است. از آنجایی که Codegen بخشی از react native است، کد تولید شده توسط این ابزار قابل استفاده مجدد است.
علاوه بر این، برای اجرای سریعتر، می‌توانید یک کتابخانه جداگانه از مؤلفه‌های ایمن نوع و اسکریپت کد تولید شده با Codegen ایجاد کنید. استفاده از این کد اسکریپت ها به شما کمک می کند تا زمان و تلاش زیادی را ذخیره کنید.
ساخت برنامه های کاربردی چند پلتفرمی:
می توانید از Codegen برای ایجاد برنامه های iOS و Android استفاده کنید. Codegen می تواند اسکریپت های کد ایمن برای هر دو نوع برنامه، منحصراً برای هر یک از این پلتفرم ها تولید کند. در نتیجه، توسعه دهندگان نیازی به نوشتن کد جداگانه برای iOS و Android ندارند.
بیایید آن را جمع بندی کنیم
React Native Codegen چندین مزیت را برای توسعه دهندگان ارائه می دهد توسعه اپلیکیشن موبایل شرکت، کمک به آنها در ساخت برنامه های iOS و Android با کیفیت بالا. به‌علاوه، توسعه‌دهندگان با استفاده از Codegen ساخت اپلیکیشن را آسان‌تر می‌کنند، زیرا به نوشتن کدهای با کیفیت بالا، بدون خطا و قابل استفاده مجدد کمک می‌کند.
با استفاده از Codegen می توانید کار مورد نیاز برای نوشتن کد دیگ بخار را کاهش دهید و همیشه کدهای به روز و قابل نگهداری داشته باشید. در نهایت، کدژن React Native یکی از راه‌های ساخت اپلیکیشن‌های آماده عملکرد است.
پست درک React Native و فرآیند استفاده از آن برای توسعه اپلیکیشن اندروید و iOS اولین بار در DEV IT Journal ظاهر شد.