آموزش React Native

ری اکت React Native مانند React است، اما به جای componentهای مبتنی بر وب، از componentهای native به عنوان اجزای سازنده application استفاده می کند. برای فهم ساختار پایه یک React Native application، باید کمی با مفاهیم پایه React مثل JSX، component ها، state، و propsآشنا باشید. اگر با Reactآشنا هستید، هنوز مواردی مختص React Nativeهستند که باید یاد بگیرید، مثل componentهای native. این آموزش برای همه مناسب است، چه تجربه کار با React داشته باشید چه نه.

شروع کار با React Native

این بخش آموزش React Native به شما کمک می کند اولین application React Native خود را نصب و buildکنید. اگر React Native را قبلا نصب کرده اید، می توانید این بخش را رها کنید و مستقیما از بخش مفاهیم پایه در React Native شروع کنید.

اگر با پیش زمینه ای از وب می آیید، ساده ترین روش شروع کار با React Native ابزارهای Expo است. می توانید بدون نصب و راه اندازی Xcode یا Android Studio پروژه خود را راه اندازی کنید. توسط Expo CLI می توانید یک محیط توسعه روی سیستم خود راه اندازی کنید و در عرض چند دقیقه شروع به توسعه application React Native خود کنید. برای توسعه سریع، میتوانید از Snack برای توسعه و اجرای React Nativeدر مرورگر خود استفاده کنید.

اگر با توسعه ی applicationبه صورت native(جاوا یا swift) آشنا هستید، می توانید از React Native CLIاستفاده کنید. برای شروع باید XCodeیا Android Studio را نصب داشته باشید.

شروع با Expo CLI

با این فرض که قبلا Node version10 به بالا را نصب کرده اید، می توانید از npm برای نصب ابزار خط فرمان Expo CLI استفاده کنید:

npm install -g expo-cli

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

expo init AwesomeProject

cd AwesomeProject

npm start # you can also use: expo start

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

اجرای یک Application React Native

برنامه مخصوص Client Expo را روی iOS یا android خود نصب کنید و به شبکه wireless مشترک با کامپیوترتان، وصل شوید. روی android، با استفاده از application Expoکد QR را از ترمینال scanکنید تا برنامه تان باز شود. روی iOS، دستورالعمل های روی صفحه را دنبال کنید تا لینک بگیرید.

تغییر در Application

حال که توانستید بدون مشکل application را اجرا کنید، می توانید آن را تغییر دهید. فایل App.js را در ویرایشگر دلخواه خود باز کنید و تغییری در برنامه بدهید. بعد از ذخیره آخرین تغییرات، applicationبه طور اتوماتیک reload می شود.

تمام شد!

تبریک می گویم. شما در دوره آموزش React Native اولین برنامه React Native خود را اجرا کرده اید!

اگر هنگام کار با Expo به مشکلی برخوردید، قبل از ایجاد یک issueجدید، لطفا issue های موجود را ببینید:

• صفحه ی Expo CLI issues (برای مشکلات مرتبط یا Expo CLI)
• صفحه ی Expo issues (برای مشکلات مربوط به Expo clientیا SDK)

اگر می خواهید درمورد React Native بیشتر بدانید با ادامه این آموزش همراه باشید.

اجرای برنامه روی شبیه ساز یا Virtual device

با Expo CLIبراحتی می توانید برنامه تان را روی device واقعی بدون راه اندازی هیچ گونه محیط توسعه، اجرا کنید. اگر می خواهید برنامه را روی شبیه ساز iOS یا Virtual device android اجرا کنید، به بخش شروع با React Native CLI مراجعه کنید، برای اینکار باید Xcode یا محیط توسعه لازم برای android را راه اندازی کنید.

پس از راه اندازی پیش نیازها، می توانید با دستور npm run android برنامه را روی Virtual device android اجرا کنید. با دستور npm run ios روی Mac، می توانید برنامه را روی شبیه ساز iOSاجرا کنید.

هشدارها

از آنجا که موقع استفاده از Expoبرای ایجاد پروژه از هیچ کد native (برای مثال جاوا) استفاده نمی کنید، نمی توان ماژول های native سفارشی به غیر از آنچه API های React Nativeفراهم می کند و component های موجود در application Client Expo، استفاده کرد.

اگر می دانید که قرار است نهایتا از کد native استفاده کنید، Expo همچنان گرینه خوبی برای شروع است. در مرحله آخر، می توانید با eject کردن پروژه، Buildهای Native بسازید. پس از eject کردن پروژه، بخش شروع با React Native CLI برای ادامه کار مرجع شماست.

در Expo CLI پروژه شما را به گونه ای config می کند که از جدیدترین version های React Native که توسط application Client Expo پشتیبانی می شود، استفاده کند. application Client Expo معمولا یک هفته پس از ارائه ی version satble از React Native، پشتیبانی از آن را شروع می کند.

