React کتابخانهای است که از محبوبیت بسیار زیادی برخوردار میباشد. در این مقاله قصد داریم تا مفاهیم مهم که در برنامه نویسی با React وجود دارد را باهم بررسی کنیم.
استفاده از class کامپوننتها در React قدیمی شده است. در ادامه دلایل اصلی در مورد اینکه چرا باید از Functional کامپوننتها برای برنامههای React خود استفاده کنیم را بررسی کردهایم.
هوک یک تابع ویژه است که به ما اجازه میدهد تا به ویژگیهای React در Functional کامپوننتها متصل شویم.
بنابراین اگر در حال شروع و یادگیری مفاهیم مهم React هستیم، لازم نیست نگران class کامپوننتها باشیم. اکنون میتوانیم به طور مستقیم Functional کامپوننتها را یاد بگیریم و کامپوننتهای جدید خود را به عنوان Functional کامپوننت بنویسیم.
باید به این نکته توجه کنیم که React همچنان از class کامپوننتها پشتیبانی میکند، درنتیجه لازم نیست آنها را در Functional کامپوننتها بازنویسی کنیم.
import React, { useState } from "react"; const YesNoButtonComponent = () => { const [button, setButton] = useState(""); const onButtonPress = (buttonName) => { setButton(buttonName); console.log(buttonName); }; return ( <div> <button onClick={() => onButtonPress("Yes")}>Yes</button> <button onClick={() => onButtonPress("No")}>No</button> </div> ); };
مثال بالا یک Functional کامپوننت با استفاده از هوک useState است.
هر کامپوننت یک قطعه با قابلیت استفاده مجدد از UI میباشد. کنار هم قرار دادن همه آنها منجر به یک برنامه کاربردی کامل میشود.
اگر با هر یک از این مشکلات ذکر شده در بالا مواجه شدیم، ایده خوبی است که شروع به تجزیه کامپوننت به اجزای کوچکتر کنیم. هیچ قانونی در مورد اینکه کامپوننت React ما چقدر باید بزرگ یا کوچک باشد وجود ندارد. اما اگر متوجه هر یک از مشکلات فوق شدیم این یک علامت هشدار دهنده است که نشان میدهد کامپوننت باید کوچکتر شود.
در ادامه چند دلیل اصلی وجود دارد که چرا فکر میکنیم تایپ اسکریپت بسیار مهم و تاثیرگذار است:
type HeadingProps = { title: string; bold: boolean; } export const Heading = ({ title, bold }: HeadingProps) => { return ( <div> {bold ? "Bold Title: " : "Regular Title: "} {title} </div> ); };
در مثال بالا میتوانیم تایپ اسکریپت را در عمل مشاهده کنیم. کامپوننت Heading
پراپس title
و نوع بولد HeadingProps
را میپذیرد. هر زمان که کامپوننت Heading
را فراخوانی کنیم، باید تمام props را با انواع مناسب به آن منتقل کنیم. اگر یک props را از دست بدهیم و یا از نوع نادرست ارسال کنیم، IDE برای ما یک خطا مطابق زیر ایجاد میکند.
const Heading = ({ title, bold }: HeadingProps) => JSX.Element ------------------------------------------------------------------- Type '{}' is missing the following properties from type 'HeadingProps': title, bold ts(2739)
این موضوع هنگام توسعه کامپوننتهای React بسیار عالی است زیرا باعث دریافت بازخورد فوری هنگام کدنویسی میشود.
در بسیاری از مواقع زمانی که پروژههای React شروع میشوند، توسعهدهندگان بلافاصله فکر میکنند که به نوعی به یک کتابخانه مدیریت state خارجی نیاز دارند. زمانی که تیمها شروع به ساختن یک برنامه React میکنند دیدن راهاندازی Redux/MobX/XState یا کتابخانههای مشابه غیرمعمول نیست.
توصیهای که میشود این است که برای ساخت برنامه React با local state شروع کنیم و با رشد برنامه خود سایر تصمیمات مربوط به مدیریت state را بگیریم. اغلب اوقات برنامه ما ممکن است واقعاً به راهحلهای پیچیده برای مدیریت state نیاز نداشته باشد. پس چرا حجم زیادی از کتابخانهها را اضافه کنیم در صورتی که میتوانیم از آنها استفاده نکنیم؟
آخرین مورد از مفاهیم مهم در React که اهمیت بسیار زیادی هم دارد تست کد است. هنگامی که از بهترین روشها برای نوشتن برنامه React خود استفاده کردیم، اکنون کد ما باید به راحتی تست شود. انواع مختلفی از تستها وجود دارد که در ادامه آنها را بررسی میکنیم.
Jest محبوبترین فریمورک تست برای unit testها است. فریمورکهای دیگری مانند Mocha نیز وجود دارد که میتوانیم از آنها هم استفاده کنیم. unit test ابتداییترین شکل تست است که این امکان را به ما میدهد تا کوچکترین واحدهای کد خود را مورد آزمایش قرار دهیم.
هر چیز در React یک کامپوننت است و از رویکرد مبتنی بر کامپوننت پیروی میکند. کامپوننتهای ما واحدهای تکی با قابلیت استفاده مجدد هستند که میتوانند به طور موثر مورد آزمایش قرار بگیرند. این شکل از تست در React بسیار مهم و حیاتی است.
این نوع تست اساساً برنامه را به طور کلی مورد بررسی قرار میدهد. این فریمورک شبیهسازی میکند که کاربر چگونه روی برنامه کلیک کرده و آن را در مرورگر آزمایش میکند. محبوبترین و آسانترین فریمورک برای تست end to end جاوااسکریپت (یا هر چیزی که روی مرورگر اجرا میشود) Cypress است.
در این مقاله سعی کردیم تا مفاهیم مهم در React را بررسی کنیم. درنهایت باید به این نکته توجه کنیم که هیچ قانون مشخصی در توسعه برنامههای React وجود ندارد. React خود یک کتابخانه بسیار انعطافپذیر است که به توسعهدهندگان آزادی عمل میدهد تا از هر روشی که راحت هستند برای توسعه استفاده کنند.