چرا باید React JS را یاد بگیریم؟

همانگونه که قبلا اشاره کردیم برای اینکه بتوانیم در زمینه طراحی و توسعه وب فعالیت کنیم سه مسیر آموزشی در پیش داریم:

  • Front-End Developer
  • Back-End Developer
  • Full Stack Developer

برای اینکه بتوانیم یک Front-End Developer شویم لازم است که یکی از فریم ورک های محبوب را یاد بگیریم که یکی از این فریم ورک ها React JS است.

در این مقاله سعی داریم تا به بررسی React JS بردازیم و اینکه چرا باید React JS را یاد بگیریم؟

ویژگیهای اصلی React JS:

  • Modern Looking UI: اجزاء React برای توسعه سریعتر وب و ساخت سیستم طراحی خود یا شروع برای طراحی متریال بکار می رود.
  • Faster Performance: یک رابط کاربری سریع با کار کمتر در بهینه سازی برای عملکرد
  • Virtual DOM: ReactJS از Virtual DOM استفاده می کند که تجربه کاربری را بهتر می کند.
  • Rendering: ReactJS برای رندر کردن در مقایسه با سایر فریم ورکهای وب سریعتر است.
  • Easy to Learn: هر توسعه دهنده با دانش جاوااسکریپت می تواند ReactJS را به سادگی یاد بگیرد.
  • One Way Data Binding: تخصیص یک طرفه داده موجب می شود تا کدها پایدارتر شوند.
  • Easy Testing: ReactTestUtils تست اجزاء React در هر فریم ورک تست ساده تر می سازد.
  • Reusability: اجزاء React می تواند به راحتی از طریق ایجیاد یک کلاس مجدد استفاده شود.
  • Simple to Migrate: به راحتی می توانید یک برنامه را به ReactJS بدون نیاز به نوشتن مجدد کل برنامه Front-End مهاجرت کنید.
  • Easier Debugging: رفع خطا با سه ابزار مختلف آسانتر است- Console, Network و React Developer Tools
  • Better User Engagement: هدف اصلی React JS ایجاد درگیری بالاتر و تجربه کاربری بهتر است.
  • Productivity: React بهره وری را در بین توسعه دهندگان تقویت می کند
  • SEO: React امکان رندرینگ سمت سرور جاوااسکریپت را فراهم می سازد که این بدان معناست که سایت React می تواند به سادگی برای ترافیک ارگانیک رقابت کند.

آموزش React: مفاهیم پایه و اصلی

تسلط بر مفاهیم کلیدی React به شما کمک می کند تا خیلی سریع با این کتابخانه Front-End آشنا و یک معلم راهنمای React تبدیل شوید.

ممکن است بپرسید چرا React؟ خوب ، اول از همه ، اگر از قبل JavaScript را می دانید ، React می تواند شما را در این زمینه بسیار بهتر کند. شما یاد خواهید گرفت که چگونه از برخی الگوی های برنامه نویسی برای حفظ و عملکرد بهتر کد JavaScript استفاده کنید.

دوم ، یک دلیل وجود دارد که این کتابخانه امروزه بسیار محبوب شده است ، دارای جادویی است که می تواند ایجاد رابط کاربر پیچیده را ساده تر کند. مواردی مانند DOM مجازی ، که فقط امکان نمایش بخشهایی از صفحه را دارد که تغییر کرده است ، مطمئناً چیز خوبی است.

بنابراین ، بدون هیچ زحمتی بیشتر ، بیایید آن را بررسی کنیم:

اجزاء (Components):

اجزاء React یک مورد منفرد است که می تواند موارد دیگری را در خود داشته باشد. این مانند یک قطعه از یک پازل است که وقتی با سایر قطعات ترکیب شود ، نشان دهنده برنامه شماست.

اجزاء React به دلیل قابلیت استفاده مجدد عالی هستند. پس از تعریف یک component، اکنون می توانید آن component را به هر کجا که می خواهید ببرید ، فقط باید داده های آن را تهیه کنید.

ممکن است شما یک مولفه داشته باشید که منطق را کنترل کند ، به عنوان مثال وقتی کاربر با کلیک یک دکمه چه اتفاقی می افتد ، پردازش می کند و سپس ممکن است componentای داشته باشید که فقط موارد ، مانند بسته بندی یا ظرفی را ارائه می دهد که داده را ارائه می دهد.

اجزای عملکردی Stateless

یک شکل ساده از یک component، component عملکردی Stateless نامیده می شود که فقط تابعی است که داده ها را از طریق چیزی به نام props می گیرد ، مقدار JSX را برمی گرداند و سپس عناصر DOM را در صفحه بیرون می کشد.

