نوشته های reactapp.ir

قراره از تعطیلات تابستونی امسالتون چطور استفاده کنید؟

reactapp.ir — Fri, 02 Jul 2021 21:39:33 +0430

خب تابستون امسال و سال گذشته کمی متفاوت از قبل بوده، همیشه تابستون ها یه فرصت عالی برای یادگیری به حساب میومده مخصوصا دانشجو ها این فرصت براشون خیلی خاص تر هم بوده تا قبل از شروع ترم جدیدشون بتونند یه هنر یا تخصص مرتبط با رشته تحصیلیشون رو یاد بگیرند اما توی دو سال گذشته کووید 19 خیلی هامون رو بیشتر از قبل خونه نشین کرده و شاید تابستون ها مثل گذشته امکان سفر برامون وجود نداشته باشه.امسال هم مثل چند سال گذشته توی reactapp.ir تصمیم گرفتیم که طرح تخفیف تابستانمون رو شروع کنیم اما با این تفاوت که هم درصد تخفیف رو افزایش بدیم و هم دوره های کاربردی تر رو برای تابستون امسال داشته باشیم. تمام تلاشمون این بوده که دوره های آموزشیمون برای ورود به بازار کار و آشنایی شما با پروژه های واقعی مناسب باشه پس پیشنهاد میکنم نگاهی به صفحه طرح تخفیف تابستانه 1400 بندازید و علاوه بر دریافت کد تخفیف، دوره هایی که میتونه واستون مفید باشه رو ببینید و اگه دوست داشتید تهیه کنید.

ایجاد AnimatedPlaceholder در react native

reactapp.ir — Wed, 10 Feb 2021 13:08:35 +0330

