(Abstraction:
یعنی: پنهان کردن جزئیات پیچیده پشت یک نام ساده، تا بتوانی بدون دانستن آن جزئیات، از آن استفاده کنی.)



هر کامپوننت، یک تکه پیچیدگی را در خودش جمع می‌کند، پشت یک نام معنادار پنهان می‌کند، و یک رابط ساده (props) به بیرون می‌دهد. مصرف‌کننده‌ها بدون دانستن جزئیات، از آن استفاده می‌کنند.

و نتیجه‌های عملی:

· کامپوننت بساز تا معنا خلق کنی، نه تا کد را کوتاه کنی.
· مسئولیت هر کامپوننت باید روشن باشد.
· نام‌گذاری، خودش یک نوع abstraction است.
· جزئیات را داخل نگه دار، رابط را ساده نگه دار.
· زودتر از موعد abstraction نساز.
· اگر abstraction‌ات پر از props عجیب شد، احتمالاً abstraction اشتباهی است.


سطوح مختلف abstraction

کامپوننت‌ها در سطوح مختلفی abstraction می‌سازند:

· اتم‌ها (Atoms): Button, Input, Icon
· مولکول‌ها (Molecules): SearchBox (شامل Input + Button)
· ارگانیزم‌ها (Organisms): Header, Sidebar, LoginForm
· تمپلیت‌ها: DashboardLayout
· صفحات: HomePage, ProfilePage

هر سطح، یک لایه abstraction روی لایه‌های پایین‌تر می‌سازد. وقتی HomePage را می‌نویسی، از Header، Feed، Sidebar استفاده می‌کنی. تو درگیر جزئیات Button داخل Header نمی‌شوی. آن abstraction در سطح پایین‌تر است.