React یک کتابخانه جاوا اسکریپت است که توسط فیس بوک ایجاد شده است. این محبوب ترین کتابخانه برای ساخت اپلیکیشن های تک صفحه ای و رابط های کاربری تعاملی است. به اندازه کافی جالب توجه است که اغلب اوقات React به عنوان یک فریم ورک نامیده می شود. منبع باز بودن به کتابخانه کمک میکند تا در صدر فهرست محبوبیت باقی بماند. بر اساس یک نظرسنجی گسترده که توسط Stack Overflow انجام شده است، React.js فریم ورک انتخابی برای بیش از 40٪ از مردم بوده است و تنها jQuery آن را شکست داده است.
اما کتابخانه چیست؟ بر خلاف فریم ورک ها، کتابخانه ها صرفاً وسیله ای هستند که برای توسعه نرم افزار استفاده می کنید. شما هدایت نمی شوید و همه چیز در یک بشقاب ارائه نمی شود (مانند فریم ورک ها)، بلکه شما هستید که تصمیم می گیرید از کدام ابزار استفاده کنید و سپس یک پروژه موفق ایجاد کنید.
گفتیم که React یک کتابخانه جاوا اسکریپت است، اما جاوا اسکریپت دقیقا چیست؟ به احتمال زیاد بسیاری از شما از قبل پاسخ را می دانید، اما برای کسانی که با اصطلاح و فناوری آشنا نیستند، جاوا اسکریپت به سادگی یک زبان برنامه نویسی است که در توسعه وب استفاده میشود. با استفاده از جاوا اسکریپت، توسعه دهندگان می توانند طیف وسیعی از محتوای پویا، گرافیک، انیمیشن و غیره را برنامه ریزی کنند.
پیشنهاد میکنیم بخوانید: طراحی سایت چگونه انجام میشود؟
React برای چه استفاده می شود؟
React به عنوان یک کتابخانه جاوا اسکریپت در بسیاری از پروژه های مختلف استفاده می شود. چرا؟ خب، پاسخ نسبتاً ساده است - زیرا این ابزار واقعاً همه کاره است. می توان از آن با کتابخانه ها و ابزارهای مختلف مانند Material UI، Redux یا Create React App استفاده کرد. انجام این کار میتواند به کتابخانه اجازه دهد تا بال ها را حتی بیشتر باز کند.
React همچنین میتواند به عنوان یک کتابخانه اضافی در هنگام ساخت پروژه های بزرگتر با فریم ورک های مختلف استفاده شود. علاوه بر این، می تواند با ابزارهایی مانند React Router یا React Navigation نیز کار کند که تنها چند نمونه از مؤلفه های اعلامی و راه حل های ناوبری هستند که با کتابخانه جادویی کار می کنند. با React، توسعه دهندگان میتوانند برنامه های تک صفحه ای پویا ایجاد کنند. با این حال، این برای React کافی نیست تا به روشی که انجام داد موفق شود. باید چیز دیگری را نشان می داد – و این کار را انجام داد، DOM مجازی (Document Object Model) و JSX (JavaScript Syntax Extension).
JSX
درست همانطور که در پاراگراف قبلی ذکر کردیم، JSX یک پسوند نحوی برای زبان جاوا اسکریپت (گاهی اوقات به عنوان جاوا اسکریپت XML نیز شناخته می شود) است که از کد ساده و در عین حال موثر مشابه HTML استفاده می کند. علاوه بر این، افزونه یک ابزار واقعا همه کاره است که به کاربران اجازه می دهد با آن در هر پلتفرمی با یک مرورگر کار کنند. به لطف JSX، کد خواناتر می شود و به اجزای آن اجازه میدهد تا در یک فایل یا کاتالوگ ذخیره شوند که به طور مثبت بر قابلیت استفاده مجدد از اجزا تأثیر می گذارد. یک نکته کوچک برای شما – اگر JSX را آشنا می دانید، ممکن است با XHP روبرو شده باشید، که یکی دیگر از دستورات افزودنی فیس بوک است، اما برای PHP، نه HTML. آنچه شایان ذکر است این است که JSX اختیاری است و برای اجرای React لازم نیست.
DOM مجازی
DOM مجازی نتیجه دستکاری React در DOM واقعی است. چنین عملی اساساً یک کپی از DOM ایجاد می کند، از این رو نام آن - مجازی DOM است. چرا استفاده می شود؟ زیرا کتابخانه را قادر می سازد تا ببیند کدام بخش از DOM باید تغییر کند تا وب سایت به درستی کار کند و سپس آن را اصلاح می کند. علاوه بر این، به روزرسانی DOM مجازی زمان بسیار کمتری نسبت به به روزرسانی Document Object Model معمولی شما می برد، که React را حتی کارآمدتر می کند.
اما در واقع DOM چیست؟ به بیان ساده، DOM یک ساختار API است که یک سند را نشان میدهد. در مورد DOM، سند XML یا HTML. البته، DOM چیزهای بیشتری از آنچه به چشم می خورد، مانند استفاده از ویژگی های HTML وجود دارد، اما توضیح جزئیات مدل شیء سند احتمالاً به مقاله جداگانه ای نیاز دارد.
پیشنهاد میکنیم بخوانید: در انتخاب رنگ وب سایت به چه نکاتی باید توجه کرد؟
react چگونه شروع شد؟
در سال 2011 فیس بوک با حضور خود در سراسر جهان یک نام تجاری تثبیت شده بود. با توجه به این واقعیت، راه حل هایی که استفاده می شد منسوخ شده بودند و دیگر کافی نبودند، به همین دلیل است که جردن واک یک نسخه اولیه از React را ایجاد کرد که در آن زمان به نام FaxJS شناخته می شد. دو سال از ایجاد React می گذرد. در سال 2013، کتابخانه منبع باز شد و به طور رسمی منتشر شد. این یک نقطه عطف در تاریخ React بود، زیرا گسترش سریع آن را نشان داد. تا به امروز، React محبوبیت پیدا کرده است و همانطور که قبلا ذکر کردیم، محبوب ترین فناوری توسعه وب در بازار است.
آیا React فریم ورک است یا کتابخانه؟
بیایید این را یک بار برای همیشه حل کنیم. آیا React یکی از فریم ورک های جاوا اسکریپت است (همانطور که بسیاری از وب سایت ها یا نمودارها نشان می دهند) یا یک کتابخانه است؟ خب، ما قبلاً آن را گفتیم - قطعاً یک کتابخانه است. اما چرا وقتی چیز دیگری است به آن فریم ورک می گویند؟ از این گذشته، مثل این است که یک کورن داگ را هات داگ بنامیم.
مانند بسیاری از فریم ورک ها، React برای کمک به توسعه دهندگان در ساخت وب سایت ها یا برنامه های کاربردی وب طراحی شده است. به همین دلیل است که مردم هنوز React بودن را به جای کتابخانه بودن یک فریم ورک اشتباه می گیرند.
یک تفاوت بزرگ بین کتابخانه و فریم ورک این است که فریم ورک ها قبلاً دارای ابزارهای داخلی هستند که به توسعه دهندگان کمک می کند تا برنامه ها را ایجاد کنند (که از قضا ممکن است فریم ورک را در انتخاب ابزارهای شخص ثالث اضافی محدود کند)، اما در مورد React اینطور نیست. هنگام استفاده از React، باید ابزارها را خودتان انتخاب و انتخاب کنید.
به نظر می رسد که انتخاب React به جای فریم ورک هایی که از قبل شامل ابزارهای مختلفی هستند ایده بدی باشد. توسعه دهندگانی که React را انتخاب می کنند و به تمرین ادامه می دهند، در نهایت به متخصصانی ماهر تبدیل می شوند که دانش عمیقی از سایر بسته ها و ابزارهای شخص ثالث دارند. علاوه بر این، React به شما آزادی می دهد که هیچ فریم ورکی نمی تواند ارائه دهد. شما در انتخاب ابزارها و بسته هایی که می خواهید برنامه خود را با آنها بسازید، آزاد هستید.
برای درک بهتر موضوع، بیایید به روش دیگری در مورد آن فکر کنیم. شکل های مدل ساختمانی را تصور کنید. مجموعه ای زیبا از فیگورهای مدل با عناصر مختلف مهم و منحصر به فرد. هر جزء که ذکر کردیم، بخشی از یک مجموعه کامل است و آن مجموعه یک فریم ورک را نشان می دهد.
از سوی دیگر، بیایید یک پازل (نماینده یک کتابخانه) را مجسم کنیم، جایی که باید هر پازل را جداگانه انتخاب و انتخاب کنید تا یک تصویر کامل ایجاد کنید. ببینید منظورم چیست؟ اگرچه React شبیه به یک فریم ورک است، اما از نظر محبوبیت تقریباً از هر یک از آنها پیشی می گیرد. پس از تمام این عوامل، به جرات میتوان گفت که React یک کتابخانه جاوا اسکریپت با ویژگی های یک فریم ورک، ایده آل برای توسعه برنامه های وب است.
اجزا React
به زبان ساده، زمانی که برنامه ای را با استفاده از React می سازید، از تکه های کوچک یک پازل، یعنی اجزا تشکیل شده است. به لطف آنها، توسعه دهندگان می توانند رابط های کاربری را به بیت های مختلف تقسیم کنند. با این حال، کامپوننت React چیست؟ خب، این اساساً یک تابع جاوا اسکریپت است که به کتابخانه اجازه می دهد ورودی ها را دریافت کند (که به آن props نیز میگویند). سپس عناصری را برمی گرداند که نشان می دهد چه چیزی باید روی صفحه دیده شود. آنچه شایان ذکر است این است که نمونه ای به نام حالت نیز وجود دارد که به توسعه دهنده توانایی مدیریت وضعیت داخلی را می دهد.
Functional and Class Components
در اجزای تابعی، ورودی دریافت می شود که سپس کد JSX را برمی گرداند. به عبارت دیگر اطلاعات را نمایش می دهد. اگر می خواهید از روش ها یا حالت های چرخه حیات استفاده کنید، می توانید این کار را با کمک به اصطلاح قلاب ها انجام دهید. در اصل به این معنی است که در اجزای کلاس از متدهای کلاس React.Component استفاده می کنید و با استفاده از متد setState، وضعیت را مدیریت می کنید. در کامپوننت های کاربردی، می توانید از قلاب های useEffect و useState استفاده کنید. هر دو جزء از قلاب های متفاوتی استفاده می کنند اما نتیجه یکسانی دارند.
از سوی دیگر، مؤلفه های کلاس، از توابع اصلی React استخراج می شوند که مؤلفه های تابعی به طور بومی از آنها استفاده نمی کنند، مانند روش های حالت یا چرخه حیات. تفاوت دیگر را میتوان در نحو مشاهده کرد.
پیشنهاد میکنیم بخوانید: طراحی سایت مینیمالیستی و ساده چگونه است؟
اجزای خالص
کامپوننت های خالص به شکلی مشابه کامپوننت های کلاس نوشته می شوند، اما متفاوت هستند. وظیفه اصلی آنها بهینه سازی تعداد رندرها برای ارائه بهترین نتیجه است. علاوه بر این، این ساده ترین مؤلفه React در بین همه آنها است.
مولفه های مرتبه بالاتر
React ماهیت ترکیبی دارد و از آن ماهیت الگویی به وجود می آید. الگویی که مولفه های مرتبه بالاتر نامیده می شود. کاری که آنها انجام می دهند پیچیدن یک جزء است. می دانیم که ممکن است پیچیده به نظر برسد، اما اساساً آنها یک جزء را می گیرند و یک جزء کاملاً جدید را برمی گردانند، در بیشتر موارد با منطق اضافی.
React Native
هنگام صحبت در مورد React باید به React Native اشاره کنیم. همانطور که از نام آن پیداست، React Native برای توسعه اپلیکیشن های موبایل استفاده می شود. React Native برخلاف کتابخانه معمولی React بر اساس رشته جاوا اسکریپت کار می کند. سپس جاوا اسکریپت کد را میخواند و اطلاعات را با اجزای آن رد و بدل می کند و در نتیجه اجزای React را در عناصر بومی رابط کاربری کامپایل می کند. با React Native یک مهندس نرم افزار حتی می تواند برنامه های تلفن همراه را در جاوا یا سوئیفت (به ترتیب برای اندروید و iOS) برنامه ریزی کند.
چرا باید React را انتخاب کنید؟
ممکن است برخی از شما تعجب کنید که چرا باید React را انتخاب کنید، در حالی که بسیاری از فریم ورک های جاوا اسکریپت مانند Ember یا Angular وجود دارد؟ بیایید نگاهی به این چند نکته بیندازیم.
آسان و ساده برای یادگیری
حتی توسعه دهندگان بی تجربه نیز می توانند React را یاد بگیرند، زیرا درک آن بسیار آسان است. البته، توسعه دهندگانی که تجربه قبلی در سایر فریم ورک ها و زبان های برنامه نویسی دارند، در یادگیری کتابخانه مشکل بسیار کمتری خواهند داشت، اما آشنایی با اصول اولیه HTML، CSS و جاوا اسکریپت می تواند راه طولانی را برای یک توسعه دهنده مشتاق برای شروع سفر React انجام دهد.. علاوه بر این، دانستن نحوه عملکرد React و نحوه ادغام آن با ابزارهای شخص ثالث یک مزیت بزرگ خواهد بود.
انتخاب شماره 1 در میان توسعه دهندگان
بیش از 80000 توسعه دهنده نرم افزار به React اعتماد کرده اند، اجازه دهید با آن روبرو شویم، این تعداد همچنان در حال افزایش است، زیرا React هر چند وقت یکبار در صدر جدول محبوبیت قرار می گیرد.
حمایت از جامعه بزرگ
تعداد رو به رشد توسعه دهندگان برابر با افزایش تعداد حامیان است. با توجه به اینکه React یک کتابخانه منبع باز است، این احتمال وجود دارد که حتی اگر در وسط یک پروژه گم شوید یا در حین یادگیری سردرگم شوید، جامعه برای ارائه تمام پشتیبانی لازم وجود دارد. با توجه به این واقعیت، React به این زودی ها محو نخواهد شد. اگر در حال برنامه ریزی برای ساخت یک پروژه هستید، می تواند کتابخانه مورد علاقه شما باشد.
تطبیق پذیری
React یکی از همه کاره ترین فناوری های موجود است، زیرا میتوان از آن با ابزارهای مختلف زیادی استفاده کرد. علاوه بر این، React را میتوان فقط در بخش های خاصی از پروژه اعمال کرد.
عملکرد عالی
React یک کتابخانه جاوا اسکریپت فوق العاده برای ساخت برنامه های تک صفحه ای است، به خصوص اگر می خواهید زمان کمتری برای توسعه در هنگام ایجاد برنامه های کوچک صرف کنید. از آنجایی که React یک کتابخانه است، میتوانید با همکاری ابزارهای مختلف و کتابخانه های دیگر از آن استفاده کنید! همانطور که قبلاً اشاره کردیم، واقعاً همه کاره است.
React در زندگی روزمره
بسیاری از ما روزانه از وب و برنامه های موبایل استفاده می کنیم و صادقانه بگوییم، به احتمال زیاد بیش از یک بار. اما آیا تا به حال به نحوه ساخت آنها فکر کرده اید؟ بدیهی است که فیس بوک یکی از بزرگترین شرکت هایی است که از React در طول توسعه استفاده می کند، اما بقیه چطور؟ غول هایی مانند نتفلیکس، دراپ باکس، آمازون، تسلا، شاپیفای یا یاهو! نامه ها تنها چند نمونه هستند. طبق گفته Stackshare، React توسط حداقل 9850 شرکت استفاده می شود! این کاملاً یک امتیاز است. علاوه بر این، بیش از 88880 توسعه دهنده اعلام کردند که از React در پروژه های خود استفاده کرده اند.
نکات کلیدی
تشخیص React بین یک فریم ورک و یک کتابخانه ممکن است باعث ایجاد مشکل شود. برای جلوگیری از اشتباهات غیر ضروری، این نکات را به خاطر بسپارید:
- React یک کتابخانه است، نه یک فریم ورک.
- این محبوب ترین کتابخانه جاوا اسکریپت موجود است.
- React Native برای توسعه برنامه های تلفن همراه استفاده می شود.
- React برای ساخت رابط های کاربری، برنامه های کاربردی وب و موارد دیگر طراحی شده است.
- کتابخانه یک جامعه بزرگ و حامی دارد.
- دانش اولیه HTML/CSS برای شروع یادگیری React کافی است.
- توسعه React همچنان محبوبیت خود را به دست خواهد آورد.
نتیجه گیری
حتی با وجود اینکه کتابخانه های جاوا اسکریپت دیگری مانند Vue.js وجود دارد، React پادشاه بلامنازع است و شایسته شناسایی و احترام است. ما اطلاعات بسیار زیادی را مرور کردیم، از توضیح اینکه React چیست، برای چه چیزی استفاده می شود، از ابتدای آن گرفته تا React Native و استفاده از آن در برنامه های مختلف.
اگر هرگز React را امتحان نکرده اید و همه موارد فوق جذاب به نظر می رسند، مطمئن شوید که لیست بهترین وبلاگ های توسعه وب را که می توانند به شما در یادگیری React، فریمورک های مختلف و موارد دیگر کمک کنند، بررسی کنید!
منبع: massivepixel.io