چند روز پیش در حالی که داشتم تو گیت هاب دنبال یک پیکج می گشتم به طور اتفاقی Animated Placeholder library رو دیدم که به نظرم جالب و کاربردی اومد.تصمیم گرفت برای استفاده از این کتابخانه یک آموزش آماده کنم که شما هم اگر دوست داشتید در پروژه های react native خودتون ازش استفاده کنیددر فاصلهload کامل داده ها از سرور ، از متغیرهایی برای نشان دادن اطلاعاتی که در حال بارگزاری است، استفاده می شود تا توجه کاربران را جلب کند. بنابراین در این مقاله آموزشی با React Native Animated Placeholder آشنا می شویم و با استفاده از React Native Animated Placeholder می توانیم placeholder را برای تصاویر نیز نشان دهیم.کتابخانه React Native Animated Placeholder براساس 4 کتابخانه مختلف ساخته شده است. بنابراین ما باید همه اون ها رو نصب کنیم.react-native-reanimatedreact-native-linear-gradientreact-native-redashreact-native-gesture-handlerکتابخانه Animated Placeholder از دو نوع انیمیشن پشتیبانی می کندShine Overlay AnimationFade in Animationاسکرین شات از برنامهاولین گام نصب کتابخانه React Native Animated Placeholder است برای اینکار دایرکتوری پروژه رو در Command Prompt یا Terminal باز می کنیم و دستور زیر رو اجرا می کنیمnpm install react-native-animated-placeholder --saveحالا نوبت به نصب کتابخانه react-native-reanimated است.برای اینکار دستور زیر رو اجرا می کنیمnpm install react-native-reanimated --saveگام بعدی نصب کتابخانه react-native-linear-gradient است.مشابه دو مرحله قبل برای نصب این کتابخانه دستور زیر رو اجرا می کنیمnpm install react-native-linear-gradient --saveنصب کتابخانه react-native-redashnpm install react-native-redash --saveنصب کتابخانه react-native-gesture-handlernpm install react-native-gesture-handler --saveحالا باید Gradlew خودمون رو sync کنیم.برای این منظور باید Gradlew ساخته شده قبلی را clean کنیم.دایرکتوری پروژه خودتون رو در Command Prompt یا Terminal باز کنید و دستور زیر را اجرا کنیدcd android && gradlew cleanپروژه شما حالا آماده برای کد زدن است.اما قبلش دستور cd رو اجرا کنید تا به root اصلی پروژه برگردید.یا میتونید کلا Terminal رو ببندید و خیال خودتون رو راحت کنیدفایل App.js را باز کنید و کامپوننت های StyleSheet, View, Text و Dimensions را ایمپورت کنیدimport React from 'react'; import { StyleSheet, View, Text, Dimensions } from 'react-native';ایمپورت AnimatedPlaceholder از کتابخانه react-native-animated-placeholderimport AnimatedPlaceholder from 'react-native-animated-placeholder';ایجاد یک متغیر ثابت به اسم width.از Dimensions API برای گرفتن عرض screen استفاده می کنیمconst { width } = Dimensions.get('window'); ایجاد یک کامپوننت به اسم App.در اینجا ما همه نوع Animated Placeholder را ایجاد می کنیم و از استایل های مختلف برای سفارشی سازی اشکال استفاده می کنیمSupported Props:itemStyle: Used to set Style for Animated item.duration: Used to set animation duration.primaryColor: Used to set primary color of animation.secondaryColor: Used to set secondary color of animation.animationType: ‘overlay‘ and ‘fade‘ animation type.export default function App() { return ( Shine Overlay Animation Fade Animation ) };ایجاد استایلconst styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: width * 5 / 100 }, title: { fontWeight: 'bold', fontSize: 24, alignSelf: 'stretch', textAlign: 'left', marginVertical: width * 3 / 100 }, imagePlaceholder: { width: '100%', height: width * 40 / 100, // Height backgroundColor: '#E0E0E0', overflow: 'hidden', marginBottom: width * 3 / 100 }, titlePlaceholder: { width: '100%', height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, detailsContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: width * 3 / 100 }, authorImagePlaceholder: { height: width * 9 / 100, width: width * 9 / 100, borderRadius: width * 5 / 100, overflow: 'hidden', backgroundColor: '#E0E0E0' }, infoPlaceholder: { flex: 1, height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, otherStyle: { marginHorizontal: width * 2.5 / 100 } });

جاوا اسکریپت چیست ؟ و چه تفاوتی با EcmaScript دارد؟

reactapp.ir — Sat, 30 Jan 2021 21:51:39 +0330

در این نوشته قرار هست که در مورد جاوا اسکریپت (javascript) صحبت کنم و در ادامه سعی میکنم به چهار سوال اصلی پاسخ بدم :جاوا اسکریپت چیست ؟با جاوا اسکریپت چه کارهایی میتونیم انجام بدیم ؟کدهای جاوا اسکریپت در کجا اجرا می شوند؟تفاوت جاوا اسکریپت با EcmaScript چی هست ؟در ویدئو زیر این موضوع رو کامل تر بررسی کردیم که پیشنهاد میکنم از دستش ندید. https://www.aparat.com/v/4eVDf جاوا اسکریپت چیست ؟جاوا اسکریپت یک زبان برنامه نویسی پرکاربرد و پراستفاده در دنیاست. کافیه شما به گیت هاب سربزنید تا ببینید چه تعداد زیاد کتابخونه و پکیج توسط توسعه دهنده ها و شرکت های مختلف توسط این زبان نوشته شدند. کمپانی های بزرگی مثل فیسبوک،گوگل،walmart و uber از جاوا اسکریپت برای ساخت برنامه های خودشون استفاده می کنند.با جاوا اسکریپت چه کارهایی میتونیم انجام بدیم ؟هدف اولیه از ساخت جاوا اسکریپت interactive کردن صفحات وب بود، چون صفحات وب خیلی ساده و غیرتعاملی بودند.ولی شما حالا می تونید با استفاده از کتابخونه ها و فریمورک هایی مثل react ,vue ,angular ,svelte برنامه های تحت وب و وب اپلیکیشن های پیشرفته بسازید. همچینین می تونید با استفاده از جاوا اسکریپت برنامه های real-time مثل چت روم ها، بازی ها و ... بسازید.با یادگیری فریمورک محبوب ری اکت نیتیو به راحتی میتونید اپلیکیشن های موبایل برای هر دو نسخه اندروید و Ios به صورت نیتیو توسعه بدید.جاوا اسکریپت چیست ؟کدهای جاوا اسکریپت در کجا اجرا می شوند؟جاوااسکریپت طوری طراحی شده که روی هر مرورگری اجرا بشه، پس هر مرورگر یک javascript engine داره که وظیفش اجرای کد های جاوااسکریپت هست. به عنوان مثال در گوگل کروم نام موتورش v8 هست و یا در مرورگر فایرفاکس spidermonkey.تا قبل از خلق node js امکان اجرای javascript خارج از مرورگر وجود نداشت و برای اولین در سال 2009 امکان این وجود داشت تا کد های جاوااسکریپت رو بتونیم بر روی سرور اجرا کنیم.تفاوت جاوا اسکریپت با EcmaScriptچی هست ؟جاوااسکریپت در سال 1995 ساخته شد، اما در سال 1997 برای جلوگیری از اختلاف و سردرگمی و سازگاری بین مرورگرهای مختلف نیاز به استاندارد سازی زبان های اسکریپتی احساس شد. این استاندارد از زبان های اسکریپت مانند JavaScript و JScript (که زبان نوشتاری دیگری بود ، که توسط مایکروسافت برای مرورگر اینترنت اکسپلورر آنها توسعه داده شد) به عنوان ECMAScript شناخته می شه. بنابراین ، میتونیم اون رو به این صورت خلاصه کنیم : ECMAScript specification مشخص می کنه که چگونه یک ویژگی خاص باید پیاده سازی بشه ، سپس JavaScript یا هر زبان برنامه نویسی دیگری که مطابق با استانداردهای ECMAScript باشه، اون ویژگی خاص رو پیاده سازی می کند و در آخر این توسعه دهنده هست که بر اساس ویژگی مورد نیاز اون رو با جاوا اسکریپت پیاده سازی می کند.در نهایت اگه علاقه مند به یادگیری جاوا اسکریپت هستید میتونید آموزش رایگان جاوااسکریپت رو ببینید.

بروز رسانی پروژه های قدیمی react native به آخرین نسخه

reactapp.ir — Sat, 28 Nov 2020 10:23:11 +0330

همانطور که همه ما می دونیم React Native به سرعت در حال پیشرفت است و پس از هر مدت کوتاهی یک نسخه جدید از اون منتشر میشه.گاهی اوقات میبینم که خیلی از افراد مدت زیادی رو درگیر این هستن که نسخه react native فعلی خودشون که روی اون کار می کنند، به آخرین نسخه بروزرسانی کنند.اما این کار نیاز به زمان زیادی نداره و فقط نیاز به اجرای یک command در Command prompt یا Terminal داره. .تخفیف 50 درصدی ویژه BlackFriday به همراه یک دوره هدیه1.من یک پروژه با نسخه 0.60 react native دارم و قصد داریم با اجرای یک دستور در Command Prompt اون پروژه رو به آخرین نسخه یعنی 0.63.3 به روزرسانی کنیم. برای اینکار ابتدا Command Prompt را با حالت Run As Administrator در ویندوز اجرا می کینم.2.حالا در cmd به دایرکتوری پروژه که در F:\React_Native_Projects\oldVersion واقع شده می ریم و commandزیر رو برای نصب نسخه 0.63.3 اجرا می کنیم.npm install --save react-native@0.63.3 اسکرین شات بعد از اجرای command بالا:حالا پروژه ما به نسخه 0.63 بروزرسانی شده است.برای تایید فرآیند بروزرسانی کافیه که react-native upgrade رو در دایرکتوری پروژه اجرا کنیم

نمایش svg در react native

reactapp.ir — Sun, 26 Apr 2020 21:51:38 +0430

تصاویر svg که با Scalable Vector Graphics نیز شناخته می شوند یک نوع markup language قابل توسعه برای تصاویر دوبعدی گرافیکی است.این نوع فرمت تصویر بین توسعه دهندگان وب و bobile مشهور است زیرا تصاویر با فرمت SVG بر پایه پیکسل نیستند ، بنابراین حتی در صورتی که کشیده شوند، محو یا برش داده نمی شوند.در react native ما به صورت مستقیم نمی توانیم SVG را نمایش دهیم.ما باید از کتابخانه react-native-svg استفاده کنیم.این کتابخانه توسط توسعه دهندگان در هر هفته 2500 بار دانلود می شود.در این مقاله ما تصاویر SVG را به صورت online از url و به صورت local نمایش می دهیم.نکته: کتابخانه react-native-svg فقط تصاویر SVG به صورت online را نمایش می دهد و ما نمی توانیم تصاویر SVG به صورت local را نمایش دهیم به همین دلیل از یک کتابخانه دیگر به نام react-native-svg-uri استفاده می کنیم.این کتابخانه بر پایه react-native-svg است و فقط قابلیت نمایش به صورت local را اضافه کرده است.1.اولین گام باید آخرین نسخه این کتابخانه را نصب کنیم.برای اینکار دایرکتوری پروژه را در cmd باز می کنیم و دستور زیر را اجرا میکنیم.npm install react-native-svg --save با توجه به اینکه نمیتونیم SVG های local رو با کتابخانه فوق نمایش بدهیم .بنابراین کتابخانه react-native-svg-uri رو نصب می کنیم .برای اینکار کافیه دستور زیر رو در دایرکتوری اصلی پروژه اجرا کنیمnpm install react-native-svg-uri --save2.تا حالا هر دو تا کتابخانه به پروژه ما اضافه شدند و نوبت به link کردن آن ها است.برای اینکار باید دستور زیر را اجرا کنیم.توجه داشته باشید که اگر نسخه react native شما بالاتر از 60 است، نیازی به اجرای دستور زیر نیستreact-native link react-native-svg3. ما تصاویر SVG را به هر دو صورت online و local نمایش می دهیم که برای نمایش به صورت local یک پوشه به نام images در root اصلی پروژه ایجاد می کنیم.4.تصاویر svg که قرار است به صورت local نمایش بدهیم.درون این پوشه قرار می دهیم.5.ایمپورت StyleSheet, Text وViewدر App.js:import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native';6.ایمپورت SvgUri از کتابخانه react-native-svg-uriimport SvgUri from 'react-native-svg-uri';7.فراخوانی console.disableYellowBox با مقدار true برای اینکه دیگر هشدار ها دیگر نمایش داده نشود.از این مرحله را می توانید صرف نظر کنید.console.disableYellowBox = true;8.ایجاد یک کلاس به نام Appexport default class App extends Component { }9.ما دو تا کامپوننت SvgUri در بلاک render’s return قرار می دهیم.اولی برای نمایش SVG به صورت online و دیگری برای نمایش SVG به صورت localrender() { return ( Showing SVG Format Image Icon From URL in React Native Showing SVG Format Image Icon Locally in React Native ); }10.ایجاد استایلconst styles = StyleSheet.create({ MainContainer: { alignItems: 'center', backgroundColor: '#fff' }, text: { padding: 20, textAlign: 'center', fontSize: 20 }, });11.کد کامل برنامه در فایل App.jsimport React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import SvgUri from 'react-native-svg-uri'; console.disableYellowBox = true; export default class App extends Component { render() { return ( Showing SVG Format Image Icon From URL in React Native Showing SVG Format Image Icon Locally in React Native ); } } const styles = StyleSheet.create({ MainContainer: { alignItems: 'center', backgroundColor: '#fff' }, text: { padding: 20, textAlign: 'center', fontSize: 20 }, });اگر قصد دارید مقالات تخصصی بیشتری در زمینه React Native مطالعه کنید پیشنهاد میکنم به بخش آموزش متنی سایت مراجعه کنید.همچنین اگر قصد دارید به عنوان یک برنامه نویسی حرفه ای React Native فعالیت کنید پیشنهاد میکنم دوره آموزش ساخت اپلیکیشن فروشگاهی مشابه digikala با react native رو مشاهده کنید.اسکرین شات:[منبع]

آموزش react navigation5

reactapp.ir — Sun, 19 Apr 2020 21:49:56 +0430

با تازگی نسخه 5 کتابخانه react navigation با کلی تغییر منتشر شد.اگر نمیدونید که react navigation چی هست باید خدمتتون عرض کنم که وظیفه این کتابخانه مدیریت صفحات مختلف شما در react native است .react navigation در نسخه جدید دچار تغییرات خیلی زیادی حتی در نحوه نصب شده که در این مقاله این موارد رو به صورت کامل بررسی می کنیم.همچنین می تونید دوره آموزشی کار با react navigation 5 رو به صورت رایگان در سایت مشاهده کنید.1. اولین گام باید آخرین نسخه این کتابخانه را نصب کنیم.برای اینکار دایرکتوری پروژه را در cmd باز می کنیم و دستور زیر را اجرا میکنیم.npm install @react-navigation/nativeاسکرین شات بعد از نصب2. حالا باید کتابخانه های reanimated, gesture handler, react native screens, react native safe area و masked viewرو نصب کنیم.پس دایرکتوری پروژه رو در Command Prompt باز میکنیم و دستور زیر را اجرا میکنیم.این کتابخانه ها برای استفاده React Navigation اجباری هستند.npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-viewاسکرین شات بعد از نصب3. در گام بعدی باید کتابخانه Stack Navigator رو نصب کنیم.دستور زیر را مجدد در دایرکتوری پروژه برای نصب این کتابخانه اجرا می کنیم.npm install @react-navigation/stackاسکرین شات بعد از نصب4. حالا پروژه آماده استفاده از React Navigation 5.x است.بخش بعدی استفاده از این کتابخانه و شروع کدزدن است.بنابراین فایل App.js رو باز کنید و react-native-gesture-handler رو ایمپورت کنید.اگر react-native-gesture-handler رو ایمپورت نکنیم در حالت debug به ما خطایی نشان نمیده ولی صد در صد در APK با error روبرو خواهید شد.import 'react-native-gesture-handler';5.ایمپورت StyleSheet, Text, View و Button در App.js:import * as React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native';6. ایمپورت NavigationContainer و createStackNavigator از کتابخانه react navigation :import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack';7. ایجاد یک تابع به نام HomeScreen با navigation prop.این تابع در واقع Home Screen ما خواهد بود.در آخرین نسخه React Navigation ساختار کدنویسی برنامه بهبود یافته است و ما راحت تر می توانیم View ها رو ایجاد کنیم:function HomeScreen({ navigation }) { navigateToScreen=()=>{ navigation.navigate('Second'); } return ( Home Screen

حل مشکل keyboard overlapping در React Native

reactapp.ir — Wed, 15 Apr 2020 13:54:25 +0430

کامپوننت KeyboardAvoidingView برای جلوگیری از keyboard overlapping بر روی TextInput در React Native استفاده می شود.اگر به طور پیش فرض از KeyboardAvoidingView استفاده نکنیم ، صفحه کلید در بالای TextInput در Focus نشان داده می شود.اما اگر از KeyboardAvoidingView استفاده کنیم هنگامی که بر روی TextInput برای تایپ Focus میکنیم، صفحه کلید زیر TextInput قرار می گیرد و دیگر مشکلی برای تایپ نداریم.کامپوننت KeyboardAvoidingView نمی تواند به تنهایی استفاده شود و باید درون کامپوننت ScrollView قرار گیرد تا همه کامپوننت ها scrollable شوند. ایمپورت کامپوننت های StyleSheet, ScrollView, KeyboardAvoidingView, TextInput و View در فایل App.jsimport React, {Component} from 'react'; import { StyleSheet, ScrollView, KeyboardAvoidingView, TextInput, View } from 'react-native';ایجاد یک class به نام App.این class کامپوننت اصلی ما در برنامه خواهد بودexport default class App extends Component { }اضافه کردن کامپوننت View به بلاک render’s return. این کامپوننت والد(parent) ما برای children خواهد بودrender() { return ( ); }اضافه کردن کامپوننت ScrollView با کامپوننت KeyboardAvoidingView و قرار دادن تمامی کامپوننت های TextInput درون KeyboardAvoidingView کد کامل برنامه در فایل App.jsimport React, {Component} from 'react'; import { StyleSheet, ScrollView, KeyboardAvoidingView, TextInput, View } from 'react-native'; export default class App extends Component { render() { return ( ); } } const styles = StyleSheet.create({ MainContainer: { justifyContent: 'center', alignItems : 'center', padding: 12 }, textInputStyle: { height: 40, width: 300, textAlign: 'center', borderWidth: 2, borderColor: '#000', borderRadius: 8, marginTop: 50 }, });اگر این مقاله براتون مفید بود،اون رو با دوستان و همکاراتون به اشتراک بزارید.همچنین اگر قصد دارید مقالات تخصصی بیشتری در زمینه React Native مطالعه کنید پیشنهاد میکنم به بخش آموزش متنی سایت مراجعه کنید.اسکرین شات[منبع]

آموزش کار با انیمیشن(Easing Animation) در React Native

reactapp.ir — Wed, 08 Apr 2020 22:17:44 +0430

در واقع Easing یک انیمیشن برای توضیح انواع متفاوت animations است.منظور از animation easing این است که انواع مختلفی از حرکت رو روی یک object مثل شروع سریع و توقف آهسته رو پیاده کند.این روند کند شدن decelerates the object نامیده می شود.4 نوع از easing در react native animation وجود دارد.در این نوع مقاله ما هر 4 نوع easing و نحوه پیاده سازی اون در React Native را یاد میگیریم.حالا بهتره که بریم سراغ کدنویسی:ایمپورت Animated, StyleSheet, View, TouchableWithoutFeedback در فایل App.jsimport React, {Component} from 'react'; import { Animated, StyleSheet, View, TouchableWithoutFeedback, Easing } from 'react-native';ایجاد یک class به نام App.این class کامپوننت اصلی ما در برنامه خواهد بودexport default class App extends Component { }ایجاد ()constructor برای App.درون ()constructor یک state به نام animationValue با مقدار پیش فرض صفر ایجاد می کنیم.ما از این state برای تغییر سرعت،شروع و پایان انیمیشن استفاده می کنیم.constructor(){ super(); this.state={ animationValue : new Animated.Value(0) } } https://virgool.io/p/dv2qwmycfjyk/edit از toValue برای مشخص کردن فاصله انیمیشن استفاده می شوداز duration برای مشخص کردن مدت زمانی که شروع تا پایان انیمیشن استفاده می شود.4 نوع مختلفی از انیمیشن Easing که داریم به صورت زیر است:Easing.bounceEasing.backEasing.elasticEasing.bezierstartAnimation=()=>{ Animated.timing(this.state.animationValue,{ toValue : 270, duration : 500, // easing: Easing.bounce, // easing : Easing.back(10), // easing : Easing.elastic(5), easing : Easing.bezier(.07, 1, .33, .89), }).start(); }ایجاد یک متغیر به نام animatedStyle در بلاک render’s.حالا ما مقدار translateY رو با استفاده از animationValue بروزرسانی می کنیم.render() { const animatedStyle = { transform: [{ translateY : this.state.animationValue }], } return ( ); }ایجاد یک View اصلی به render’s return.حالا یک کامپوننت Animated.View که درون TouchableWithoutFeedback قرار می دهیم.و در onPress مربوط به این Button انیمیشن انجام خواهد شد.انیمیشن بر روی Animated.View انجام خواهد شد.render() { const animatedStyle = { transform: [{ translateY : this.state.animationValue }], } return ( ); }ایجاد styleconst styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems : 'center', padding: 12 }, animatedBox: { width : 100, height: 100, backgroundColor : '#0091EA' } });کد کامل برنامه در فایل App.jsimport React, {Component} from 'react'; import { Animated, StyleSheet, View, TouchableWithoutFeedback, Easing } from 'react-native'; export default class App extends Component { constructor(){ super(); this.state={ animationValue : new Animated.Value(0) } } startAnimation=()=>{ Animated.timing(this.state.animationValue,{ toValue : 270, duration : 500, // easing: Easing.bounce, // easing : Easing.back(10), // easing : Easing.elastic(5), easing : Easing.bezier(.07, 1, .33, .89), // easing : Easing.ease(20) }).start(); } render() { const animatedStyle = { transform: [{ translateY : this.state.animationValue }], } return ( ); } }; const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems : 'center', padding: 12 }, animatedBox: { width : 100, height: 100, backgroundColor : '#0091EA' } });اگر این مقاله براتون مفید بود،اون رو با دوستان و همکاراتون به اشتراک بزارید.همچنین اگر قصد دارید به عنوان یک برنامه نویسی حرفه ای React Native فعالیت کنید پیشنهاد میکنم دوره آموزش ساخت اپلیکیشن فروشگاهی مشابه digikala با react native رو مشاهده کنید.منبعاسکرین شات

ایجاد Search Bar Filter در React Native به صورت Real Time

reactapp.ir — Wed, 01 Apr 2020 18:10:48 +0430

استفاده از Search Bar filter برای فیلتر کردن خودکار داده ها در اپلیکیشن های موبایل،یک روش رایج است.همونطور که همگی ما میدونیم استفاده از search bar filter تقریبا در هر اپلیکیشن android یا ios وجود دارد.در این مقاله قصد داریم در React Native یک Search Bar filter با استفاده از flatList ایجاد کنیم.برای دریافت اطلاعات ما از JSONPlaceholder استفاده میکنم که اطلاعات رو به صورت json و رایگان در اختیار ما قرار میده.بریم سراغ کد نویسیفایل App.js رو باز کنید و کامپوننت های ActivityIndicator, Alert, FlatList, Text, StyleSheet, View و TextInput رو ایمپورت کنیدimport React, { Component } from 'react'; import { ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, TextInput } from 'react-native';2. درون این فایل یک کلاس به نام App ایجاد میکنم که کلاس اصلی ما در این مثال است.export default class App extends Component { }3. برای کلاس App سازنده یا همون ()constructor رو تعریف می کنیم و 3 state به نام های isLoading و text و data تعریف میکنیم.همچینینarrayholder رو در ()constructor ایجاد می کنیم.constructor(props) { super(props); this.state = { isLoading: true, text: '', data: [] } this.arrayholder = []; }از isLoading برای نمایش spinner تا زمانی که اطلاعات از سرور به دست ما می رسد استفاده میشه.از text برای ذخیره کاراکتری هایی که کاربر وارد میکنه، استفاده میشهاز data برای ذخیره داده هایی که از سرور برای ما برگشت داده میشه، استفاده میشهاز arrayholder برای فیلتر کردن داده ها استفاده میشه.4. در این گام componentDidMount() رو تعریف می کنیم و درون این lifecycle درخواست به سرور میزنیم و اطلاعات دریافتی رو در data و arrayholder ذخیره می کنیم.5. ایجاد یک تابع به نام ()GetFlatListItem با name argument.از این تابع برای نمایش نام آیتم کلیک شده استفاده می کنیم.GetFlatListItem(name) { Alert.alert(name); }6. ایجاد یک تابع دیگه به نامsearchData() با text argument.این تابع در ()Text فیلدی که در نظر گرفتیم فراخوانی میشه.بنابراین هر زمانی که کاربر شروع به تایپ کردن در این textInput کنه اطلاعات ما بر اساس کاراکترهای واردشده فیلتر میشه.7. ایجاد یک تابع به نام ()itemSeparator.با استفاده از این تابع ما یک خط افقی بین هر کدوم از آیتم ها قرار میدیم.این تابع در رویداد ()ItemSeparatorComponent مربوط به flatList فراخوانی می شود.itemSeparator = () => { return ( ); }8. اضافه کردن TextInput و FlatList در بلاک render’s return کامپوننتrender() { if (this.state.isLoading) { return ( ); } return ( this.searchData(text)} value={this.state.text} underlineColorAndroid='transparent' placeholder="Search Here" /> index.toString() } ItemSeparatorComponent={this.itemSeparator} renderItem={({ item }) => {item.name}} style={{ marginTop: 10 }} /> ); }9. ایجاد استایلconst styles = StyleSheet.create({ MainContainer: { justifyContent: 'center', flex: 1, margin: 5, }, row: { fontSize: 18, padding: 12 }, textInput: { textAlign: 'center', height: 42, borderWidth: 1, borderColor: '#009688', borderRadius: 8, backgroundColor: "#FFFF" } });10.کد کامل فایل App.jsimport React, { Component } from 'react'; import { ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, TextInput } from 'react-native'; export default class App extends Component { constructor(props) { super(props); this.state = { isLoading: true, text: '', data: [] } this.arrayholder = []; } componentDidMount() { return fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.json()) .then((responseJson) => { // console.log(responseJson); this.setState({ isLoading: false, data: responseJson, }, () => { // In this block you can do something with new state. this.arrayholder = responseJson; }); }) .catch((error) => { console.error(error); }); } GetFlatListItem(name) { Alert.alert(name); } searchData(text) { const newData = this.arrayholder.filter(item => { const itemData = item.name.toUpperCase(); const textData = text.toUpperCase(); return itemData.indexOf(textData) > -1 }); this.setState({ data: newData, text: text }) } itemSeparator = () => { return ( ); } render() { if (this.state.isLoading) { return ( ); } return ( this.searchData(text)} value={this.state.text} underlineColorAndroid='transparent' placeholder="Search Here" /> index.toString() } ItemSeparatorComponent={this.itemSeparator} renderItem={({ item }) => {item.name}} style={{ marginTop: 10 }} /> ); } } const styles = StyleSheet.create({ MainContainer: { justifyContent: 'center', flex: 1, margin: 5, }, row: { fontSize: 18, padding: 12 }, textInput: { textAlign: 'center', height: 42, borderWidth: 1, borderColor: '#009688', borderRadius: 8, backgroundColor: "#FFFF" } });اگر این مقاله براتون مفید بود،اون رو با دوستان و همکاراتون به اشتراک بزارید.همچنین اگر قصد دارید به عنوان یک برنامه نویسی حرفه ای React Native فعالیت کنید پیشنهاد میکنم دوره آموزش ساخت اپلیکیشن فروشگاهی مشابه digikala با react native رو مشاهده کنید.اسکرین شات :منبع

پاسخ Dan Abramov در مورد شایعات Messenger فیسبوک و React Native

reactapp.ir — Wed, 04 Mar 2020 18:55:47 +0330

تیم توسعه دهنده Messenger اخیرا یک پست وبلاگ درمورد بازنویسی اپلیکیشن Messenger منتشر کردند که نکات خیلی خوبی داره و خوندن اون خالی از لطف نیست.در مورد این مقاله یک سری بحث هایی مانند اینکه فیسبوک دیگر سرمایه گذاری بر روی RN را قطع کرده یا اینکه عمر RN به پایان رسیده به وجود اومد که Dan Abramov سعی کرد به این بحث ها و شایعات در قالب یک رشته توییت پاسخ دهد که در ادامه پاسخ Dan رو به این شایعات خواهیم خوند.بسیاری از خوانندگان به این موضوع اشاره کردند که این اپلیکیشن قبلا native بوده است و این یک surprise نیست.اپلیکیشن قبلا هم به صورت کامل native بوده است!بنابراین یک اپلیکیشن native مجدد به یک native app بازنویسی شده است.آیا این یک بازنویسی به React Native بوده است؟نه. Messenger در زمان بازنویسی از React Native استفاده نکرده است.مجددا، این یک native app بوده که به یک native app بازنویسی شده است.تغییر بزرگ حذف ساختار xplat shared FB(نه RN) به نفع یک هسته کوچکتر در سطح C است.آیا Messenger از RNاستفاده کرده است؟ بله ، در چند صفحه در سال 2017. در حال حاضر تقسیم بندی بیش از حد در نحوه ایجاد ویژگی های برای مسنجر وجود دارد ، بنابراین استفاده از RN منطقی نیست و آنها آن را حذف کردند.حذف RN پس از آن عملکرد برنامه را "بهبود" نبخشید. پس آنها تصمیم گرفتند برنامه را از ابتدا بازنویسی کنند.نکته دیگر این است که native بودن یک اپلیکیشن ضمانت نمی کند که اپلیکیشن حتما سریع خواهد بود.اپلیکیشن قدیمی native و کند بود. تفاوت این است که چگونه آنها خواسته های خود را به شکلی خلاقانه حل کردند.به عنوان مثال آنها view ها را مثل بقیه به صورت native ننوشتند و برای کاهش size، UI توسط DBهدایت و مدیریت می شود.سرمایه گذاری فیسبوک بر روی React Native مثل همیشه زیاد است. برنامه اصلی دارای 750 صفحه است و استفاده از RN برای Messenger کار درستی نیست. اما استفاده از C الهام بخش بسیاری از کارهای در حال انجام بر روی React Native است.فرهنگ مهندسی در فیسبوک به این صورت است که هر تیم اجازه انتخاب برای کارهای خود را دارد.فریمورک ها و روش های مختلف همگی دارای نقاط قوت و ضعفی هستند اما به انتخاب مهندسین اعتماد داریم.هر کسی که در مورد اینکه از RN در همه جا استفاده کنید یا اینکه RN به زودی از بین می رود، با شما صحبت کرد احتمالا سعی دارد چیزی را به شما بفروشد.در انتها مراقب tribalism باشید

نسخه جدید اپلیکیشن دیجی کالا با React Naive;از شایعه تا واقعیت

reactapp.ir — Sat, 30 Nov 2019 12:18:03 +0330

تقریبا حدود یک سال پیش زمزمه هایی به گوش می رسید که دیجی کالا قصد داره نسخه جدید اپلیکیشن خودش رو با React Native بنویسه و تغییرات زیادی رو ایجاد کنه.با توجه به اینکه React Native هنوز به نسخه 1 و stable خودش نرسیده خیلی ها معتقد بودند که همچین ریسکی رو تیم فنی دیجی کالا انجام نمیده و حاضر نمیشه اپلیکیشن خودش را با React Native توسعه بده.دو شب پیش داشتم توییتر رو چک میکردم که به طور اتفاقی با توییت زیر روبرو شدمخبر انتشار نسخه جدید در google playآرش شمس در یک توییت خبر انتشار نسخه جدید اپلیکیشن دیجی کالا رو داده بود که زیاد چیز عجیبی نبود اما سوالاتی که در زیر این توییت پرسیده شده بود خیلی جذاب بود.عامر که یکی از برنامه نویس های شیپوره، پرسیده بود همونی که قرار بود با React Native نوشته بشه؟این جای داستان رو نمیشد ول کرد که آرش جواب آره رو داده بود.پس این یعنی زمزمه های یکسال پیش به واقعیت تبدیل شده بود و جالبی داستان اظهار نظر برخی دوستان بود که من خودم برنامه نویس react یا React Native هستم ولی فکر نمیکردم که دیجی کالا این ریسک رو کرده باشه.من به خاطر اینکه مطمئن بشم این داستان واقعیت داره با استفاده از dex2jar نسخه apk رو تست کردم تا مطمئن بشم.جواب تست هم مثبت بود و در این مطلب هیچ شکی نبود.اگر قصد دارید که بفهمید چه اپلیکیشن هایی با React Native توسعه داده شدند قبلا یک ویدئو آموزشی کوتاه با عنوان تشخیص ساخت apk با React Native در سایت قرار دادم که میتونید با تماشای این ویدئو خودتون هم این آزمایش رو انجام بدید.حالا که از این موضوع مطمئن شدم باید در ابتدای امر از مسعود عزیز و تیمش در دیجی کالا بابت توسعه یک اپلیکیشن خیلی قوی، سریع و جذاب با React Native تشکر کنم.امروز که من دارم این مطلب رو مینویسم گویا نسخه ای که در کافه بازار موجود هست هون نسخه قدیمی و نسخه google play با React Native است.من وقتی نسخه جدید رو نصب کردم واقعا شگفت زده شده بودم از این همه زیبایی و سرعت .چند تا عکس (از google play برداشتم) از نسخه جدید میزاریم تا شما هم تغییرات رو ببینید.از نسخه قدیمی هم چند تا عکس میزارم(از کافه بازار برداشتم) تا تفاوت رو ببینیدپیشنهاد میکنم حتما نسخه جدید رو نصب کنید(لینک دانلود رو آخر این مطلب گذاشتم) و نظراتتون رو در موردش برامون بگید تا متوجه بشم شما هم به قدرت React Native ایمان آوردید.قبل از اینکه فراموش کنم بهتون یه خبر نسبتا خوش بدم که ما از حدود تقریبا 3 ماه پیش در حال آماده سازی دوره آموزشی ساخت اپلیکیشن فروشگاهی مشابه دیجی کالا با React Native و Node Js هستیم که تا آخر اسفندماه 98 منتشر میشه و میتونید با مراجعه به این صفحه ضمن مشاهده پیش نمایش پروژه با ثبت ایمیل و خود، به هنگام انتشار دوره از 50 درصد تخفیف بهره مند شوید.دانلود نسخه React Native دیجی کالا از google play

نوشتن HOC برای مدیریت کردن Error های axios در React

reactapp.ir — Tue, 12 Nov 2019 21:58:33 +0330

hoc for error handling یکی از کتابخونه هایی که در React زیاد باهاش کار میکنم و خیلی هم دوست داشتنیه، عالیجناب axios نام داره.اگر بخوام این کتابخونه رو معرفی کنم فکر کنم بهترین تعریف رو میتونم از صفحه github این کتابخونه کپی کنم و اینجا بزارم:Promise based HTTP client for the browser and node.jsدرخواست هایی که ما به سرور میزنیم همیشه مطابق میل ما عمل نمیکنه و گاهی اوقات با مشکلاتی روبرو میشه و ما باید با یک پیغام کاربر رو از مشکل به وجود اومده مطلع کنیم تا بدونه که مشکل از سمت ما هست.اینکه کاربر رو از این امر مطلع نکنیم از لحاظ UX اصلا خوب نیست و تجربه خوبی رو به کاربر منتقل نمیکنه.به لطف ویژگی Intercept request and response که axios در اختیار ما قرار میده میتونیم یک HOC برای handle کردن خطاها بنویسیم و در هر کامپوننتی که نیازش داشتیم استفاده کنیم.فکر کنم تا همینجا زیاد صحبت کردم.بریم سراغ کد نویسی و شروع کار اصلی:در ابتدای امر یک کامپوننت به نام ErrorHandler تعریف میکنیم:import React,{useState,useEffect} from 'react'; const ErrorHandler=(WrappedComponent)=>{ return(props)=>{ return( ) } } export default ErrorHandler; در اینجا {props...} برای اینکه کامپوننتی که wrap شده props هاش از دست نره.قراره که ما پیغام خطاها رو در یک Modal به کاربر نمایش بدیم.پس باید یه همچین کامپوننتی رو بسازیم.چون ساختش کار خاصی نداره،خودتون اینکار رو بکنید.من فقط اینجا ایمپورتش میکنم.همچنین از React.Fragment استفاده میکنم چون JSX بهمون گیر میده اگر اینکار رو نکنیمimport React,{useState,useEffect} from 'react'; import Modal from '../UI/Modal/Modal'; const ErrorHandler=(WrappedComponent)=>{ return(props)=>{ return( یک چیزی اشتباهه ) } } export default ErrorHandler; حالا اون رو در کامپوننتی که لازم داریم ایمپورتش میکنیم و ازش استفاده میکنیمimport ErrorHandler from '../components/hoc/errorHandler'; export default ErrorHandler(HomePage);در اینجا اسم کامپوننت ما HomePage هست که قراره از HOC برای این کامپوننت استفاده کنیم.الان در خروجی روی صفحه ما یک Modal رو داریم که داخلش نوشته شده " یک چیزی اشتباه".تا اینجا یک HOC خیلی ساده نوشتیم که هیچ کار خاصی رو انجام نمیده.چون از Hooks استفاده میکنیم،باید به جای return(props) از یک function استفاده کنیمimport React,{useState,useEffect} from 'react'; import Modal from '../UI/Modal/Modal'; const ErrorHandler=(WrappedComponent)=>{ const withHookErrorHandler=(props)=>{ const [show,setShow] = useState(false); return( یک چیزی اشتباهه ) } } export default ErrorHandler;در واقع ما show رو که یک state هست برای نمایش یا عدم نمایش Modal استفاده میشه.قرار بر این بود که از ویژگی Intercept استفاده کنیم پس در فایل HomePage ما باید axios رو برای HOC بفرستیمexport default ErrorHandler(HomePage,axios);حالا نوبت میرسه به اضافه کردن interceprators ها به HOCimport React,{useState,useEffect} from 'react'; import Modal from '../UI/Modal/Modal'; const ErrorHandler=(WrappedComponent,axios)=>{ const withHookErrorHandler = (props)=>{ const [show,setShow] = useState(false); axios.interceptors.request.use(req => { setShow(false); return req; }); axios.interceptors.response.use(res => res, error => { setShow(true); console.log(error) }); const errorConfirmHandler=()=>{ setShow(false) } return( یک چیزی اشتباهه ); } return withHookErrorHandler } export default ErrorHandler;توجه کنید که در .interceptors.request باید حتما return req قرار بگیره وگرنه تمامی request های ما رو بلاک میکنه و هیچ درخواستی فرستاده نمیشه.در interceptors.response در صورت وجود error ما مقدار show رو برابر با true میزاریم تا Modal نمایش داده بشه.در اینجا ما فقط یک پیغام ثابت رو داریم و اون هم عبارت "یک چیزی اشتباه".میتونیم یک errorState تعریف کنیم و زمانی که در reponse دریافتی error داشتیم errorState رو برابر با همین error قرار بدیم.به همین راحتی میتونیم در هرکامپوننتی که نیاز داریم،این HOC رو ایمپورت و ازش استفاده کنیم.

شما نمی توانید یک developer باشید

reactapp.ir — Wed, 14 Aug 2019 11:08:38 +0430

شما نمی توانید یک توسعه دهنده باشید.به شما این جمله رو گفتن چونریاضی تون خوب نیستزبان انگلیسیت ضعیفهمدرک دانشگاهی نداریمدرک دانشگاهی داری اما در حوزه کامپیوتر نیستپیر هستیزن هستیو خیلی دلایل احمقانه دیگه...!!همه این دلایل به شما گفته شده که چرا نمی تونید یک توسعه دهنده باشید در حالی که هیچکدوم درست نیست.من ازتون میخوام که این حرف هایی که شندید رو از حافظتون پاک کنید .داستان منبه عنوان یک بچه از سن 9 سالگی که کامپیوتر وارد خونمون شد بیشتر زمانم رو با بازی های کامپیوتری میگذروندم.یادمه که مریم دختر خاله مامانم تازه مدرک کارشناسی نرم افزارش رو از هند گرفته بود و ما رفتیم مشهد تا یک سیستم خوب کامپیوتری رو برام انتخاب کنه. تنها استفاده ای که از این سیستم می شد بازی های کامپیوتری بود.به علت شغل خانوادگی من از 15 سالگی همراه پدر و برادرام سرکار میرفتم و دیگه کلا کامپیوتر و بازی های کامپیوتری فراموش شده بود چون صبح از ساعت 6 سرکار بودم تا 6 بعد ازظهر و بعد از اون هم یا استراحت میکردم یا با دوستام زمان باقیمونده تا شب رو سپری می کردم.این زمان گذشت و کنکور و انتخاب رشته فرا رسید.من اصلا در ابتدا قصد نداشتم رشته کامپیوتر رو تو لیست انتخاب رشته بیارم ولی با اصرار مشاور تو لیست اضافه شد.وقتی که نتایج اومد دیدم که کامپیوتر دانشگاه صنعتی بیرجند رو قبول شدم و باید 4 سال رو با این رشته بگذرونم.راستش رو بخواین وقتی اولین جلسه کلاس مبانی برنامه نویسی رو رفتم چون چند تا از بچه ها قبلا کار کرده بودند من کلا از خودم ناامید شده بودم و فکر میکردم رشته بدی رو انتخاب کردم.اینکه هیچ سررشته ای از برنامه نویسی نداشتم من رو ناامید تر میکرد.همون طور که کلاس مبانی ادامه پیدا میکرد و من با الگوریتم های متفاوت آشنا می شدم علاقم بیشتر می شد و سعی میکردم تو خوابگاه زمانم رو با نوشتن برنامه های مختلف بگذرونم.یادمه که پروژه پایانی اون درس پیاده سازی بازی بیلیارد با زبان c++ بود که من اون رو تا یک جاهایی نوشتم و نمره خوبی هم از این درس گرفتم.اولین تجربه بددر محله ای که ما زندگی می کنیم یک هیئت هست که من به مراسمات عزاداری این هیئت میرفتم.یادمه که بعد ازاینکه متوجه شدن من تو رشته کامپیوتر قبول شدم ازم خواستن برای هیئت یک سایت طراحی کنم و منم قبول کردم.یک چالش خیلی بزرگ بود و من هیچ سررشته ای در این زمینه نداشتم و فقط با c++ چند برنامه ساده نوشته بودم.ترم دو داخل دانشگاه یک دوره طراحی وب CIW برگزار می شد که من شرکت نکردم راستش رو بخواین پولش رو نداشتم.دوستم تو این دوره شرکت کرده بود و مشکلی براش پیش اومد و من به جای اون دوره رو شرکت کردم(البته هزینه رو بهش دادم به هر بدبختی که بود).متاسفانه این دوره اصلا خوب نبود مثل خود دانشگاه و به درد من نخورد و من هم قول داده بودم تا سایت هیئت رو طراحی کنم.مجبور شدم خودم شروع کنم به یادگیری و زبان انگلیسی منم افتضاح بود.خیلی طول کشید تا یادبگیرم چجوری جستجو کنم تا به پاسخ برسم.هنوز به درجه ای نرسیدم بودم که بتونم به طور کامل سایت رو طراحی کنم.داستان رو اینجا نگه دارید تا بقیه مسائل رو روشن کنمبه حرف مردم گوش نکنیددر ایران متاسفانه یک رسم خیلی بد وجود داره .اینکه همه سوال می کنند کجا قبول شدی؟ و اگر جوابت یکی از دانشگاه های تاپ کشور نباشه در جواب میگن الان که پول میدی و مدرک لیسانس میگیری کو کار؟این جمله یعنی اگر دانشگاه تاپ قبول نشدی به جایی نمیرسی.صدبار این سوال از من پرسیده شد و هر بار که میگفتم دانشگاه صنعتی بیرجند، عکس العمل خنده بود و همون جمله قبلیمن خیلی حواسم بود که باعث نشه تا ذهنیت من نسبت به دانشگاه رفتن خراب بشه و رویاهایی رو که داشتم فراموش کنم.این ماجرا تا ترم 4 ادامه داشت و من تمام تلاشم این بود که به علاقم یعنی برنامه نویسی لطمه ای وارد نشه.نمراتنمرات دروس دانشگاه من بد نبود و بیشتر این موضوع بر میگشت به اینکه اساتید زیاد سخت نمی گرفتند و میتونستی با دو شب درس خوندن هر درسی رو پاس کنی.متاسفانه چارت رشته نرم افزار خیلی قدیمی بود و درس هایی که داشتم یا اصلا به دردمون نمی خورد یا مرتبط نبود.من هنوز آزمایشگاه های فیزیک رو درک نکردم که چرا پاس کردیم.درس های دانشگاه به غیر از تعداد اندک شماری اصلا به درد من نخورد و من فکر میکنم رشته دانشگاهی من تاثیر خاصی در وضعیت الان من نداشت.طراحی سایتبرگردیم سر پروژه ای که من در اولین چالش برنامه نویسی زندگیم قبول کرده بودم و استرس داشت من رو نابود می کرد.زبان انگلیسی افتضاح یک طرف و بلد نبودن شیوه درست جستجو کردن یک طرف دیگه.به مرحله ای رسیده بودم که قصد داشتم برم بگم نمیتونم سایت رو طراحی کنم و شکست رو قبول کنم.ولی یک مقاله مسیر رو برای من تغییر داد و با خوندش یاد گرفتم که چجوری یاد بگیرم. فیلم های یوتیوب رو میدیدم،منابع خوبی پیدا کرده بودم و تقریبا بعد از یک سال و نیم تونستم سایت رو تحویلشون بدم.اون موقع هیئت امناء هیئت عوض شده بود و کلا سایت رو بیخیال شده بودند ولی من به خاطر همین پروژه خیلی چیزها و زبان ها رو یاد گرفتم.راه اندازی کسب و کاربعد از این داستان ها و قضایا من و علیرضا به فکر راه اندازی یک کسب و کار تو حوزه ینه گردشگری افتادیم.ابتدا قرار بود علیرضا اپلیکیشن رو با جاوا بنویسه.من یک مقاله از اردلان نقشینه در مورد React Native خوندم وخیلی بهش علاقه مند شدم و یک اپلیکیشن کوچولو باهاش نوشتم و دیدم خیلی به دل میشینه. بنا به یک سری دلایل تصمیم گرفتیم که اپلیکیشن رو با React Native بنویسیم و من شروع کردم به یادگیری پیش نیازهاش.قبلا بخاطر پروژه طراحی سایت من با جاوا اسکریپت کار کرده بودم ولی باید ES6 و React رو خودم یاد میگرفتم.تجربه قبلی به من خیلی کمک کرد و من کلیه اینا رو با ویدئوهای یوتیوب و داکیومنت سایت خودش یاد گرفتم و بعد شروع کردم به یادگیری React Native همون غول مرحله آخر.برای یادگیری React Native خیلی به چالش خوردم چون به بلوغ نرسیده بود و زیاد براش مطالب آموزشی وجود نداشت و من ساعت ها زمانم رو صرف بررسی issue ها میکردم.از طرفی من دید خاصی نسبت به طراحی اپلیکیشن نداشتم.اپلیکیشن به جاهای خوبی رسیده بود که باید سمت سرور رو به یکی مسیپردیم تا اون رو بنویسه و تو یک جلسه نیم ساعته علی یکی از همکلاسی هامون قبولش کرد.از اینجا به بعد به چالش هایی خوردیم که براش برنامه ریزی نکرده بودیم.من برای پروژه پایانی باید یک سامانه ارسال،دریافت و پیگیری مقالات برای 3 پنل مدیران، داوران و کاربران می نوشتم که خیلی از وقتم رو گرفت.بعد از یک مدتی تقریبا 8 ماهه که در حال طراحی اپلیکیشن همراه با درس و پروژه بودیم، دانشگاه تموم شد و باید به فکر خدمت می بودیم که علی یهو رفت خدمت و پروژه رفت رو هوا.اپلیکیشن گردشگری با 80 درصد پیشرفت ول شد چون به علی نیاز مبرم داشتیم.بعد از اینکه علی تونست انتقالی بگیره، نوبت به خدمت من رسید و من باید میرفتم.از طرفی reactapp.ir رو هم شروع کرده بودیم و پیشرفت خوبی داشت و اینجا تصمیم گرفتیم که اپلیکیشن گردشگری رو بزاریم کنار.این چالش ها رو خیلی دوست دارم.چون باعث شد علاقه من به برنامه نویسی دو چندان بشه.کسی که تا دوران دانشگاه فقط از سیستم برای بازی استفاده میکرده، اصلا نمی خواسته کامپیوتر رو انتخاب کنه، زبانش ضعیف بوده و دروس دانشگاهی رو هم به زور پاس کرده یک چیز تا اینجا کشونده اون هم علاقه است.من الان در حال گذروندن خدمت سربازیم هستم ولی از هر فرصتی که پیش میاد سعی میکنم چیزهای جدید یاد بگیرم .پس اصلا به حرف مردم گوش نکنید، دلسرد نشید، از چالش نترسید، شکست ها رو تجربه در نظر بگیرید و فقط به علاقتون فکر کنید.هیچ چیز نمی تونه جلوی شما رو بگیره که یک developer بشید غیر از خودتون.

برای انتخاب عنوان این نوشته شما بهمون کمک کنید!

reactapp.ir — Wed, 31 Jul 2019 11:54:39 +0430

تو این چند سال گذشته شنیدن تجربه های دیگران در ادامه مسیر کاری و زندگی شخصی خیلی بهم کمک کرده ، شاید میشه به همون جمله معروف اشاره کرد که تجربه پدر علمه !! خب تو این چند سالی که کارمون رو شروع کردیم حتی از زمانی که اوایل کارمون بود و دو نفر بیشتر نبودیم سعیمون بر این بود که یک سری جلسه های هفتگی منظم داشته باشیم . اوایل کار اینطور بود که آخر هر هفته ، هر زمانی که در طول هفته قبل باهم به مشکل خورده بودیم و یا دلخوری برامون پیش اومده بود رو به چالش میکشیدیم و راجبش صحبت میکردیم تا مساله حل بشه و دلخوری بین خودمون نباشه . این روند رو توی این چند ساله ادامه دادیم و کم کم سعی کردیم این دور همی های کوچیک تو تیم رو بهتر و بهتر کنیم. الان هم مدتیه که تصمیم گرفتیم این جلسه های کوچیکمون رو توی دفتر به دو بخش تقسیم کنیم . 1. هر دو شنبه عصر خیلی کوتاه در مورد کارهایی که انجام دادیم تو هفته و برنامه های هفته آیندمون (چه فنی چه غیر فنی) صحبت میکنیم ، شاید کل این گفت و گو بین بچه ها اگه خیلی طولانی بشه 1 ساعت بیشتر زمان نگیره اما خیلی تاثییر گذاره . البته ممکنه بعضی از هفته ها با توجه به ماهیت کار جلسه های دوشنبه طولانی تر هم بشه .2. اما بخش دوم جلساتمون میشه هر هفته پنجشنبه عصر ، که خب گفت و گو هامون خیلی طولانی تره ، حتی بیشتر برناممون اینه جلسه های 5 شنبه رو کمتر راجب کار صحبت کنیم ، بیشتر هر کسی در مورد چیز های جدیدی که در طول هفته قبل یاد گرفته صحبت میکنه (حالا اون میتونه یک فریمورک باحال جاوااسکریپتی باشه یا یه کتاب جذاب تاریخی ) . بعد هم یکم بازی رو چاشنی کار میکنیم. اگه وقت شد و خواستیم راجب به کار و برنامه های پیش رو هم صحبت میکنیم اگه نه اون رو موکول میکنیم به همون دوشنبه عصر . قبل ازینکه انتقال تجربه بین بچه های تیم یا هماهنگ کردن برنامه های کاریمون اهمیت داشته باشه ، صرفا خود گفت و گو و ارتباط گرفتنه که برامون مهم هست . تو شرایطی که خب ما آدم ها شاید خیلی کم باهم گپ بزنیم ، تو یک تیم یا یک شرکت گفت و گو و صحبت بین اعضا میتونه خیلی سازنده باشه علاوه بر اینکه این صحبت ها قطعا میتونه به رشد فردی خودمون هم کمک زیادی کنه . حالا فرقی نمیکنه شما یک تیم چند نفره استارتاپی باشین یا یه شرکت با کلی نیرو و تشکیلات ! به نظرم گفت و گو همیشه راه حل سازنده هستش . حالا هدفم از نوشتن این برنامه ها این بود که از این به بعد سعی میکنیم لابه لای نوشته های تخصصیمون در ویرگول ، در مورد همین جلسه ها ، انتقال تجربیات بین بچه ها و موارد دیگه ای که وجود داره پست هایی رو منتشر کنیم تا اینطوری شما هم تجربه های ارزشمندتون رو با ما در میون بزارید و بیشتر از قبل به هم نزدیک بشیم .البته که خیلی خوب میشه اگه شماهم یک اسم و عنوان ثابت برای این نوشته ها به ذهنتون میرسه رو در کامنت ها باهامون به اشتراک بزارید :)

سوالاتی که در مصاحبه یک React developer پرسیده می شود

reactapp.ir — Wed, 24 Jul 2019 12:38:03 +0430

آیا به دنبال سوالاتی هستید که در مصاحبه استخدام یک React Developer پرسیده می شود؟آیا به دنبال راهنمایی هایی هستید که شما را به عنوان توسعه دهنده React آینده خود را رقم بزنید؟یا ممکن است فقط به دنبال جزئیاتی در مورد React باشید.مثلا (تقاوت بین state و props).در هر صورت شما به جای درستی اومدید.من چند سال پیش در موقعیت شما بودم و همین سوالات در ذهنم بود.چه سوالاتی در مصاحبه های React در انتظار شما است؟دو نوع سوال انتظار می رود که از شما در مصاحبه پرسیده شود.سوالاتی مفهومی و Live coding.سوالات Live coding به این صورت است که از شما میخوان یک الگوریتم رو پیاده سازی کنید یا یک کامپوننت رو بنویسید و از اون استفاده کنید.تنها راهی که برای آمادگی این سوالات وجود دارد اینکه زیاد تمرین کنید و کد بنویسید.اگر شما تا حالا پروژه ای با React ننوشتید.ادامه مقاله رو نخونید و بعد از نوشتن یک پروژه برگردید.خوندن این سبک مقالات جادو نمی کند و شما را برای سوالات Live coding آماده نمی کند تنها راه آمادگی، انجام پروژه است.جایگزینی برای اینکار وجود ندارد.به همین دلیل تمرکز این مقاله بر روی سوالات مفهومی است.این نوع سوالات بر روی اندازه گیری دانشتون در مورد React و توانایی شما برای توضیح آن ها به صورت مختصر و روشن طراحی شده است.این مقاله،بیشتر سوالات محبوب مفهومی در مورد React را پوشش داده است.حتی اگر این سوالات از شما هرگز پرسیذع نشود اما به عنوان یک React Developer کمک می کند تا داتشتون افزایش پیدا کنه و جزئیات بیشتری رو در مورد React بدونید.State vs Propsخب بهتره که از آسان ترین مورد شروع کنیم.اگر به توصیه من عمل کرده باشید و چندین پروژه قبل از خوندن این مقاله انجام داده باشید حتما تفاوت بین این دو تا رو درک کردید ولی اگر قصد داشته باشید به صورت روشن و واضح توضیح بدید،به مشکل بخورید.پراپس ها داده هایی هستند که از طریق والد می آیند در حالی که state ها داده هایی در سطح کامپوننت هستند.یک کامپوننت هرگز خودش props تعریف نمیکنه بلکه از طریق والد این داده بهش میرسه و توسط کامپوننت قابل تغییر نیست.state با هدف ایجاد و تغییر توسط کامپوننت وجود داره و با استفاده از this.setState میتوان مقدار اون رو تغییر داد و بروز کرد.البته در نسخه های بالاتر از 16.8.0 و بعد از معرفی hooks از useState به جای thsi.setState استفاده میشه.در واقع این همون one-way data flowهست.داده ها همیشه از والدین به فرزندان میرسه.Redux یک داستان کاملا متفاوت داره که بهش خواهیم پرداخت.توضیح Redux در پنج دقیقهاین یک سوال مصاحبه عالی هست که از خود من پرسیده شده بود.این سوال باعث میشه تا شما خیلی از مفاهیم رو درک کنید و یاد بگیرید.زمانی که شما Redux رو توضیح میدید در واقع دارید مشکلی که Redux قصد داره اون رو حل کنه و روش حل رو توضیح میدید.انتقال، اشتراک گزاری و تغییر داده در تمامی کامپوننت ها باعث شلوغی و بهم ریختگی می شود.Redux اینکار رو با جداسازی لایه data از بقیه کدها آسانتر میکنه.حالا وقتشه که در مورد مفهوم هسته Redux یعنی store, actionsو reducers صحبت کنیم.Storeجایی هست که تمامی داده ها نگه داری می شود.store یک اتصال راحت برای تعامل با state های global در اپلیکیشن فراهم می کند.برای دریافت این object در هر زمانی کافی است store.getState() رو فراخوانی کنیم.Actionsکارهایی که قرار است ما با Store انجام بدیم.هر زمانی که ما یخوایم قسمتی از state رو تغییر بدیم، این فرآیند با یک Action انجام میشه.اکشن فقط یک JSON objects است که به فرم زیر است:const action = {type: SOME_TYPE, ...properties}زمانی که ما بخواهیم یک action اجر شود، ما action رو dispatch می کنیم:store.dispatch(action);Reducersیک reducer یک تابع در Redux است که action را مدیریت می کند و تصمیم میگیرد چگونه store باید بروزرسانی شود.این فرآیند اولین اصول کلیدی Redux رو یاد میده:هرگز state رو تغییر نده.Reducers همیشه state ایی که در حال حاضر وجود داره رو میگیره و یک action روش انجام میده و یک state جدید رو بر میگردونهاین ممکنه که در ابتدا یکم عجیب و غریب به نظر برسه و چیزی هست که بسیاری از مردم اشتباه میکنند اما شما باید در مصاحبه به این سوال پاسخ بدید.در مثال پایین می تونید یک مثال از reducer رو ببینیدfunction counter(state = 0, action) { switch (action.type){ case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; // in case an action is unknown or should not modify state }}اگر شما بتونید در 5 دقیقه Redux رو به صورت روشن و مختصر توضیح بدید،نصف راه مصاحبه رو به خوبی تموم کردید.همچنین میتونید ازطریق بصری سازی کار Redux مشابه عکس زیر این فرآیند رو کوتاه تر کنید.https://i2.wp.com/programmingwithmosh.com/wp-content/uploads/2018/09/redux_explained.png?ssl=1Class Component vs Functional Componentاگر مدتی است که با React کار می کنید حتما با class و functional components آشنا هستید.به class component زیر نگاه کنید:class Hello extends Component{ render(){ return

Hello {this.props.name}

} }در قطعه کد زیر همون کامپوننت با Function نوشته شده است:function Hello(props){ return

Hello {props.name}

}در مقاله هر چیزی که نیاز دارید در مورد Functional و class Component در React بدونید در این مورد به صورت کامل صحبت شده.پیشنهاد میکنم این مقاله رو بخونید و دیگه من اینجا در این مورد صحبت نمی کنم. https://reactapp.ir/react-functional-components/ زمانی که شما setState رو فراخوانی می کنید چه اتفاقی می افتد؟تنها زمانی که شما می توانید به صورت مستقیم this.stateرو بنویسید در constructor یک کامپوننت است.هر جای دیگه ای شما فقط می تونید از this.setState برای تغییر state استفاده کنید..زمانی که شما setState رو فراخوانی می کنید، یک مقدار به این method پاس میدید و سعی میکنه که این مقدار پاس شده رو با state قبلی ترکیب کنه و state به روز بشه.با بروز شدن state در واقع UI به روز رسانی میشه و نتیجه رو کاربر معمولا میبینه.در React کامپوننتی که this.setState رو فراخوانی کرده و همچنین تمام فرزندانش نیاز دارند تا با بروزرسانی state تغییر و re-render بشند.یکی از استثنائات این است که کامپوننت componentShouldUpdate رو پیاده سازی کرده باشد که false برگردونه و با این پیاده سازی باعث میشه که کامپوننت با this.setState دیگه re-renderer نشود.شما ممکن است نیاز داشته باشید اطلاعات بیشنری در مورد this.setStateداشته باشید.مثلا گاهی اوقات asynchronous است و گاهی اوقات نیست.گاهی اوقات ممکن است شما بخواهید یک callback function به this.setState. پاس بدید.البته این سوالات معمولا خارج از محدوده سوالاتی است که در یک مصاحبه معقول پرسیده می شود.ولی شما می تونید از اینجا و اینجا اطلاعات بیشتری در این مورد کسب کنید.DOM در مقابل Virtual DOMبه عقیده من این یکی از سخت ترین قسمت ها برای توضیح دادن و فهمیدن است.شما می تونید تعداد زیادی پروژه با React نوشته باشید بدون اینکه در مورد Virtual DOM چیز خاصی فهمیده باشید.اما به این معنی نیست که این مبحث مهم نیست چون شما چندین پروژه نوشتید.بهترین توسعه دهنده های React که من میشناسم مفاهیم اساسی و اصلی React رو به صورت کامل درک کردند و میدونند نه اینکه فقط کار با API ها رو بدونند.درک اینکه چه چیزی در پشت React است شما رو در اشکال زدایی و نحوه استفاده از این کتابخونه کمک میکنه.DOMبرای صحبت در مورد virtual DOM در React ما باید ابتدا DOM رو درک کنیم.DOM مخفف Document Object Model است.شاید در نگاه اول گیج کننده به نظر برسد اما این یک نام fancy برای نحوه نمایش HTML در حافظه است.یک رابط برای تعامل توابع جاوا اسکریپت با گره ها مثل getElementById ایجاد می کند.اما تغییر ایجاد کردن در DOM پرهزینه است.هر باری که ما بخواهیم یک element رو تغییر بدیم باید کل ساختار درخت رو برای یافتن elemet طی کنیم.با توجه به افزایش اندازه و پیچیدگی نشانه گذاری های HTML، هر بار که ما DOM رو تغییر میدیم باید کل این درخت بزرگ رو طی کنیم که باعث کاهش عملکرد و سرعت می شود.Virtual DOMیک کپی از DOM است که native برای React است.همانطور که قبلا دیدیم با this.setState شما حداقل تعداد re-render برای کامپوننت ها و فرزندانشون رو می تونید تصور کنید این تغییرات فقط بخاط بروزشدن state رخ می دهد.بعد از بروزرسانی های مورد نیاز کامپوننت ها در virtual DOM، یک مقایسه با DOM انجام می شود و تغییرات مورد نیاز روی DOM اعمال می شود.این کار باعث می شود تا تمام ساختار درخت طی نشود و فقط گره هایی که مورد نیاز است بروز شود.یکی از دلایلی که باعث سرعت بالای React در لود شدن صفحات virtual DOM است.اگر این مقاله براتون مفید بوده و باعث شده تا در مصاحبه یک شغل موفق باشید با بقیه به اشتراک بزاریدش.همچنین اگر سوالات دیگه ای از شما در مصاحبه پرسیده شده در کامنت ها بیانش کنید تا همگی استفاده کنیم. همچنین اگر قصد یادگیری react رو به صورت تخصصی و حرفه ای دارید، پیشنهاد می کنم آموزش جامع و پروژه محور react (ری اکت ) رو مشاهده کنید

درک Virtual DOM در React

reactapp.ir — Sat, 13 Jul 2019 13:02:03 +0430

اگر شما از React استفاده می کنید یا در حال یادگیری React هستید،به احتمال زیاد اصطلاح “Virtual DOM” رو شنیدید.در این مقاله قصد داریم توضیح بدیم که Virtual DOM چیه و React چرا از اون استفاده میکنه. Real DOM اولین مفهومی که شما باید بدونید DOM هست که مخفف کلمات “Document Object Model” است.اگر بخوایم DOM رو توضیح بدیم در ساده ترین تعریف میشه گفت:DOM نشان دهنده UI وب سایت(اپلیکیشن) شما است.هر تغییری که در وضعیت UI اپلیکیشن یا وب سایت شما رخ میدهد،DOM بروزرسانی می شود تا تغییرات را به شما نمایش دهد.تغییرات در DOM غالبا در عملکرد تاثیر میگذارد و باعث کاهش عملکرد می شود. چه تغییرات در DOM باعث کاهش عملکرد می شود؟ ا DOM به عنوان یک ساختار داده درختی ارائه شده است.اگر به عکس بالا توجه کنید کامل متوجه این موضوع خواهید شد و بخاطر این ساختار تغییرات و بروزسانی DOM سریع است.اما بعد از تغییرات ،element بروزشده و فرزندانش re-rendere می شوند تا UI اپلیکیشن بروز شود.این re-rendering یا re-painting رابط کاربری(UI) باعث کاهش عملکرد می شود.بنابراین هر چقدر که تعداد کامپوننت های UI شما بیشتر باشد بروزرسانی DOM برای شما گران تر تمام خواهد شد و عملکرد و سرعت اپلیکیشن شما کاهش پیدا خواهد کرد زیرا برای هر بروزرسانی DOM باید این کامپوننت ها re-render شود. Virtual DOM چیستبه طور قابل توجهی بهتر از DOM واقعی عمل می کند. virtual DOM در واقعی یک ارائه مجازی از DOM است.هر زمانی که وضعیت اپلیکیشن ما تغییر می کند به جای DOM این virtual DOM است که بروز رسانی می شود.ممکنه اینجا این سوال تو ذهنتون به وجود بیاد که virtual DOM داره کار DOM رو انجام میده و چه کاریه که دوربار این عملیات انجام بشه؟؟چطور میتونه از بروزرسانی DOM واقعی سریعتر باشه.جواب این سوال که جطور virtual DOM به طور قابل توجهی از DOM سریعتر هست رو میتونید در ادامه بخونید.Virtual DOM چگونه سریعتر است؟ زمانی که یک element جدید به UI اضافه می شود، یک virtual DOM که به شکل یک درخت نمایش داده می شود، ایجاد می شود.هر element یک گره(node) از درخت است.اگر وضعیت هر یک از این element ها تغییر پیدا کند، یک درخت virtual DOM جدید ایجاد می شود.این درخت با virtual DOM قبلی مقایسه می شود.زمانی که این کار انجام می شود، virtual DOM بهترین روش ممکن برای ایجاد تغییرات به DOM واقعی را محاسبه می کند.این تضمین میکند که حداقل عملیات در DOM واقعی وجود دارد.پس هزینه های بروزرسانی DOM واقعی را کاهش می دهد. تصوبر زیر درخت virtual DOM و فرآیند مقایسه را نشان می دهد. دایره های قرمز نشان دهنده گره هایی هستند که تغییر کرده اند.این گره نشان دهنده element های UI هست که وضعیتشان تغییر پیدا کرده است.تفاوت بین درخت قبلی virtual DOM و درخت فعلی virtual DOM محاسبه می شود.تمام زیرمجموعه های گره پدر re-render می شود تا UI به روزرسانی شود.این درخت به روز شده DOM واقعی را به روز می کند. ری اکت چگونه از virtual DOM استفاده می کند؟حالا که شما یک درک کامل از virtual DOM پیدا کردید و متوجه شدید که چطور به عملکرد برنامه شما کمک میکند،وقت آن است که درمود نحوه استفاده React از virtual DOM اطلاعاتی کسب کنیم.در React هر تیکه از UI یک کامپوننت است و هر کامپوننت یک state دارد.React یک الگو قابل مشاهده را دنبال می کند و به تغییرات state گوش می دهد.زمانی که state کامپوننت تغییر پیدا کرد، React درخت virtual DOM را بروز رسانی می کند.از آنجایی که virtual DOM بروز شده است، React درخت فعلی virtual DOM را با درخت قبلی مقایسه می کند. این فرآیند “diffing” نامیده می شود.از آنجایی که React می داند virtual DOM objects تغییر پیدا کرده است پس فقط این objects را در DOM واقعی بروز می کند.این فرآیند باعث می شود تا عملکرد بهتر از زمانی باشد که مقایسه مستقیم بر روی DOM واقعی انجام می شود.این فرآیند React را به عنوان یک کتابخانه جاوا اسکریپت با عملکرد بالا برجسته می کند.به عبارت ساده شما به React می گویید که چه وضعیتی از Ui را می خواهید و آن مطمئن می شود که این وضعیت با DOM سازگار است.مزیت بزرگ در اینجا این است که به عنوان یک توسعه دهنده لازم نیست بدانید که چگونه attribute دستکاری می شوند، event ها چگونه مدیریت می شوند یا بروزرسانی دستی DOM در پشت صحنه اتفاق می افتد.همه این جزئیات به دور از توسعه دهندگان React است.یعنی شما نیازی به دخالت در این جزئیات و دونستن اون ها ندارید.همه چیزهایی که شما باید بدانید این است که وضعیت کامپوننت خود را همانطور که لازم است تغییر بدهید و بروز کنید،React بقیه کارها را انجام می دهد.این یک تجربه عالی و منحصر به فرد است که توسعه دهندگان React از اون بهره می برند.بروز رسانی دسته ای(Batch Update)ری اکت از یک مکانیزم بروزرسانی دسته ای برای بروزرسانی DOM واقعی استفاده می کند.این کار باعث افزایش چشمگیر عملکرد برنامه می شود.این به این معنی است که بروزرسانی DOM واقعی در دسته های ارسال شده به جای ارسال بروزرسانی برای هر تغییر state است.بازنویسی UI بخش پرهزینه ای است که React تضمین می کند DOM واقعی به روزرسانی ها را به صورت دسته ای دریافت می کند. خلاصهدستکاری های مکرر DOM واقعی پرهزینه هستند و باعث کاهش عملکرد برنامه می شود.رVirtual DOM یک ارائه مجازی از DOM است.وقتی state تغییر می کند، DOM مجازی به روز می شود و نسخه قبلی و فعلی Virtual DOM رو مقایسه می کند.این فرآیند “diffing” نامیده می شود.رvirtual DOM بروزرسانی ها را به صورت دسته ای برای DOM واقعی به منظور بروزسانی UI ارسال می کند.ری اکت از virtual DOM برای بهبود عملکرد استفاده می کند.ری اکت از observable برای تشخیص تغییرات state و prop استفاده می کند.ری اکت از diff الگوریتم برای مقایسه نسخه های virtual DOM استفاده می کند.

5 فریمورک nodejs که بهره وری کدتان را افزایش میدهند

reactapp.ir — Wed, 10 Jul 2019 09:51:40 +0430

نود جی اس یک فریمورک متن باز (Open-source) چند سکویی و Runtime جاوااسکریپتی است که به کمک آن سمت سرور یک پروژه را می توان توسعه داد. این پلتفرم از موتور جاوااسکریپتی V8 گوگل کروم برای تبدل کدهای جاوااسکریپت به کد ماشین استفاده می کند به همین دلیل از سرعت بالایی برخوردار می باشد.فریمورک ها سکوهایی برای توسعه برنامه های نرم افزاری می باشند که استفاده از آنها یک چارچوب استاندارد جهت توسعه پایدارتر برنامه ها را دراختیار برنامه نویس قرار می دهد. همچنین فریمورک های nodejs در سطحی گسترده امکان کار بر روی نرم افزار ها با توجه به منطق کسب و کار آن نرم افزار را فراهم می آورد. می توان پیشبینی کرد چشم انداز آینده nodejs پیشرفت چشم گیر برنامه های کاربردی و تکنولوژی های توسعه وب باشد.اما همیشه سوالاتی مطرح می شود که شاید به نوعی واقعا عذاب آور باشد اینکه بهترین فریمورک سال 2019 کدام است و اینکه از کدام یک بهتر است استفاده کنم و کدام یک از فریمورک ها با توجه به نیازی های پروژه ام مناسب است؟این سوالات مثل این است که بگوید چه لباسی بپوشم و خب این بستگی به جایی که شما می خواهید بروید دارد!در این مقاله تمامی جوانب مثبت و منفی هر یک از فریمورک ها را بررسی کرده ایم تا برای هر دو گروه یعنی برنامه نویس و در نهایت کاربر مناسب باشد و از طرفی معیار انتخاب ما از 5 فریمورکی که قرار است با هم مورد بررسی قرار دهیم سهم هر یک از آنها در جامعه Github می باشد. اما معیارهای دقیق تر برای این انتخاب چیست ؟به برنامه نویسان سمت سرور این امکان را دهد تا سریع و مقیاس پذیر یک سیستم را توسعه دهند. : جمله بالا به موارد زیر اشاره دارددر برگیرنده مدل event-base I/O باشدساختار پیچیده ای نداشته و سبک باشدمبتنی بر single-thread Asynchronous باشد. در نظر داشته باشید که “سریع “بود تنها به بارگیری صفحات و انجام فرآیندها اشاره ندارد بلکه منظور سرعت توسعه فرآیندها نیز می باشد.به طوری که برنامه نویسی که سمت سرور را با nodejs پیاده سازی می کند دیگر نیازی به آشنایی و یادگیری دو یا چند زبان ندارد و با دانستن js می تواند هم back-end و هم front-end را توسعه دهد. به نوعی می توان یک فریمورک را نوعی طراحی انتزاعی از ساختار NodeJS دانست که اسکلت یا همان بنای توسعه برنامه هایی است که برنامه نویس در تمامی بخش های آن نگرش خود را پیاده سازی می کند.منظور از اسکلت مجموعه ای از ابزار ها، دستورالعمل ها و شیوه ها که می تواند به شما در توسعه و ارائه نمونه اولیه کمک کند. فریمورک ها به طور کلی باید دو ویژگی اساسی را داشته باشند : افزایش بهره وری و افزایش مقیاس پذیری انواع فریمورک های nodejs :فریمورک های نود جی اس را می توانیم در سه بخش طبقه بندی کنیم :Model view controller frameworksFull stack frameworksREST API frameworks نوع اول این امکان را به شما می دهد تا با استفاده از مدل MVC ساختار پروژه تان را برای توسعه پایدار و سریع آماده کنید. از جمله فریمورک هایی که در این ردیف قرار می گیرند می توان به ExpressJS،SailsJS،HapiJS اشاره کرد. در این نوع فریمورک ها یعنی فریمورک هایی با ساختار MVC شما حق انتخاب های زیادی دارید مثل اینکه می توانید موتور قالب (Template Engine) خود را تغییر دهید به چیزی که به آن نیاز دارید. فریمورک های نوع دوم شما یک ساختار از قبل توسعه داده شده را در اختیار دارید مانند template engine و sockets و … و فریمورک های نوع سوم شما باید یک چارچوب یا به عبارتی یک API تولید کنید تا بتوانید فریمورک را مورد استفاده قرار دهید. 1- ExpressJS : یک فریمورک یا بهتر است بگویم یک مینی فریمورک است که اگر تا این لحظه با nodejs کار کرده باشید مطمئنا با این فریمورک آشنایید و یا به احتمال زیاد تا حدودی با آن کار کرده اید. فریمورکی است که نقش یک میان افزار (middleware) را بین سرور و روت ها (Route) اجرا می کند و توسط بسیاری از شرکت های مورد استفاده قرار گرفته است.و به مراتب عملکرد قابل قبولی دارد که این شرکت ها اقدام به نگهداری و توسعه هر چه بیشتر کسب و کار خود با این فریمورک می کنند. توسعه API های قدرتمند توسط این فریمورک شاید اصلی ترین دلیل برای افزایش محبوبیت آن در سال 2019 باشد و این توسعه دهنگان را قادر می سازد تا با تعریف مسیرهایی بتوانند داده ها را بین دیتابیس و بخش front-end پروژه جا به جا کنند. اگر قصد دارید کار خود را با نود جی اس و البته فریمورک express شروع کنید می توانید از طریق پکیج منیجر NPM این کار را انجام دهید : نصب express : npm insatall express نمونه کد : const express = require('express'); const app = express(); app.get('/', function (req, res) { res.send('Hello World') }); app.listen(3000); 2- MetoerJS : یک فریمورک چند سکویی (cross-platform) و از نوع دوم فریمورک هایی که قبل تر ذکر شد می باشد. و دلیل قرار گیری این فریمورک در لیست 5 فریمورک برتر آپدیت لحظه به لحظه آن است و این امکان را می دهد که برنامه های که در قالب وب توسعه داده اید را بتوانید بر روی پلتفرم های موبایلی اجرا کنید.اما اگر قصد استفاده از این فریمورک را دارید باید بدانید که از دیتابیس mongoDB پشتیبانی نمی کند. 3- KoaJS : این فریمورک به عنوان چارچوب نسل بعدی ساخته شده توسط تیم express می باشد. این فریمورک تا حد زیادی بر روی چارچوب های استاندارد ES6 متمرکز است مانند async/await به این دلیل که این فریمورک در جهت مدیریت هرچه بهتر errorها از طریق کنترل callback ها به واسطه معماری ویژه و خاص ES6 گام برداشته است. 4- SailsJS : فریمورکی که بر روی توسعه برنامه های تحت وب تمرکز دارد به طوری که به طور گسترده ای از پایگاه های داده مختلفی پشتیبانی می کند همچنین می تواند به صورت ساخت یافته ای یک API ایجاد کند و با هر معماری فرانت-اند ترکیب شود.این فریمورک زمانی که نیاز دارید یک پروژه را در بازه زمانی دقیق توسعه و ارائه دهید پیشنهاد می شود. 5- LoopBackJS : اگر نیاز دارید که یک پروژه را بر اساس REST API ها گسترش دهید می توانید از این فریمورک استفاده کنید.این فریمورک توسط IBM توسعه داده می شود و مورد استفاده در بیش از 500 شرکت معتبر می باشد از جمله بانک آمریکا (Bank of America). مواردی که ذکر شد نمونه ای از فریمورک هایی بود که در حوزه پلتفرم NodeJS می توان از آنها استفاده کرد هرچند که فریمورک هایی نظیر HapiJS,AdoniJS,NestJS نیز هستنند که می توانید اطلاعات کافی را درباره آن ها از منابع مختلف بدست آورید. سخن پایانی :استفاده از NodeJS و البته فریمورک های آن در بک-اند بی شک باعث افزایش کارایی و البته صرفه جویی در زمان خواهد شد اما شما کدام یک را انتخاب می کنید؟ این کاملا به نیاز شما بستگی دارد. اگر از من بپرسید در صورتی که بخواهم توسعه یک پروژه را در سریع ترین زمان و تمیز ترین شکل ممکن انجام دهم از SailsJS استفاده می کنم ولی اگر بخواهم رو حالت های مختلفی که قرار است شخصا آنها را سفارشی سازی کنم قطعا ExpressJS را انتخاب خواهم کرد.

ری اکت چیست و چرا ما باید از آن استفاده کنیم

reactapp.ir — Sun, 30 Jun 2019 12:22:15 +0430

در این مقاله ما یاد می گیریم که ReactJs چیه و چرا ما باید از اون به جای فریمورک های دیگه جاوا اسکریپت مثل angular استفاده کنیم. ری اکت جی اس چیست ؟ ری اکت (reactjs) اساسا یک کتابخونه open-source جاوا اسکریپتی برای ساخت رابط کاربری(user interfaces) برای single page applications(اپلیکیشن های تک صفحه ای) است.این کتابخونه برای مدیریت لایه View برای وب استفاده می شود.همچنین React این امکان رو در اختیار ما میذاره که reusable UI components(کامپوننت های قابل استفاده مجدد رابط کاریری) ایجاد کنیم.React در ابتدا توسط Jordan Walke یکی از مهندسین ارشد فیسبوک ایجاد شد.React ابتدا در سال 2011 در فیسبوک مورد استفاده قرار گرفت و سپس در سال 2012 در اینستاگرام استفاده شد. ری اکت این امکان را در اختیار توسعه دهندگان می گذارد که وب اپلیکیشن های خیلی بزرگ که می تواند date را تغییر بدهد،بدون reload صفحه ایجاد کنند.مهم ترین اهداف React را میتوان سادگی،سرعت و مقیاس پذیر بودن دانست.تمرکز اصلی React بر روی رابط کاربری است و فقط در لایه View در معماری MVC مطابقت دارد.این کتابخانه می تواند با کتابخانه های و فریمورک های دیگر جاوا اسکریپت مثل Angular ترکیب و مورد استفاده قرار گیرد. ویژگی های React Js چیستبیایید نگاهی به ویژگی های مهم React بیاندازیم: JSX در React به جای استفاده از جاوا اسکریپت معمولی،از JSX برای templating استفاده می شود.jsx یک فرمت جاوا اسکریپتی برای ایجاد DOM های HTML در قالب یک کامپوننت است React Native یک فریمورک جاوا اسکریپتی برای توسعه اپلیکیشن های موبایل به صورت Native برای دو سیستم عامل Android و ios است که در سال 2015 معرفی شد.این فریمورک بر پایه زبان جاوا اسکریپت و کتابخانه React است.یعنی شما با تسلط بر React می توانید در یادگیریReact Native خیلی جلوتر از بقیه باشید.البته توجه داشته باشید که بین این کتابخونه و فریمورک تفاوت های اساسی وجود دارد که برای درک این تفاوت های پیشنهاد می کنم مقاله تفاوت های اصلی بین React و React Native را بخوانید. Single-Way data flow در React مجموعه ای از value های تغییر ناپذیر بین کامپوننت ها به عنوان properties به تگ های HTML پاس داده می شوند.کامپوننت ها به صورت مستقیم نمی توانند هر properties را تغییر دهند اما می توانند آن ها را به call back function پاس دهند و به کمک آن ها تغییرات را انجام دهند.این فراآیند به طور کامل با “properties flow down; actions flow up” شناخته می شود. Virtual Document Object Model ری اکت React یک ساختار کش in-memory ایجاد می کند. در این ساختار اگر تغییری رخ داده باشد DOM را بروزرسانی می کند.این ویژگی برنامه نویس را قادر می سازد درحالی که در یک wtpi تغییرات ایجاد میشود تنها کامپوننتی rerender شود که تغییر پیدا کرده است.Virtual DOM ی مانند DOM یک درخت از گره هایی هست که شامل element ها و attributes هایشان و محتوا به عنوان objects است.متدrender() یک درخت از کلمپوننت های React ایجاد می کند و تغییر در هر کامپوننت باعث می شود این گره بروز رسانی شود. چرا React Jsاکنون،سوال اصلی که پیش روی ما قرار دارد این است که چرا باید یک نفر از ReactJs استفاده کند.تعداد خیلی زیادی کتابخونه و فریمورک open-source برای ساختن front-end وب اپلیکیشن ها وجود دارد که توسعه را ساده تر می کند.بیایید نگاهی به مزیت هایی که React نسبت به سایر فریمورک ها و تکنولوژی ها دارد.در دنیای front-end که هر روز تغییرات گسترده ای دارد،بسیار سخت است که زمانی را به یاغدگرفتن فریمورک های جدید اختصاص بدهیم به خصوص که عمر خیلی از این فریمورک ها بسیار کوتاه است و نمیتوان روی زمان ریسک کرد.بنابراین اگر شما به دنبال یک تکنولوژی هستید که جزءبهترین های حوزه خودش باشد و ارزش ریسک را داشته باشد،پیشنهاد من صددرصد React است.سادگیدرک کردن React بسیار ساده است.رویکرد میتنی بر کامپوننت،lifecycle هایی که به بهترین نحو تعریف شده و استفاده از جاوا اسکریپت React را برای یادگیری و ساخت وب اپلیکیشن های حرفه ای آسان می کند.React از یک syntax ویژه با نام JSX استفاده می کند که اجازه می دهد HTML و جاوا اسکریپت را ترکیب کنید.ضروری نیست که حتما از JSX برای templating استفاده کنید و برنامه نویس هنوز هم میتواند از جاوا اسکریپت برای اینکار استفاده کند ولی اگر با JSX این کار را انجام دهید،هرگز به دلیل سادگی از جاوا اسکریپت برای templating استفاده نخواهید کرد.یادیگیری راحتهر شخصی با پیش زمینه ای از برنامه نویسی به راحتی می تواند React را یاد بگیرد در حالی که Angular و Ember از یک ‘Domain specific Language’ استفاده می کنند که یادگیری آن سخت است.برای React شما باید یک دانش مختصر در مورد HTML , CSS و جاوا اسکریپت(حرفه ای تر) داشته باشید.رویکرد Nativeهمانطور که در چند پاراگرف قبلی اشاره کردم React Native بر پایه جاوا اسکریپت و Reat است.پس تمام ویژگی هایی که برای React بیان کردیم در React Native هم صدق می کند.به علاوه کد های بین دو پلتفرم Android و IOS مشترک است و کامپوننت هایی که می نویسید میتونید در چندین پروژه استفادش کنید.عملکرد هیچ container از پیش ساخته شده برای dependency ندارد.شما می توانید از ماژول های Browserify, Require JS, EcmaScript 6 با استفاده از Babel استفاده کنید که به طور خودکار به dependencies اضافه می شود. تست پذیریبرنامه های ReactJS فوق العاده آسان برای تست هستند.بنابراین ما می توانیم توابع و کامپوننت های خودمون رو با پاس دادن پارامترها و state ها و خروجی ها رو چک کنیم. امیدواریم که از خوندن این مقاله لذت برده باشید و براتون مفید واقع شده باشه.اگر تجربه ای از کار با React دارید در کامنت ها به اشتراک بزاریدش.همچنین اگر قصد دارید به صورت حرفه ای React رو یاد بگیرید،پیشنهاد میکنم دوره آموزش جامع ReactJs رو مشاهده کنید.

مقایسه NodeJS و PHP ، نبرد برتری و بقا !

reactapp.ir — Wed, 26 Jun 2019 09:35:02 +0430

قبل از اینکه به مقایسه php و nodejs بپردازیم در مرحله اول باید بفهمیم که چرا یک همچین مقوله ای در بین جوامع برنامه نویس به وجود آمده است مخصوصا در بین برنامه نویس های backend . همه این بحث ها بر سر استفاده از php و یا Nodejs از افزایش تقاضای کاربران برای استفاده از برنامه های گوشی های هوشمند آغاز شد.به طوری که apple store شرکت اپل دربرگیرنده 2 میلیون برنامه و play store شرکت Google دربرگیرنده بیش از 2.2 میلیون برنامه می باشند.موفقیت بسیاری از این برنامه ها، بازی ها و مسنجرها باعث شده است که برنامه نویسان backend مجبور شوند خود را با جدیدترین تکنولوژی که بتواند درخواست های همزمان را بهتر مدیریت کند انطباق دهند.میلیون ها نفر از کاربران این برنامه ها اقدام به مبادله نوعی از این داده ها می کنند به همین دلیل پردازش این حجم وسیع از داده نیازمند یک زیرساخت قوی و مقیاس پذیر و سریع هست .با یادگیری زبان ماشین و داده های بزرگ(Big-data) که به سرع در حال پیشرفت و توسعه هستند می توانیم خود به سرعت در این مسیر قرار دهیم و شطح خود را به سطوح بالاتر و جدیدتر ارتقاء دهیم.پیش درآمدی بر مباحث فنی :فرانت-اند(front-end) : تمامی نرم افزار های موبایلی و یا تحت وبی که از نزدیک در تعامل با آن ها قرار می گیرد و از ویژگی هایی که در اختیار شما قرار می دهند استفاده می کنید. مانند نرم افزار های موبایلی که بر روی گوشی های هوشمند خود نصب دارید.بک-اند(back-end) : بخش نرم افزاری یک برنامه که شاید شما هیچ نشانه ای از آن را به ظاهر نمی بینید ولی با اجرای آن یک سری فرآیند اجرا شده و اطلاعات مورد نیاز فرانت-اند را ارسال می کند و فرآیندهایی که شما در بخش فرانت-اند انجام می دهید مانند ذخیر یک عکس را مدیریت کرده و این کار را برای شما انجام می دهند. و می توان گفت بخشی است که ارتباط فرانت-اند با سرور را برقرار می کند و سرور نیز یک ماشین با پردازش های مختلف است که درنهایت یک ارتباط پایدار را با اینترنت و پایگاه داده برقرار می کند.معروف ترین تکنولوژی های بک-اند(سمت سرور) :فرانت-اند یک وب سایت و یا یک اپلیکیشن در صورتی کارایی خود را خواهد داشت که با یک تکنولوژی سمت سرور ترکیب شود و بک-اند ترکیبی از سرور و اپلیکیشن و پایگاه داده است و یک برنامه نویس بک-اند استفاده و نگهداری می کند از تکنولوژی همه این موارد را با هم داشته باشد.زبان های سمت سرور مانند : PHP , RUBY , PHYTON , JAVA , .NET , NODEJSپایگاه داده : MYSQL(RDBMS) , NOSQL(DYNAMIC DATABASE LIKE MONGODB) در این مقاله می خواهیم دو زبان سمت سرور محبوب و کاربردی را با یکدیگر مقایسه کنیم هرچند که “مقایسه” واژه مناسبی در حوزه برنامه نویسی نیست چرا که هر زبان برنامه نویسی کاربردها معایب و مزیت های خاص خود را دارد و در حال حاضر هدف از این کار آشنایی هرچه بیشتر شما با ساختار هر یک از این زبان ها و همچنین کمک به شما در انتخاب بهترین و موثرترین زبان برای پروژه ای که شما شاید در آینده قصد انجام آن را دشته باشید می باشد.در زبان های برنامه نویسی سمت سرور زبان php زودتر از NODEJS منتشر شده و مورد استفاده قرار گرفته است از طرفی پی اچ پی برای مدیریت تمامی وظایفی که در سمت سرور باید انجام شود از پورت 80 استفاده می نماید و همچنین از دیتابیس MYSQL جهت انجام فرآیندهای مربوطه استفاده می شود.جاوااسکریپت تنها چیزی است که شما به طور مستقیم در ارتباط با آن هستید و توسط مرورگر به طور مثال مدیریت می شود.بسیاری از سیستم های مدیریت محتوا از PHP برای اجرای فرآیندها در سطح سرور استفاده می کنند ولی با ظهور نود جی اس(NODEJS) در سال 2009 میلادی توسط رایان دال(ryan dahl) می توان گفت نبرد بین بقا و برتری میان این دو ساختار آغاز شد.در حال حاضر هر دوی این ها نقش خود را برای اینکه برنامه نویس را متقاعد به استفاده از خود کنند تلاش می نمایند و این درحالی است که یکی مخزنی از تجربه های بسیار شگفت انگیز و تاریخچه ای چند ده ساله و دیگری چراغ خاموش با سرعت و برتری در حال عبور از آن است .اجازه دهید هر یک از این ساختارهای برنامه نویسی سمت سرور را با توجه به پارامترهای زیر با یگدیگر مقایسه نماییم :عملکرد بهینه سمت سرور :انتخاب php یا nodejs تماما بستگی به ساختار پروژه حال چه سایت و چه اپلیکیشن دارد اما اگر قرار است دیتای بزرگی را در سطح سرور جابه جا کنیم و یا نیاز به ارتباط های همزمان سریع داریم نود جی اس بهترین گزینه می باشد و همه این موارد به دلیل ساختار رویدارمحور(event-driven) و مسدود ناپذیر(non-blocking) نود جی اس انجام می شود.با توجه به گزارش ها در ساختار سمت سرور برنامه موبایلی سرکت linkdin این شرکت توانسته بود تعدادسرورهای خود را از 30 به 3 کاهش دهد و این درحالی است که هم اکنون ظرفیت کافی برای برای مدیریت زیرساخت و منابعی که در اختیار دارد را دارا می باشد و همه این ها به دلیل تغییر زیرساخت از ROR به nodejs است. و پی پال نیز مشابه linkedin همچین رویه ای را طی کرد و از java به nodejs تغییر وضعیت داد. نود جی اس تقریبا دو برابر سریع تر به واسطه افراد کمتری و البته از 33% کاهش کد و 40% فایل های ایجادی کمتر توسعه داده شده است.عملکرد :استاندارد php zend runtime از ساختار interpreted compilation strategy جهت اجرای کد کمتر و بهینه شده استفاده می کند و این درحالی است که نود جی اس از تلفیقی از JIT و موتور جاوااسکریپv8 گوگل کروم استفاده می کند و این استراتژی برای زبان های پویا خود را اثبات کرده است اما اغلب زمان شروع را افزایش می دهد. Multitasking : همانطور که گفتیم نود جی اس کارآمدی فوق العاده ای در مدیریت چندین درخواست همزمان را دارد و این امکان پذیر است زیرا نود جی اس از ساختارهای رویداد محور که مسدود نمی شوند و بر روی یک ترد اجرا می شوند بهره برده است اما در عوض php از ساختاری استفاده می کند که مسدود پذیر است (Blocking) و با توجه به این محدودیت پاسخ به درخواست ها بستگی به پردازش های Thread دارد. در این شرایط اگر یک عملیات سنگین همراه با چندیدن درخواست همزمان توسط کاربر درخواست شود سرور از منابع موجود برای پردازش درخواست ها (request) استفاده کرده و انجام این پردازش ها با تاخیرهایی در ارسال response مناسب برای اپلیکیشن و یا سایت کاربر همراه است.وب سرور هایی همچون Apache و Nginx راهکارهایی برای اینکه php عملکرد بهتری را در مواجهه با multi-taskingها داشته باشد در نظر گرفته اند. ولی همه اینها محدودیت هایی بیشتر از آنکه خود زبان از multi-tasking پشتیبانی کند دارند. دسترسی به کامند لاین (command-line) :پی اچ پی (php) : $php –iنود جی اس (nodejs) : $nodeفرآینده های سنکرون و آسنکرون (synchronous or asynchronous) :سنکرون () : کدها خط به خط اجرا می شوند به طوری که بعد از اینکه فرآیند یک خط انجام شد فرآیند اجرای خط بعد آغاز می شود.آسنکرون () : همه خطوط برنامه در یک زمان اجرا می شوند.فرآیندها در پی اچ پی با توجه به ساختار سنکرون اجرا می شوند البته API هایی هستند که امکان اجرای فرآیندها را به شکل آسنکرون در میان فرآیندهای سنکرون می دهند. تصور کنید که یک تابع در برنامه خود دارید که باید اجرا شود و خط بعد از این تابع زمان اجرا خواهد شد که اجرای تابع تمام شود و نتیجه مطلوب بدست آید. این امر باعث کاهش سرعت و کارایی و انتظار کاربر برای دریافت response مناسب می شود.در عوض فرآیندها در نود جی اس با توجه به ساختار آسنکرون اجرا می شوند.به این معنی که موتور جاوااسکریپت تمامی کدها را در یک زمان و بدون انتظار برای بازگشت respose از سایر توابع و فرآیندها اجرا می نماید.همین مسئله باعث عملکرد بهتر و سرعت بیشتر در فرآیندهای همزمان شده است.توجه : برنامه ممکن است در بخشی از اجرای فرآیند گیر کند اگر تعدادی از توابع نیاز داشته باشند به اینکه داده ای از یک تابع دیگر به آنها پاس داده شود. این مشکل هم در نود جی اس با وجود ویژگی Async/await که کمک می کند بلاکی که نیاز است به صورت saynchronous اجرا شود.جا به جایی بین محیط ها و زبان های مختلف باعث کاهش راندمان هنگام کد نویسی و در نهایت کاهش کارایی برنامه نویس می شود.در پی اچ پی کاربر دائما بین زبان ها با ساختار های متفاوت جا به جا شده و اقدام به نوشتن برنامه مد نظر خود می کند. به طوری که ما عمدتا از بخش های متفاوتی مانند mysql برای دیتابیس و php برای سمت سرور استفاده می نماییم و از طرفی دانستن مواردی همچون html,css و js مزیت محسوب می شود.این درحالی است که پلتفرم نود جی اس ساختاری مبتنی بر جاوااسکریپت دارد. پس زمانی که شما جاوااسکریپت و استانداردهای (ٍES6…) آن را بدانید در نهایت هم فرانت-اند را خواهید داشت و هم با کمی تلاش برای آشنایی با متودهای نود جی اس می توانید به بک-اند هم مسلط شده و دیگر نیازی نیست که برای اجرای پروژه های خود بین زبان ها و ساختارهای مختلف برنامه نویسی جا به جا شوید زیرا دیگر شما با دانش جاوااسکریپتی خود می توانید و فرانت-اند و هم بک-اند را کار کنید.ماژول ها :در پی اچ پی برای اینکه از ماژول های مختلف در پروژتان استفاده کنید می توانید از سرویس هایی همچون PEAR و COMPOSER استفاده و ماژول مدنظرتان را نصب و مدیریت نمایید.نود جی اس نیز در اقدامی مشابه از یک پکیج منیجر با عنوان NPM پشتیبانی می کند که می توانید از طرق آن به ماژول ها دسترسی داشته باشید.فریمورک ها :پی اچ پی یکی از زبان های سمت سرور محبوب و پر کاربرد می باشد. که به همین دلیل فریمورک های مختلف با ویژگی های شگفت انگیزی برای آن وجود دارد مانند Laravel , Cakephp ,codeigniter و … باعث افزایش سرعت کارایی و امنیت بیشتر در پروژه ها می شوند.نود جی اس هم مشابه پی اچ پی دربردارنده فریمورک هایی همچون Express , meteor , koa ,hapi , sails و …. می باشددیتابیس :پی اچ پی از نوعی دیتابیس رابطه ای مانند Mysql , MariaDB , PostgreSQL و … استفاده می کند و این درحالی است که می توان با کمک از ابزارهایی خاص از دیتابیس NoSql استفاده کرد هرچند که عمومیت ندارد.نکته ای که باید به آن اشاره شود این است که اکثرا این نوع دیتابیس ها مورد هجوم حملات sql injection و XSS قرار می گیرند.نود جی اس به صورت اختصاصی و مدیریت شده با دیتابیس های NoSql کار می کند مانند MongoDB , couchDB و … که هرکدام از طریق NPM در دسترس هستند و می توان به راحتی آنها را نصب و مورد استفاده قرار داد.برای این نوع دیتابیس هم حملات nosql injection وجود دارد ولی نه به اندازه دیتابیس های رابطه ای plghj sql injection البته امری طبیعی است در ساختار این نوع از دیتابیس ها از کدهایی استفاده شده است که در برابر اینگونه حملات مقاوم باشند.میتونید برای مطالعه نوشته های بیشتر در حوزه جاوااسکریپت به بلاگ سایتمون مراجعه کنید.همچنین اگر قصد دارید یک برنامه نویس حرفه ای Node Js بشید میتونید دوره آموزش جامع Node Js رو مشاهده کنید.

تفاوت های اصلی بین ReactJS و React Native

reactapp.ir — Sat, 25 May 2019 11:44:33 +0430

ری اکت نیتیو در سال 2015 توسط فیسبوک معرفی شد.توسعه دهندگان می توانند با استفاده از نوشتن کدهای جاوا اسکریپت برای دو پلتفرم Android و Ios با استفاده از این فریمورک اپلیکیشن native بسازند.تعدادی contributors نیز این فریمورک رو برای نوشتن اپلیکیشن های desktop برای Mac و Windows سفارشی سازی کردند که بسیار جالب است.در نگاه اول شاید React Native بسیار شبیه به ReactJS به نظر برسد اما تفاوت هایی وجود داره که شما بای قبل از شروع به نوشتن اولین app اون ها رو بدونید.در این مقاله من قصد دارم تفاوت هایی که بین ReactJS و React Native به عنوان یک توسعه دهنده react با آن روبرو شده ام رو به اشتراک بگذارم.توجه کنید که شما برای شروع کار با React Native باید با مفاهیم پایه و اساسی React آشنا باشید تا بتونید با این فریمورک کار کنید.اما اگر به عنوان یک react developer قصد دارید با کمک دانشی که دارید اپلیکیشن بسازید، باید تفاوت ها رو کامل درک کنید و به این خیال نباشید که این دو تا شبیه هم هست و کاری نداره اپلیکیشن نوشتن با React Native. Setup and bundlingری اکت نیتیو یک فریمورک است در حالی که React یک کتابخانه جاوا اسکریپت برای وب است.زمانی که شما یک پروژه جدید با React JS شروع می کنید، شما یک bundler مثل Webpack را انتخاب می کنید و سعی می کنید ماژول هایی که نیاز به bundling دارند را پیدا کنید. اما زمانی که شما یک پروژه جدید با React-Native شروع می کنید تقریبا همه چیز آماده است و با استفاده از چند دستور در terminal محیط توسعه شما آماده است.نکته : با استفاده از دستور create-react-app برای ReactJS نیز همه چیزآماده است و شما نیاز ندارید تا Webpack رو خودتون پیکربندی کنید.برای درک تفاوت های نصب پیشنهاد میکنم مقاله نصب ReactJs رو بخونید.برای اجرا کردن اپلیکیشن،شما نیاز به Xcode (برای IOS) دارید که برای این منظور باید حتما Mac داشته باشید و برای Andriod نیز می تونید خیلی راحت با استفاده از emulator یا دیوایس واقعی انجام بدید.کلیه مراحل اجرا و تست اپلیکیشن در Android و IOS در دوره آموزش مقدماتی react native آموزش داده شده است.DOM and Stylingری اکت نیتیو از HTML برای برای render اپلیکیشن استفاده نمی کند، اما از کامپوننت های جایگزین که شبیه همین روش کار می کند، استفاده می کند.کامپوننت های React Native یک نگاشت از UI components دو سیستم عامل iOS و Android برای render کردن اپلیکیشن استفاده می کنند.اکثر کامپوننت های ارائه شده را میتوان به چیزی شبیه HTML ترجمه کرد،برای مثال کامپوننت View شبیه تگ div و کامپوننت Text شبیه تگ p در HTML است.import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class App extends Component { render() { return ( Hello world! ); } } به این دلیل که کدهایتان در یک صفحه HTML رندر نمی شود شما نمی توانید از هر کتابخانه ای برای ReactJS که هر نوع HTML , SVG یا Canvas را render می کند در React Native استفاده کنید.اگر چه ممکن است کتابخانه های مشابه و جایگزین برای React Native پیدا کنید.برای استایل دهی به کامپوننت های React Native شما باید یک stylesheets در جاوا اسکریپت ایجاد کنید.آن بسیار شبیه به CSS است اما واقعا CSS نیست.این می تواند در ابتدا کاملا گیج کننده باشد و شما ممکن است به جایی برسید که تعجب کنید و درک نکنید که چجوری می تونید از استایل ها در کامپوننت های دیگر استفاده کنید یا مخلوط هایی مثل SASS ایجاد کنید.پس شما تا الان باید متوجه شده باشید که React Native برای element های وب ساخته نشده است و شما نمی توانید به یک روش به آنها استایل بدهید.خوشبختانه راه های جایگزین برای آن چیزی که نیاز دارید وجود دارد.const styles = StyleSheet.create({ container: { flex: 1, } content: { backgroundColor: '#fff', padding: 30, }, button: { alignSelf: 'center', marginTop: 20, width: 100, }, }); من در مورد شما چیز زیادی نمی دانم ولی به احتمال زیاد با Flexbox سروکله زده اید یا در پروژه هایتان از آن استفاده کرده اید.من در پروژه هایم به صورت کامل از آن بخاطر سازگار نبودن با مرورگر های قدیمی استفاده نکرده ام.در React Naive راه بهتری برای ساختن اپلیکیشن های responsive با استفاده از Flexbox وجود ندارد.در ابتدا ممکن است که سخت و مشکل به نظر برسد اما پس از درک Flexbox خیلی راحت می توانید اپلیکیشن های responsive برای همه اسکرین ها بسازید بدون اینکه مشکل خاصی داشته باشند. Animations and Gesturesبا React Natibe از انیمیشن های CSS خداحافظی کنید.شما باید کاملا یک روش جدید با استفاده از جاوا اسکریپت برای پیاده سازی انیمیشن در کامپوننت ها یاد بگیرید.راه توصیه شده استفاده از Animated API برای پیاده سازی انیمیشن است که توسط React Native فراهم شده است.شما می توانید آن را با کتابخانه مشهور Velocity.js مقایسه کنید.این API به شما اجازه می دهد انواع انیمیشن ها بر اساس زمان،یا کلیک بر روی یک element و همچنین با type های مختلف Easing پیاده سازی کنید.در کل تقریبا شما می توانید تمامی انیمیشن هایی که در وب انجام دهید را پیاده سازی کنید.React Native همچنین LayoutAnimation را که خیلی جالب و ساده برای پیاده سازی transitions است را فراهم کرده است.برای ارتباط برقرار کردن با حرکات کاربر،React Native چیزی شبیه رویدادهای لمسی web API با نام PanResponder فراهم کرده است.استفاده از آن می تواند در شما احساس غرور ایجاد کند اما در نهایت خواهید دید که چیز پیچیده ای نیست.PanResponder نیاز دارد که به یک View (یا Text یا Image) از کامپوننت هایتان applied شود تا touch handler بر روی این View فعال شود.از اینجا به بعد PanResponder یک سری توابع برای گرفتن رویدادهای مختلف لمسی مثل onPanResponderGrant (touchstart), onPanResponderMove (touchmove) oronPanResponderRelease (touchend) فراهم می کند.این توابع به شما امکان دسترسی native event و اطلاعات حرکت مثل لمس ها و مکان های آنها، فاصله بین لمس ها و سرعت لمس را می دهد. به عقیده من ، سختی کار با PanResponder زمانی است که شما چندین کامپوننت دارید که درون یکدیگر قرار گرفته اند و باید تصمیم بگیرید که کدام یک باید لمس را کنترل کند.برای کار با انیمیشن ها میتونید دوره آموزش کار با انمیشن ها در react native رو مشاهده کنید. Navigationزمانی که من شروع کردم به ساختن اولین اپلیکیشن react native، برای جابجایی بین دو تا screen گیج شده بودم.اولین کاری که انجام دادم به دنبال یک جایگزین برای کتابخانه react-router (مشهور ترین کتابخانه برای جابجایی بین صفحات وب ) در react navigation بودم.چندین کتابخانه برای اینکار پیدا کردم اما هر کدام دارای محدودیت هایی بودن و بعضی ها هم کمی گیج کننده بودند یا در بین مقالاتی که می خواند به مشکلات performance کتابخانه ها اشاره کرده بودند.من دنبال کتابخانه ای بودم که بتوانم آن را به راحتی سفارشی سازی و استفاده کنم و اختیارات وسیعی در اختیارم قرار بدهد.در انتها به کتابخانه react navigation رسیدم.که تمام این ویژگی های مورد نیاز من را داشت به علاوه اینکه مشکلات performance را نداشت.برای کار با این کتابخانه می توانید دوره آموزش react navigation3 را ببینید. در توسعه اپلیکیشن های موبایل باید توجه زیادی به استفاده از screen ها برای جابجایی داشته باشید.برای مثال شما چندین tab دارید و هر یک از این tab ها شامل چندین screen است.بنابراین پیکربندی screen ها را باید طوری انجام دهید که به راحتی بتوانید بین آن ها جابجا شوید.Platform specific codeطراحی اپلیکیشن برای چندین پلتفرم با کد یکسان میتواند دارای نقاط ضعف و قوتی باشد در حالی که نمی توان گفت 100 درصد کدها مشترک است و این می تواندمنجر به زشت شدن کدهایتان شود.من مطمئنم که شما درگیر مسائلی مشابه در وب برای اجرای بر روی مرورگرهای قدیمی بوده اید اما با چندین شرط در کدهای css و حتی جاوا اسکریپت این مشکل را حل کرده اید.زمانی که شما اپلیکیشن native می سازید باید کاملا این نکته را رعایت کنید که اپلیکیشن در هر دو سیستم عامل IOS و Android حس native بودن را به کاربر بدهد و این یعنی تفاوت بین ui در هر پلتفرم.خوشبختانه React Native کامپوننت هایی برای هر پلتفرم به صورت جداگانه قرار داده است و ما می توانیم با استفاده از Platform module پلتفرمی که برنامه بر روی آن در حال اجرا است را شناسایی کنیم و از کامپوننت مربوط به آن استفاده کنیم.برای مثال React Native برای ios کامپوننت DatePickerIos و برای android کامپوننت DatePickerAndroid را در اختیارمان قرار داده است.همچنین ما می توانینم با استفاده از Platform module برای هر پلتفرم استایل هایی جداگانه بنویسیم.Developer toolsزمانی که شما یک پروژه جدید native می سازید، چندین ابزار توسعه بدون نصب کردن هیچ پلاگین اضافی در اختیار شما قرار می گیرید که این فوق العاده است.Hot Reloading در اختیار شما است و با هر تغییر کوچکی شما میتوانید نتیجه را در اپلیکیشن بدون reload ببینید و این یعنی صرقه جویی در زمان.همچنین برای تغییرات بزرگتر که در منطق برنامه تاثیر می گذارد میتوانید از Live Reload استفاده کنید که برنامه شما را به طور کامل بارگذاری می کند. یکی دیگر از زیبایی های کار با React Native این است که شما قادر هستید از بیشتر ابزارهایی که در ReactJS وجود دارد استفاده کنید.Chrome Dev Tools برای بررسی درخواست های شبکه کار میکند و شما میتوانید console logs را ببینید.شما همچنین میتوانید از Redux DevTools برای بازرسی و مشاهده state های store استفاده کنید. Publishingاگر شما اپلیکیشن برای Android و Ios توسعه می دهید باید با نحوه خروجی گرفتن برای App Store یا Google Play آشنا باشید.البته با توجه به تحریم هایی که از سمت Apple به ما اعمال شده، راه های جایگزین زیادی پیشنهاد شده که به عقیده من هیچ کدام راه حل مناسب و دائمی نخوهد بود.اما برای Android شما می توانید به راحتی خروجی apk برای انتشار در مارکت ها بگیرید.خروجی گرفتن apk از react nativeگرفتن خروجی iOSپس از انتشار اپلیکیشن در مارکت ها شما می توانید بدون منتظر ماندن برای تایید آپدیت جدید توسط آن ها با استفاده از Code Push به صورت مستقیم برنامه خود را بروزرسانی کنید.Code Push برای برطرف کردن bug ها و یا بهتر کردن بعضی از قسمت ها مناسب است و برای اضافه کردن یک ویژگی جدید اصلا مناسب نیست.من واقعا از React Native لذت می برم.شما می توانید از دانشتون در React برای مهاجرت به React Native استفاده کنید و این دانش میتونه مهاجرت شما را خیلی راحت کنه.البته ممکنه باعث ایجاد یک سری سردرگمی ها هم بشه. ولی نسبت به فردی که اصلا به React آشنایی نداره شما خیلی راحت تر میتونید React Native رو یاد بگیرید.این مقاله توسط Alexis Mangin نوشته شده و من اون رو با اندکی دخل و تصرف ترجمه کردم.اگر تجربه ای در زمینه مهاجرت به React Naive دارید یا تفاوت هایی در مورد React و React Native می دونید که در این مقاله بیان نشده، در کامنت ها به اشتراک بزاریدش.همچنین اگر قصد دارید به صورت حرفه ای react js رو یاد بگیرید،پیشنهاد میکنم دوره آموزش جامع React Js رو مشاهده کنید.