اگر می خواهید React Native را در یک پروژه موجود ادغام کنید، بهتر است Expo CLIرا کنار بگذارید و مستقیم از راه اندازی محیط توسعه native(Xcode یا Android Studio) شروع کنید. این بخش شروع با React Native CLI به این موضوع پرداخته ایم.

مفاهیم پایه React Native

نیتیو Native مانند React است، اما به جای component های مبتنی بر وب، از component های native به عنوان اجزای سازنده application استفاده می کند. برای فهم ساختار پایه یک React Native application، باید کمی با مفاهیم پایه Reactمثل JSX، componentها، state، و propsآشنا باشید. اگر با React آشنا هستید، هنوز مواردی مختص React Native هستند که باید یاد بگیرید، مثل component های native. این آموزش برای همه مناسب است، چه تجربه کار با React داشته باشید چه نه.

اولین برنامه، Hello World!

طبق سنت قدیمی برنامه نویس ها، اولین برنامه ما یک application ساده است که هیچ کار نمی کند جز اینکه یک Hello, World! ساده را نشان دهد:

import React, { Component }   from 'react';

import { Text, View } from   'react-native';

export default class   HelloWorldApp extends Component {

render() {

return (

< view   style=&quot{ {&quot flex:=&quot&quot 1,=&quot&quot   justifycontent:=&quot&quot &quotcenter&quot,=&quot&quot   alignitems:=&quot&quot &quotcenter&quot=&quot&quot }}=&quot &quot   >

< text   >Hello, world!< /text >

< /view   >

);

}

}

می توانید در شبیه سازهای تحت وب با کدها کار کنید. میتوانید کد را در فایل App.js روی سیستم خودتان بگذارید و یک appروی سیستم خودتان بسازید.

چه اتفاقی می افتد؟

کدهایی که نوشتیم ممکن است اصلا شبیه جاوا اسکریپت نباشد. نگران نباشید، این آینده ی جاوا اسکریپت است.

در ES2015 یا همان ES6 مجموعه ای از تغییرات روی جاوا اسکریپت است که حالا بخشی از استاندارد رسمی آن شده، اما هنوز همه ی مرورگرها از آن پشتیبانی نمی کنند، به همین دلیل هنوز به قدر کافی در زمان develop برای وب استفاده نمی شوند. React Native از ES2015 پشتیبانی می کند. می توانید از آن بدون هیچ دغدغه ای درمورد سازگاری استفاده کنید. کلمات کلیدی مثل import، from، class، extends در مثال بالا همه از ویژگی های ES2015 هستند. اگر با ES2015 آشنا نیستید، احتمالا فقط با خواندن همین آموزش آن را یاد می گیرید. این صفحه (لینک) مروری روی ویژگی های ES2015 دارد.

قطعه کد نامعمول دیگر این مثال < code >< view >< text >Hello world!< /text >< /view >< /code > است. این JSX است. این syntax است که XML را درون جاوااسکریپت می نشاند. Framework های زیادی از زبان قالبی خاصی استفاده می کنند که به شما اجازه استفاده از کد درون markup language را بدهد. این syntaxشبیه Html تحت وب به نظر می رسد، با این تفاوت که به جای استفاده از المان هایی چون تگ div یا تگ span، از component های Reactاستفاده می شود. در این مثال، < text > یک component آماده است که متنی را نشان می دهد و Viewمثل تگ span است.< /text>

کامپوننت ها

این قطعه کد یک componentجدید را تعریف می کند. وقتی یک React Native applicationمی نویسید چندین component خواهید داشت. هرچیز که روی صفحه می بینید یک componentمحسوب می شود. یک component می تواند بسیار ساده باشد. تنها چیزی که نیاز دارد یک تابع render است که JSX برای render شدن برمی گرداند.

این app کار زیادی نمی کند. برای اینکه با component ها کارهای جالبتری انجام دهیم باید درمورد Propsبدانیم.

شروع با React Native CLI

اگر می خواهید کد native در پروژه تان داشته باشید از این دستور العمل پیروی کنید. برای مثال، اگر می خواهید React Native را در یک application که قبلا ایجاد کرده اید اضافه کنید، یا اگر یک application با Expo یا ابزار Create React Native App توسعه داده اید و "eject" کرده اید، به این بخش نیاز دارید.

این دستورالعمل ها به سیستم عامل مورد استفاده برای توسعه وابسته است و اینکه می خواهید برای iOS یا android برنامه بنویسید. اگر می خواهید برای هردو پلتفرم iOS و android توسعه بدهید، مشکلی نیست، یکی از آن ها را انتخاب کنید، چرا که هرکدام دستورالعمل متفاوتی دارند:

محیط توسعه: Mac، Windows، Linux

محیط اجرای نهایی: android، iOS

در قسمت بعد آموزش React Native راه اندازی محیط توسعه را آموزش می دهیم