239000–رایگان!
آموزش react native دوره ای است که مفاهیم پایه و کاربردی فریمورک محبوب react native به صورت کاملا پروژه محور و جامع آموزش داده می شود. هدفی که در این دوره دنبال می کنیم یادیگری عمیق و مفهومی React Native است تا شما قدم به قدم با مفاهیم اساسی react native آشنا شوید، فریمورکی که با استفاده از آن می توانید برای پلتفرم Android و ios اپلیکیشن بسازید.
react native چیست؟
react native(ری اکت نیتیو) یکی دیگر از فریمورک های جاوااسکرپتی محبوب است که در سال 2015 توسط facebook منتشر شد. این فریمورک بر پایه Javascript و کتابخانه فوق العاده Reactjs توسعه داده شده است و با کمک آن می توانید اپلیکیشن های Android و Ios به صورت native بسازید.
پیش نیازهای دوره پروژه محور و جامع react native چیه؟
با توجه به اینکه react native برپایه جاوااسکریپت و reactjs توسعه داده شده است، بنابراین باید به جاوا اسکریپت ، ES6 و react js تسلط داشته باشید.اگر به این پیش نیازها تسلط ندارید، نیاز نیست نگران باشید، می توانید به صورت رایگان آموزش javascript، آموزش ES6 و آموزش react js را مشاهده کنید.
در پایان این دوره شما قادر خواهید بود :
- طراحی رابط کاربری (UI)
- پیاده سازی انیمیشن های مختلف
- ارتباط با سرور
- کار با state manager هایی مثل redux و context
- ایجاد کامپوننت های reusable
- کار با پکیج های جانبی
- …
سوالات متداول
مزایا و معایب react native چیست؟
هر فریمورک یا کتابخانه یک سری معایب و مزایا دارد که react native از این قاعده مستثنی نیست.
مزایا react native :
- یک بار کد بزن، چند جا استفاده کن
- با React Native برنامتو توسعه بده و از زبان Native در کنارش استفاده کن!
- پشتیبانی قوی توسط تیمی بزرگ از برنامه نویسان
- زمان و هزینه
- community فعال
- پشتیبانی فیسبوک
معایب react native :
- بروزرسانی بسیار زیاد React Native
- وابستگی به کتابخونه های جانبی
برنامه موبایل Native چیه؟
برنامه های موبایل Native برنامه هایی هستند که بطور مستقیم برای یک پلتفرم و سیستم عامل خاص ساخته شده اند. به طور مثل برای ساخت یک برنامه Native برای اندروید باید از زبان Java و یا Kotlin استفاده کرد و یا برای IOS از swift و یا objective-c و اما فریمورک ری اکت نیتیو که یک خروجی Native مشابه Java و Swift که تا حد زیادی حتی قابل تشخیص از هم نیستند را با یک کد یکسان در اختیار کاربر قرار می دهد
چند درصد کدها بین Androi و Ios در react native مشترک است؟
می توان گفت حدود 95 درصد کدها بین هر دو سیستم عامل در روند توسعه مشترک است و گاهی اوقات برای اینکه کاربران احساس native بودن اپلیکیشن را داشته باشند باید از کامپوننت های مخصوص استفاده کنید.به طور مثال Toast android یا DatePicker
چه اپلیکیشن هایی با react native توسعه داده شدند؟
شرکت های مختلفی از کوچک تا بزرگ از react native برای توسعه اپلیکیشن های خود و افزایش ضریب نفوذشان در قالب پلتفرم های موبایلی استفاده کرده اند مثل : Instagram، Uber Eats، Airbnb، Pinterest و … و وجود این چنین شرکت هایی که در سطح وسیع از React Native استفاده کرده اند جای تامل دارد!
آیا react native ارزش یادگیری دارد؟
برای پاسخ به این سوال می توانیم چندین جنبه را در نظر بگیریم:
- اگر شما یک توسعه دهنده جاوا اسکریپت هستید، به راحتی و با صرف زمان کمتری می توانید react native یاد بگیرید و به طور حتم فرصت های شغلی جدیدی برای شما ایجاد خواهد شد.
- اگر در یک تیم استارتاپی مشغول به فعالیت هستید و نیاز دارید در کمترین زمان ممکن اپلیکیشن برای محصول خودتون و برای هر دو پلتفرم Android و Ios داشته باشید،react native یک گزینه فوق العاده است.
- اگر به دنبال کاهش هزینه های شرکت و صرفه جویی در زمان هستید، react native گزینه ای است که باعث میشه شما در قالب یک تیم زمان و هزینه توسعه اپلیکیشن را کاهش دهید.
آیا آموزش react native وب سایت reactapp.ir کافی است؟
هدفی که ما در این دوره دنبال می کنیم یادگیری مفاهیم پایه و پیشرفته به صورت قدم به قدم و پروژه محور است.یعنی شما علاوه بر ابنکه مفاهیم اساسی react native را در قالب مثال های واقعی و پروژه یاد می گیرید، برای ورود به بازار کار نیز آماده می شوید.
با توجه به اینکه هر پروژه چالش های خاص خودش را دارد، ولی سعی ما این بوده، چالش هایی که در هر پروژه ای وجود دارد را بر طرف کنیم تا دیگر شما استرس نداشتن دانش کافی برای ورود به بازار کار را نداشته باشید و با خیال راحت پا در این مسیر بگذارید.
این دوره مناسب چه کسانی است؟
این دوره مناسب کسانی است که می خواهند با دانش جاوااسکرپتی خود اپلیکیشن های موبایل برای Android و IOS توسعه دهند.
شما با شرکت در این دوره و یادگیری اصولی تمامی مفاهیم پایه و پیشرفته React Native در قالب پروژه های مختلف می توانید به راحتی وارد بازار کار شوید.
فصل اول : مفاهیم مقدماتی
1. نصب React Native در windows
2. نصب React Native در mac
3. اجرای برنامه های react native بر روی پلتفرم android و ios ویدئو
4. راه اندازی Genymotion و اولین component در react native ویدئو
5. ایجاد TextInput ویدئو
6. کار با TextInput options ویدئو
7. کار با styleها
8. آشنایی با FlexBox بخش اول (flex, flexDirection, justifyContent, AlignItem) ویدئو
9. آشنایی با FlexBox بخش دوم (flexWarp, AlignSelf, AlignContent )
10. آشنایی با FlexBox بخش سوم (FlexGrow, FlexShrink, FlexBasic)
11. افزودن Fonts
12. آشنایی با نحوه ایجاد component ویدئو
13. Props در React Native ویدئو
14. State در React Native ویدئو
15. ایجاد لیست با ScrollView ویدئو
16. ایجاد لیست با FlatList ویدئو
17. ایجاد لیست با VirtualizedList ویدئو
18. آشنایی با TouchableOpacity, TouchableHighlite, TouchableWithoutFeedBack ویدئو
19. کار با component جدید Pressable ویدئو
20. ایجاد لیست بی نهایت (infinite List) ویدئو
21. ایجاد Modal ویدئو
22. ایجاد Alert ویدئو
23. آشنایی با RefreshControl ویدئو
24. نحوه کار با کامپوننت StatusBar و Image ویدئو
25. مینی پروژه – بخش اول ویدئو
26. مینی پروژه – بخش دوم ویدئو
27. مینی پروژه – بخش سوم (آشنایی با Formik و Yup) ویدئو
28. آشنایی با چرخه حیات کامپوننت ها در React Native (LifeCycle) ویدئو
29. آشنایی با چرخه حیات کامپوننت ها در React Native (LifeCycle) بخش دوم ویدئو
30.آشنایی با کامپوننت Platform و Dimensions ویدئو
31. معرفی React Navigation 5 ویدئو
32. َشروع کار با React Navigation ویدئو
33. ارسال پارامتر به screen ویدئو
34. جابه جایی بین صفحات - Navigate ویدئو
35. جابه جایی بین صفحات - push و goBack ویدئو
36. جابه جایی بین صفحات - popToTop و replace ویدئو
37. آشنایی با optionها و استایل دهی ویدئو
38. آشنایی با nesting navigator ویدئو
39. ایجاد Drawer ویدئو
40. ایجاد Drawer سفارشی ویدئو
41. ایجاد Tab Navigator ویدئو
42. پیاده سازی Dark Mode ویدئو
فصل دوم : انیمیشن
0. آشنایی با فصل دوم ویدئو
1. آماده سازی پروژه اصلی ویدئو
2. آماده سازی پروژه - بخش دوم ویدئو
3. Animation - timing ویدئو
4. Animation - Easing ویدئو
5. Animation - spring ویدئو
6. Animation - sequence ویدئو
7. Animation - paraller ویدئو
8. Animation - (Delay-Stagger) ویدئو
9. Animation - interpolate ویدئو
10. Animation - Event ویدئو
11. Animation - PanResponder ویدئو
12. پیاده سازی مینی پروژه ویدئو
13. پیاده سازی مینی پروژه - بخش دوم ویدئو
14. پیاده سازی پروژه Drag and Drop ویدئو
15. پیاده سازی اسلایدر Parallex ویدئو
فصل سوم: کار با API
0. آشنایی با فصل سوم ویدئو
1. API - Fetch ویدئو
2. API - Axios بخش اول ویدئو
3. API - Axios بخش دوم ویدئو
4. API - Axios بخش سوم ویدئو
5. API - Axios بخش چهارم ویدئو
6. API - Axios بخش پنجم ویدئو
7. API - Axios بخش ششم ویدئو
8. API - Axios بخش هفتم ویدئو
9. API - Error Handling ویدئو
10. مدیریت داده های دریافتی از سمت سرور ویدئو
11. ذخیره اطلاعات در دیتابیس - صفحه ثبت نام ویدئو
12. دریافت اطلاعات از API - صفحه ورود ویدئو
فصل چهارم: Context - AsyncStorage
فصل پنجم : Redux
0. آشنایی با فصل پنجم ویدئو
1. چه زمانی از Redux استفاده کنیم ویدئو
2. کار با ساختار Redux - (َaction-reducers-store) ویدئو
3. Redux - (subscribe-dispatch) ویدئو
4. مدیریت Reducerها - combineReducers ویدئو
5. آماده سازی پروژه ToDo ویدئو
6. ToDo - افزودن کامپوننت Search ویدئو
7. ToDo - افزودن کامپوننت Menu ویدئو
8. ToDo - طراحی المان ها ویدئو
9. استفاده از Redux در پروژه ToDo - بخش اول ویدئو
10. استفاده از Redux در پروژه ToDo - بخش دوم ویدئو
11. استفاده از Redux در پروژه ToDo - بخش سوم ویدئو
13. استفاده از Redux در پروژه ToDo - بخش پنجم ویدئو
12. استفاده از Redux در پروژه ToDo - بخش چهارم ویدئو
14. کار با Middleware - Redux-thunk ویدئو
15. قسمت پایانی ویدئو
فصل ششم: مهارت های کاربردی در React Native
0. پیاده سازی Splash Screen ویدئو
1. کار با map در React Native ویدئو
2. دریافت موقعیت کاربر - location ویدئو
4. طراحی صفحه محصولات بخش دوم ویدئو
3. طراحی صفحه محصولات بخش اول ویدئو
5. کار با Share Api ویدئو
7. پیاده سازی Date Picker - بخش دوم ویدئو
6. پیاده سازی Date Picker - بخش اول ویدئو
8. کار با Web View ویدئو
9. تغییر چینش اپلیکیشن (RTL) ویدئو
10. ارسال نوتیفیکیشن بخش اول - Local ویدئو
11. ارسال نوتیفیکیشن بخش دوم- Firebase ویدئو
12. سبد خرید بخش اول ویدئو
13. سبد خرید بخش دوم ویدئو
14. سبد خرید بخش سوم ویدئو
15. سبد خرید بخش چهارم ویدئو
16. سبد خرید بخش پنجم ویدئو
17. درگاه پرداخت API ویدئو
18. درگاه پرداخت سبد خرید APP ویدئو
19. آپلود فایل ویدئو
20. اتصال به دوربین و آپلود تصویر ویدئو
21. دیتابیس Realm بخش اول ویدئو
22. دیتابیس Realm بخش دوم ویدئو
23. دیتابیس Realm بخش سوم ویدئو
24. چندزبانه کردن اپلیکیشن بخش اول ویدئو
25. چندزبانه کردن اپلیکیشن بخش دوم ویدئو
26. تغییر آیکون اپلیکیشن ویدئو
27. گرفتن خروجی APK و AAB ویدئو
moreدوره های مرتبط
ساخت اپلیکیشن FlowerList با react native
آموزش جامع React Native
پیاده سازی تبلیغات در React Native با تپسل
chat_bubble_outlineنظرات
قوانین ثبت دیدگاه
239000–رایگان!
علی
توسعه دهنده سمت سرورعاشق جاوااسکریپت و توسعه سمت سرور و توسعه اپلیکیشن اونم با React Native:)
omidsarmadi81
خسته نباشید
داخل ویدیو 12 فصل دوم که پروژه اصلی هستش اگر بخوایم هرکدام از عکس های داخل فلت لیست نویگیشن بشن به یه صفحه مخصوص خودشون چجوری باید این کار رو انجام بدیم؟
علی(مدیریت)
سلام وقت بخیر
دقت کنین هر کدوم از ایتم هایی که داخل flatlist هستن دیتای خاص خودش رو داره کافیه یه prop خاص از هر item رو پاس بدین به component که تعریف کردین و دیتایی که می خواین رو load کنید حالا این دیتا میتونه local یاشه یا از طریق یک Api دیتا رو دریافت می کنین و اینکه به تعداد item های لیست صفحات مجزا داشته باشین اصلا منطقی نیست
rismooon
سلام وقت بخیر
توی این دوره دیتابیس هم داده میشه؟
اپی که من میخوام بزنم نیاز داره که یه سری عکس و متن داخلش داشته باشه که کاربر نصب می کنه.
ممنون میشم پاسخ بدین
مهدی حسن زاده(مدیریت)
سلام.وقتتون بخیر
در فصل ششم کار با دیتابیس realm آموزش داده میشه
omidsarmadi81
سلام
وقتی تمام کار های مربوط به react navigation رو انجام میدم و بعد میخوام ران بگیرم روی امولیتور توی 42% توی این قسمت
گیر میکنه و دیگه اتفاقی نمیفته دلیلش چیه؟
:react-native-gesture-handler > Resolve files of :react-native-gesture-handler:classpath > kotlin-compiler-embeddable
omidsarmadi81
دوستان اگه مشکلی توی ران کردن اپ بعد از نصب navigation دارین وی.پی.ان روشن کنید رفع میشه
مال منم شد
omidsarmadi81
سلام خسته نباشید
داخل ویدیو 27 شما جوری کد زدید که ریل تایم و در آن واحد چک میکنه داخل اینپوت تکست هارو و اون ارور رو که نوشتید نشون میده
اگر بخوایم فرممون جوری باشه که بعد از خارج شدن از اینپوت تکست اون اروری که میخوایم رو نمایش بده باید چیکار کنیم؟؟؟
یعنی ابتدا کاربر ایمیل یا پسوردشو وارد میکنه و بعد که اینپوت رو از حالت فوکوس در آورد اگه نیاز به ارور باشه اون رو نشون بده نه اینکه از اول نشون بده ارور رو که هروقت شرطمون برقرار شد دیگه نشون نده
علی(مدیریت)
سلام وقت بخیر
میتونید از onEndEditing استفاده کنید
omidsarmadi81
استفاده کردم ولی کلا کار نمیکنه دیگه به محض تایپ کردن پاک میکنه
علی(مدیریت)
از formik داری استفاده می کنی ؟؟
mehrshadmahmoodi90
سلام وقتتون بخیر!!!
من وقتی پروژه ای رو میسازم و وقتی میخوام ران کنم با این ارور مواجه میشم :
error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with –verbose flag for more details. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
چطور باید حلش کنم؟(targetSdkVersion=30 )
مهدی حسن زاده(مدیریت)
سلام وقتتون بخیر.
ابتدا مطمئن بشید که متغیر های ANDROID_HOME و JAVA_HOME رو به درستی SET کردید
اگر مشکل حل نشد
پوشه android و ios پروژه رو پاک کنید
cmd رو در دایرکتوری پروزه باز ودستور react-native eject رو اجرا کنید
سپس
1.cd ./android
2../gradlew.bat installDebug
3.cd ../
4.react-native run-android
mehrshadmahmoodi90
سلام!!!
وقتی پوشه هارو پاک میکنم و دستور react-native eject
رو در دایرکتوری پروژه اجرا میکنم با این خطا مواجه میشم:
Error Unrecognized command eject
مهدی حسن زاده(مدیریت)
سلام
از دستور جایگزین زیر استفاده کنید
react-native upgrade –legacy true
جواد عمادی
سلام و وقت بخیر و خدا قوت
من هنگام استفاده از axios در اسکرین StoreScreen با خطای زیر مواجه میشم :
err.config=> {“adapter”: [Function xhrAdapter], “baseURL”: “http://192.168.56.1:3000/graphql”, “data”: “{\”query\”:\”\\n query {\\n Product {\\n id,\\n title,\\n price,\\n imageUrl\\n }\\n }\\n \”}”, “headers”: {“Accept”: “Application/json”, “Content-Type”: “application/json”}, “maxBodyLength”: -1, “maxContentLength”: -1, “method”: “post”, “params”: {“name”: “ALI”}, “timeout”: 0, “transformRequest”: [[Function transformRequest]], “transformResponse”: [[Function transformResponse]], “transitional”: {“clarifyTimeoutError”: false, “forcedJSONParsing”: true, “silentJSONParsing”: true}, “url”: “/”, “validateStatus”: [Function validateStatus], “xsrfCookieName”: “XSRF-TOKEN”, “xsrfHeaderName”: “X-XSRF-TOKEN”}
فایل بکند رو هم به درستی اجرا کردم
علی(مدیریت)
سلام وقت بخیر
query که داری بهش درخواست میزنی رو به همراه schema بررسی کن query احتمالا مشکل داره
جواد عمادی
دقیقا همون چیزی که تو فایل سورس گذاشتید رو کپی کردم چیزی تغییر ندادم
علی(مدیریت)
سرور رو اجرا کردی ؟؟
جواد عمادی
بله به درستی اجرا میشه
علی(مدیریت)
ببین داری به default axios baseurl اشتباهی ارسال می کنی، توی فایل index.js باید این رو تغییر بدی به ip خودت یا میتونی رو حالت debuging اگر از virtual device و یا از طریق کابل به گوشی متصل هستی از localhost استفاده کنی
http://ip:port/graphql
http://localhost:port/graphql
جواد عمادی
ممنون درست شد
علی(مدیریت)
خواهش می کنم موفق باشید
محمد عزیزپور
سلام من پروژه رو با expo بردم جلو و خروجی apk گرفتم و همه چی عالیه-ام میخوام خروجی ios هم بگیرم ولی همین که رو گوشیه خودم نصب بشه کافیه و نمیخوام توی اپ استور بزارمش-آیا بازم برای این کار احتیاج به اکانت 100 دلاری هست؟
مهدی حسن زاده(مدیریت)
سلام
مقاله زیر رو بخونید
https://vrgl.ir/ZkT4j
fa.azari.a
سلام وقت بخیر
من میخوام اپم روی دیوایس های با اندروید 5 هم اجرا بشه
minsdk=21 هستش ولی روی دیوایس واقعی اجرا نمیشه(باگوشی اندروید 5 و 6و8 تست کردم) ولی اجرا نمیشه
میشه لطفا راهنماییم بفرمایین؟
اصلا مشکل چی هستش؟
علی(مدیریت)
سلام وقت بخیر
روی هیچ دیوایسی اجرا نمیشه ؟؟
targetSdkVersion چی ست شده ؟؟