Class-based components

همچنین Class-based components  وجود دارد. اگر به برخی از ویژگی های اضافی مانند state نیاز دارید ، می توانید از آنها استفاده کنید.

هر یک از class-based component دارای یک متد render ()  است ، که نحوه ارائه component شما به صفحه را توصیف می کند.

مواردی که باید در اینجا یادداشت کنید:

  • Component ها را باید با حروف بزرگ بنویسید، زیرا نام های کوچک برای عناصر HTML اختصاص داده شده است.
  • این واقعیت که شما بیش از یک بار React را در اجزای مختلف برنامه خود وارد می کنید مهم نیست. در پایان ، فقط یک نسخه وجود دارد.
  • فقط می توانید یک عنصر را از روش رندر برگردانید. اگر می خواهید چندین عنصر خواهر و برادر را بازگردانید ، از برچسب <React.Fragment> استفاده کنید.

JSX

JSX (JavaScript XML) به ما اجازه می دهد تا کدی مشابه XML را برای سادگی و ظرافت بنویسیم ، و سپس با تماس با عملکرد React.createElement() به فراخوانی عملکردهای جاوا اسکریپت منتقل می شود.

به عبارت دیگر ، نحوه ایجاد عناصر DOM و سپس قرار دادن آنها در صفحه است. به نظر ترکیبی از JavaScript و HMTL است.

یک نکته عجیب در مورد JSX این است که منطقی وجود ندارد. اگر قبلاً با زبانهای الگویی مانند Handlebars ، Pug یا EJS کار کرده اید ، می دانید که همه آنها روش خاص خود را برای انجام شرطی ها و دستورات دارند. اما در JSX در بیشتر موارد شما فقط باید از روی آرایه داده ها نقشه برداری کرده و عنصری را روی صفحه نشان دهید، بنابراین می توانید از JavaScript برای این منطق استفاده کنید.

اگر ترجیح می دهید انتزاعی نسبت به JavaScript نداشته باشید ، روش دیگری برای نوشتن کد React استفاده از React.createElement ()  است. درست مانند JavaScript معمولی که می توانید عناصر ایجاد کنید ، آنها را رندر کنید ، می توانید از همه نوع HTML معمولی خود در JavaScript استفاده کنید.

مسلماً ، می تواند نوشتن کد اضافی زیادی باشد ، اما روش دیگری برای انجام کارها است. شما واقعاً به همه آن موارد انتزاعی نیاز ندارید ، اگر بخواهید مطمئناً می توانید همه کارها را در JavaScript انجام دهید.

داده ها در react

حال بیایید ببینیم که داده ها چگونه وارد اجزا می شوند.

از سه طریق می توانید داده ها را در component خود قرار دهید: props, state  یا  context

بیایید بگوییم که شما یک وب سایت پایگاه داده فیلم و یک جز component به نام فیلم دارید و می خواهید آن component را با عنوان فیلم ، توضیحات و تصویر به آن خوراک دهید. این کار را می توان با عبور props به component انجام داد.

Props

یک prop در JSX همان ویژگی در HTML است ، با این تفاوت که می توانید هر نوع داده ای را که JavaScript پشتیبانی می کند ، به آن منتقل کنید. پس از انتقال داده ها به آن ، می توانید به راحتی در این مورد به داده های خود دسترسی پیدا کنید. اگر React Dev Tools را نصب کرده اید ، می توانید از آن برای مشاهده یک component و مشاهده props  و state  استفاده کنید.

نکته ای که در اینجا باید به آن توجه شود این است كه داده ها می توانند كاهش پیدا كنند ، اما از یك مولفه فرزند به پدر نمی توانند افزایش یابند. اگر می خواهید داده ها از 3-4 سطح پایین عبور کنند ، باید آنها را تا انتها رد کنید. البته ، بسیاری از راه حل های مختلف برای این وضعیت وجود دارد ، مانند Context ، ابزار مدیریت داده های خارجی مانند Redux

در React شما چند نوع prop  مختلف دارید – child props  و render props. props پیش فرض که React در اختیارتان قرار می دهد ، Children  نامیده می شوند.

رندرها به شما امکان دسترسی به چیزهای component والدین را در فرزندانتان می دهند.

گرچه گرامر آن مورد دلخواه است اما به شما امکان می دهد تا روش کد را بیشتر قابل استفاده مجدد کنید. این را در مواردی مانند Context ، Apollo خواهید دید.

Context

انتقال داده ها از طریق چندین سطح می تواند برای انواع خاصی از props  مانند locale preference  و UI theme  دست و پا گیر باشد. بنابراین ، افراد باهوش از فیس بوک به چیزی به نام Context رسیدند.

این یک چیز نسبتاً جدید در React است و راهی برای انتقال داده ها از طریق درخت component بدون نیاز به عبور دستی از پایین در هر سطح (prop drilling) است.

می توانید state  خود را در جایی تنظیم کنید و سپس از طریق context  استفاده کنید. تمام آنچه شما نیاز دارید این است که متن خود را در بالای برنامه مشخص کنید و سپس آن را در هرجای دیگر از اجزای خود مصرف کنید.

State

State  از دیگر ویژگیهای اصلی React است. این مکانی است که می توانید داده های component را در آن ذخیره کنید. هر component می تواند State  داشته باشد.

State قرار است یک شی با هر جفت مقدار کلیدی باشد که می خواهیم در آنجا ذخیره کنیم.

به عنوان مثال ، شما می توانید یک فرم با چند ورودی داشته باشید که در آن کاربر می تواند برخی از داده ها را وارد کند و یک تصویر را بارگذاری کند. معمولاً آن داده های ورودی را به حالت آینه در می آورید و سپس آن حالت ورودی را پر می کند. این یک روش کوچک خوب است که قبل از ارسال آن به قسمت backend ، آن را به طور موقت در آن قسمت نگه دارید.

برخی از کتابخانه های خارجی برای مدیریت وضعیت برنامه شما وجود دارد. یکی که React همراه آن است State نامیده می شود و یکی دیگر از محبوبترین ها Redux است. این داده های شما را بسته بندی می کند و فقط آنها را مستقیماً از فروشگاه Redux به غرفه های سازنده شما تزریق می کند.

همچنین MobX و چند راه حل دیگر نیز وجود دارد ، اما با گذشت سالها Redux بیشترین محبوبیت را کسب کرد. با این حال بسیاری از افراد جامعه در حال جستجو برای چیز دیگری هستند و برخی از افراد به Apollo  مراجعه کرده اند. به اندازه Redux جلا داده نشده است ، اما آنها قطعاً در حال کار بر روی آن هستند.

چگونه داده ها را وارد component های React کنیم؟

اگر با Angular یا jQuery آشنا هستید ، این کتابخانه ها روش دیگری برای واکشی داده دارند. React چنین چیزی خارج از چارچوب نیست.

بنابراین ، چگونه داده ها را در برنامه واکشی می کنید؟ خوب ، شما به سادگی باید ابزار شخصی خود را برای انجام آن به همراه داشته باشید. شما می توانید از Fetch API نسبتاً جدیدی استفاده کنید یا می توانید از کتابخانه ای به نام Axios استفاده کنید ، این کتابخانه مبتنی بر XMLHttpRequests است و موارد زیادی را که به صورت رایگان با Fetch دریافت می کنید به صورت دستی پیاده سازی کرده است.

به طور کلی ، در یکی از روش های چرخه حیات یک جز component ، لیستی از مواردی را که از API نیاز دارید واکشی می کنید ، آن را در state ذخیره کرده و سپس آن را به غرفه ها منتقل می کنید یا مستقیماً ارائه می دهید.

نقطه ضعف آن این است که شما باید حالت های خطای خود را کنترل کنید.

مدیریت رویدادها

اگر در حال ساخت یک برنامه تعاملی هستید ، باید رویدادهایی مانند کلیک ، شناور ، ارسال فرم و موارد دیگر را مدیریت کنید. رویدادها در React تقریباً مشابه JavaScript هستند ، با این تفاوت که در چیزی بنام Event مصنوعی پیچیده شده اند ، که در واقع روشی برای اطمینان از عملکرد یکسان آنها در سایر مرورگرها و دستگاه ها است.

یک تفاوت دیگر که ممکن است برای شما عجیب باشد این است که به صورت درون خطی انجام شده اند. شما در اصل یک عنصر یا ویژگی در عنصر JSX خود دارید و این یک رویداد است ، چیزی مانند onclick.

فرض کنید یک دکمه و یک رویداد onclick دارید. در آن رویداد onclick شما معمولاً یک تابع یا روشی را اجرا می کنید که در داخل کلاس شما تعریف شده است. یا می توانید عملکرد خود را همان جا منتقل کنید.

با این حال ، باید در بازپرداخت های JSX مراقب این موارد باشید. اگر فراموش کنید که this.handleClick را ببندید ، کلیک کنید و آن را به onClick منتقل کنید ، وقتی تابع واقعاً فراخوانی شود ، this تعریف نمی شود.

راه حل آن این است که به جای اعلان یک متد بر روی component، می توانید خصوصیاتی را که قرار است به عنوان تابع arrow تنظیم شود ، اعلام کنید. این ویژگی ها به عنوان نمونه محدود می شوند و شما می توانید به قسمت داخلی آن دسترسی پیدا کنید.

بسیاری از رویدادها مانند clipboard ، mouse ، media ، رویدادهای animation وجود دارد ، اما بیشتر آنها کمتر استفاده می شوند.

متدهای چرخه زندگی

هر component در React دقیقاً مانند یک پروانه زیبا مجموعه ای از مراحل را طی می کند که متد های چرخه عمر نامیده می شوند. بله ، زندگی خودش را دارد!

ترتیب خاصی وجود دارد که در آن این چیزها اجرا می شوند. برخی از متدهای پرکاربرد عبارتند از: componentDidMount() و componentDidUpdate()

وقتی کامپوننت در حال ایجاد و وارد DOM است ، متد () componentDidMount فراخوانی می شود. اگر تغییری در غرفه ها یا حالت ایجاد شود ، روش componentDidUpdate ()  اجرا می شود ، و غیره …

بنابراین ، در هر زمان که بخواهید در زمان های خاص کاری انجام دهید ، این احتمالاً در همان زمان است که باید به یک روش چرخه زندگی متوسل شوید.

اگر از برخی کتابخانه های خارجی برای کار با داده ها استفاده می کنید ، احتمالاً لازم است که به این روش های چرخه عمر دسترسی پیدا کنید ، شنوندگان رویداد را در componentDidMount ()  اضافه کنید و آنها را در componentWillUnmount () حذف کنید.

React Hooks

این چیزی است که به تازگی از فیس بوک برای عموم منتشر شده است. در حال حاضر در حالت پیش نمایش است ، بنابراین اگر می خواهید از آن استفاده کنید ، باید نسخه آلفای React 16.7 را نصب کنید.

React Hooks موضوعی کاملاً بزرگ است که شایسته مقاله جداگانه ای است ، اما من در اینجا آن را کوتاه می کنم ، آنها به شما امکان می دهند بدون نوشتن کلاس از state و سایر ویژگی های React استفاده کنید.

همانطور که قبلاً فهمیدیم، در React  دو نوع components داریم: stateless functional components و class-based components. فرض کنید شما یک stateless component  در برنامه خود دارید و سپس به دلایلی می خواهید آن را به یک class-based component مبدل کنید تا بتوانید از ویژگی های React بیشتری استفاده کنید. راستش را بخواهید ، انجام این کار سرگرم کننده ترین کار در جهان نیست.

اینجا React Hooks است. آنها به ما امکان استفاده از state ، hooks ، context  و سایر موارد را در اجزای عملکردی می دهند. این خیلی شسته و رفته است!

Hooks  هنوز در مراحل اولیه هستند ، اما من احساس می کنم که آنها در آینده بخش مهمی از React خواهند بود.

 

حرف آخر:

بسیاری از ایده های React نوعی تجدیدنظر در مورد بهترین روش ها از کتابخانه ها و چارچوب های دیگر مانند Angular ، jQuery یا Backbone است.

وقتی React بیرون آمد همه با آن مخالفت کردند زیرا این امر باعث جدایی نگرانی ها شد ، چیزی که همه ما خیلی به آن عادت کرده بودیم. شما HTML ، JS را می گیرید و همه چیز را در یک component قرار می دهید؟ به هیچ وجه! این مزخرف است!

و من نمی گویم که مردم اشتباه می کردند ، من این را می فهمم ، اگر شما مدت طولانی است که به روش خاصی کار می کنید ، ترک عادت سخت است. با این حال ، گاهی اوقات ارزش این است که پیش فرض های خود را دوباره بررسی کنیم و از خود بپرسیم ، “آیا ممکن است روش دیگری برای انجام کارها وجود داشته باشد؟”

واضح است که استفاده از React ممکن است در آغاز باعث ناامیدی شود ، اما اگر مدتی با آن بازی کنید ، واقعاً واضح و شهودی به نظر می رسد.

 

منبع: https://owlypixel.com/learning-react-main-concepts/

 

مقاله قبلی: 

 

کلمات کلیدی: react، وب، طراحی وب.

 

ما را در شبکه های اجتماعی دنبال کنید:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اسکرول به بالا