کتاب React 18 Design Patterns and Best Practices

کتاب React 18 Design Patterns and Best Practices (الگوهای طراحی و بهترین تمرین‌های React 18: طراحی، ساخت و استقرار برنامه‌های کاربردی وب آماده تولید با سهولت و ایجاد تجربه‌های کاربری قدرتمند، ویرایش چهارم) یک منبع کاربردی و جامع برای یادگیری چارچوب React 18 است که در 17 فصل به همراه تمرین‌های مختلف این چارچوب محبوب را آموزش می‌دهد.

در ادامه مقدمه‌ای از کتاب React 18 Design Patterns and Best Practices را از زبان نویسنده شرح خواهیم داد.

مقدمه‌ای بر کتاب React 18 Design Patterns and Best Practices:

React یک کتابخانه جاوا اسکریپت انقلابی و منبع باز است که با ساختن رابط‌های کاربری پیچیده از تکه‌های کوچک و ایزوله ای که به عنوان کامپوننت شناخته می‌شوند، جان به برنامه‌های وب می‌بخشد. کتاب React 18 Design Patterns and Best Practices به عنوان یک نقشه راه عمل می‌کند که شما را از طریق شگفتی‌های React راهنمایی می‌کند و با معرفی یک گردش کار کارآمد بدون به خطر انداختن کیفیت، بهره‌وری شما را افزایش می‌دهد.

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

در ادامه سفر خود، هنر ساخت اجزایی را که نه تنها موجودیت‌های یکباره بلکه قطعات قابل استفاده مجدد در برنامه شما هستند، کشف خواهیم کرد. ما مسیر ساختاربندی برنامه‌های شما را روشن می‌کنیم و آن‌ها را سازماندهی و مدیریت می‌کنیم. کار به ظاهر دلهره آور ایجاد فرم‌های کاربردی تبدیل به یک نسیم خواهد شد زیرا ما شما را با استراتژی‌ها و تکنیک‌هایی برای انجام موثر این کار مجهز می‌کنیم.

همانطور که بیشتر صعود می‌کنیم، خود را در سبک سازی اجزای React غوطه ور خواهیم کرد. شما یاد خواهید گرفت که چگونه برنامه‌های خود را با جذابیت‌های زیبایی‌شناسی زنده کنید و در عین حال مطمئن شوید که سریع و پاسخگو باقی می‌مانند. علاوه بر این، اسرار افزایش عملکرد برنامه را کشف خواهید کرد و اجزای خود را برای سرعت و کارایی تنظیم کنید.

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

در پایان کتاب React 18 Design Patterns and Best Practices، فرآیند آزمون و خطا، موانع توسعه و حدس و گمان چیزهایی از گذشته خواهند بود. شما از قدرت React استفاده کرده اید، مجهز به مهارت‌های لازم برای ساخت و استقرار برنامه‌های وب React در دنیای واقعی با اطمینان و ظرافت.

کتاب React 18 Design Patterns and Best Practices برای چه کسی است؟

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

آنچه کتاب React 18 Design Patterns and Best Practices پوشش می‌دهد:

در فصل 1 کتاب React 18 Design Patterns and Best Practices، اولین قدم‌های خود را با React برداریم، سفر خود را برای درک React با یادگیری نوشتن کد اعلامی و تمایز بین اجزا و عناصر React آغاز می‌کنیم. همچنین درباره اینکه چرا منطق و قالب‌ها را در React ترکیب می‌کنیم، بحث می‌کنیم، تصمیمی که در ابتدا بحث‌برانگیز بود اما در نهایت سودمند بود.

با توجه به پتانسیل احساس غرق شدن در دنیای به سرعت در حال تحول جاوا اسکریپت، پیشنهاد می‌کنیم برای جلوگیری از خستگی گام‌های کوچک و قابل مدیریت بردارید. ما با معرفی ابزار جدید create-vite به پایان می‌رسانیم و شما را برای تجربه کدنویسی عملی در React آماده می‌کنیم.

در فصل 2 کتاب React 18 Design Patterns and Best Practices، معرفی TypeScript، ما اصول اولیه TypeScript را یاد خواهیم گرفت، از جمله ایجاد انواع ساده، رابط‌ها، استفاده از enums، فضاهای نام و الفبای قالب. ما همچنین چگونگی راه اندازی اولین فایل پیکربندی TypeScript خود (tsconfig.json) و تقسیم آن را به دو بخش – یک قسمت مشترک و یک بخش خاص که به ویژه هنگام کار با MonoRepos مفید است، خواهیم فهمید.

پس از این فصل، شما آماده خواهید بود تا در مورد استفاده از کد JSX/TSX تحقیق کنید و راه‌هایی را برای بهتر کردن کد خود در فصل بعدی کتاب React 18 Design Patterns and Best Practices بررسی کنید. آماده استفاده از TypeScript شوید تا کار با برنامه‌های React و نگهداری آن‌ها آسان شود.

در فصل 3 کتاب React 18 Design Patterns and Best Practices، پاکسازی کد شما، با JSX آشنا می‌شویم، از جمله نحوه نگارش و کارهایی که می‌تواند انجام دهد. همچنین Prettier و ESLint را راه‌اندازی می‌کنیم تا کد خود را مرتب نگه داریم و از اشتباهات جلوگیری کنیم.

بعلاوه، ما در مورد برنامه نویسی کاربردی یاد خواهیم گرفت که مدیریت و آزمایش کد ما را آسان‌تر می‌کند. پس از مرتب کردن کدمان، آماده خواهیم شد تا عمیق‌تر به React برویم و یاد بگیریم که چگونه مؤلفه‌هایی بسازیم که بتوانیم مکرراً در فصل بعدی کتاب React 18 Design Patterns and Best Practices از آن‌ها استفاده کنیم. با اتخاذ عادات خوب، می‌توانیم برنامه‌های React بسازیم که مدیریت، رشد و بررسی آن ساده است.

در فصل 4 کتاب React 18 Design Patterns and Best Practices، بررسی الگوهای ترکیبی محبوب، یاد خواهیم گرفت که چگونه از “props” استفاده کنیم تا اجزای قابل استفاده مجدد خود را بهتر با هم کار کنند. استفاده از لوازم جانبی کمک می‌کند تا اجزای ما جدا و به خوبی تعریف شوند. ما به دو روش متداول برای سازماندهی مؤلفه‌ها نگاه خواهیم کرد: ظرف و الگوی ارائه، که قوانین و ظاهر اجزای ما را جدا نگه می‌دارد. همچنین در مورد مؤلفه‌های مرتبه بالاتر (HOC) برای برخورد با زمینه بدون وابستگی بیش از حد مؤلفه‌هایمان، و الگوی «عملکرد فرزند» برای ایجاد مؤلفه‌ها در جریان، یاد خواهیم گرفت.

در فصل 5 کتاب React 18 Design Patterns and Best Practices، نوشتن کد برای مرورگر، به نحوه استفاده از React در مرورگر وب برای ایجاد فرم‌ها، مدیریت رویدادها و متحرک سازی SVGها خواهیم پرداخت. ما در مورد useRef Hook، که راهی آسان برای دسترسی به گره‌های DOM است، یاد خواهیم گرفت.

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

در فصل 6 کتاب React 18 Design Patterns and Best Practices، زیبا جلوه دادن کامپوننت‌های خود، به سبک‌سازی در React می‌پردازیم. ما با استفاده از تجربیات متا به عنوان مثال، با بررسی مشکلات ایجاد CSS برای پروژه‌های بزرگ شروع می‌کنیم. ما در مورد اینکه چگونه می‌توانیم استایل‌ها را مستقیماً در اجزای React خود بنویسیم، یاد می‌گیریم که کد ما را مرتب و خوانا نگه می‌دارد.

اما ما همچنین با محدودیت‌های این روش آشنا می‌شویم و روش دیگری از استایل‌سازی به نام ماژول‌های CSS را بررسی می‌کنیم که به ما امکان می‌دهد CSS را در فایل‌های جداگانه بنویسیم اما سبک‌ها را در محدوده اجزای جداگانه نگه داریم. در نهایت، با styled-components آشنا می‌شویم، کتابخانه‌ای محبوب برای استایل‌سازی در React. در پایان این فصل، ابزارهای زیادی برای عالی جلوه دادن برنامه‌های React خود خواهید داشت.

در فصل 7 کتاب React 18 Design Patterns and Best Practices، ضد الگوهایی که باید از آن‌ها اجتناب کرد، در مورد چهار روش استفاده از مؤلفه‌هایی صحبت خواهیم کرد که می‌توانند سرعت برنامه‌های وب ما را کاهش دهند یا خراب کنند. برای هر مشکل، از یک مثال استفاده می‌کنیم تا نشان دهیم چه چیزی اشتباه می‌کند و چگونه آن را برطرف کنیم.

ما یاد خواهیم گرفت که چرا استفاده از ویژگی‌ها برای تنظیم وضعیت می‌تواند باعث ایجاد مشکل بین حالت و ویژگی‌ها شود. همچنین خواهیم دید که چگونه استفاده از ویژگی «key» اشتباه می‌تواند نحوه به‌روزرسانی مؤلفه‌های React را مختل کند. در نهایت، یاد خواهیم گرفت که چرا گسترش ویژگی‌های غیر استاندارد به عناصر DOM ایده بدی است. درک این مسائل به ما کمک می‌کند از React به طور موثرتری استفاده کنیم و از اشتباهات رایج جلوگیری کنیم.

فصل 8 کتاب React 18 Design Patterns and Best Practices، قلاب‌های React، یادگیری در مورد React Hook های جدید بسیار سرگرم کننده خواهیم بود. ما یاد خواهیم گرفت که چگونه کار می‌کنند، چگونه از آن‌ها برای دریافت داده استفاده کنیم، و چگونه یک جزء کلاس را به Hooks تبدیل کنیم. همچنین با افکت‌ها و تفاوت‌های میان یادداشت، useMemo و useCallback آشنا خواهیم شد. در نهایت، خواهیم دید که useReducer Hook چگونه کار می‌کند و چگونه با react-redux متفاوت است. همه اینها به ما کمک می‌کند تا اجزای React خود را سریعتر و بهتر کنیم.

در فصل 9 کتاب React 18 Design Patterns and Best Practices، با React Router آشنا خواهیم شد، ابزاری که با React برای جابجایی بین صفحات در یک برنامه تک صفحه ای استفاده می‌کنیم. React این کار را به تنهایی انجام نمی‌دهد، بنابراین ما از React Router استفاده می‌کنیم.

ما خواهیم فهمید که چگونه از آن استفاده کنیم تا برنامه ما به URL های مختلف پاسخ دهد و ناوبری را مدیریت کند. در پایان این فصل، می‌دانید که React Router چگونه کار می‌کند و چگونه از آن در پروژه‌های خود استفاده کنید. ما تفاوت‌های بسته‌های react-router، react-router-dom و react-router-native، نحوه راه‌اندازی React Router، نحوه افزودن مولفه <Routes> و نحوه افزودن پارامترها به مسیرها را یاد خواهیم گرفت.

در فصل 10 کتاب React 18 Design Patterns and Best Practices، ویژگی‌های جدید و بهبود یافته‌ی نسخه 18 React را بررسی خواهیم کرد. این ویژگی‌های فراوانی دارد که ساخت برنامه‌های جالب و تعاملی را آسان‌تر می‌کند.

با گروه‌بندی خودکار وضعیت به‌روزرسانی، رندر همزمان، تعلیق برای دریافت داده، مدیریت بهتر خطا و انواع اجزای جدید، می‌توانید برنامه‌های جذاب و سریع ایجاد کنید. اگر با React کار می‌کنید، ایده خوبی است که به ارتقا به React 18 فکر کنید. ما همچنین به برخی از ویژگی‌های بزرگ جدید در Node 18 و 19 نگاه خواهیم کرد که می‌توانند پروژه‌های وب ما را حتی بهتر کنند.

در فصل 11 کتاب React 18 Design Patterns and Best Practices، مدیریت داده، با React Context API و نحوه استفاده از React Suspense با SWR آشنا خواهیم شد. ما اصول Context API را یاد خواهیم گرفت، از جمله ایجاد و استفاده از زمینه‌ها و اینکه چگونه قلاب useContext این کار را آسان تر می‌کند.

همچنین React Suspense را بررسی خواهیم کرد و اینکه چگونه به ما کمک می‌کند تا وضعیت‌های بارگیری را برای تجربه کاربری روان‌تر مدیریت کنیم. ما همچنین در مورد SWR یاد خواهیم گرفت، که واکشی و ذخیره داده‌ها را با React Suspense آسان‌تر می‌کند. در نهایت، نحوه استفاده از Redux Toolkit را یاد خواهیم گرفت. همه این ابزارها به ما کمک می‌کنند تا برنامه‌های React سریع‌تر و کاربرپسندتر بسازیم.

در فصل 12 کتاب React 18 Design Patterns and Best Practices، رندر سمت سرور، سفر خود را از طریق رندر سمت سرور (SSR) با React به پایان خواهیم رساند. اکنون می‌دانید که چگونه برنامه‌ای ایجاد کنید که از SSR استفاده می‌کند و چرا می‌تواند برای مواردی مانند بهینه‌سازی موتور جستجو (SEO)، اشتراک‌گذاری اجتماعی و بهبود عملکرد مفید باشد.

ما یاد خواهیم گرفت که چگونه داده‌ها را روی سرور بارگذاری کنیم و آن‌ها را در قالب HTML قرار دهیم تا وقتی برنامه سمت سرویس گیرنده در مرورگر راه اندازی شود، آماده باشد. در نهایت، خواهیم دید که چگونه ابزارهایی مانند Next.js می‌توانند راه‌اندازی SSR را در React با کاهش مقدار کد اضافی و مخفی کردن برخی از بخش‌های دشوار بسیار آسان‌تر کنند.

در فصل 13 کتاب React 18 Design Patterns and Best Practices، درک GraphQL با یک پروژه واقعی، می‌خواهیم در مورد GraphQL، ابزار جالبی که به ما کمک می‌کند با API ها و داده‌هایمان کارآمدتر کار کنیم، بیاموزیم. برخلاف APIهای REST معمولی، GraphQL به ما اجازه می‌دهد دقیقاً آنچه را که نیاز داریم و نه چیزی بیشتر بخواهیم.

ما قصد داریم از آن برای ایجاد یک سیستم ورود و ثبت نام کاربر ساده برای یک پروژه واقعی استفاده کنیم. ما یاد خواهیم گرفت که چگونه PostgreSQL را نصب کنیم، متغیرهای محیطی را با یک فایل .env تنظیم کنیم، سرور آپولو را راه اندازی کنیم، جستارها و جهش‌های GraphQL ایجاد کنیم، با حل‌کننده‌ها کار کنیم، مدل‌های Sequelize ایجاد کنیم، از JWT ها استفاده کنیم، با GraphQL Playground بازی کنیم، و احراز هویت را انجام دهیم. در پایان، می‌دانید که چگونه از GraphQL در پروژه‌های خود استفاده کنید.

در فصل 14 کتاب React 18 Design Patterns and Best Practices، معماری MonoRepo، ما در مورد چیزی به نام “MonoRepo” صحبت خواهیم کرد. به طور معمول، زمانی که برنامه‌ها را می‌سازیم، یک برنامه، یک مخزن git و یک خروجی ساخت داریم. اما بسیاری از سازمان‌ها از یک مخزن واحد برای همه برنامه‌ها، مؤلفه‌ها و کتابخانه‌های خود استفاده می‌کنند تا توسعه را آسان‌تر کنند.

این همان چیزی است که ما آن را تک مخزن می‌نامیم. مثل این است که به جای داشتن تعداد زیادی سبد کوچک، همه کدهای خود را در یک سبد بزرگ نگه دارید. این باعث می‌شود همه چیز به‌روزرسانی شود و در زمان صرفه‌جویی شود. همچنین بحث خواهیم کرد که چگونه یک MonoRepo می‌تواند اصلاح کد، بهبود کار گروهی و سرعت بخشیدن به روند به روز رسانی وابستگی بسته را بدون نیاز به انتشار یک نسخه جدید در هر بار به روز رسانی آسان تر کند.

فصل 15 کتاب React 18 Design Patterns and Best Practices، بهبود عملکرد برنامه‌های کاربردی شما، تکنیک‌هایی را بررسی می‌کنیم تا برنامه‌های شما را روان‌تر و سریع‌تر اجرا کنیم تا تجربه کاربری بهتری داشته باشید. ما به این خواهیم پرداخت که چگونه React نمایشگر برنامه شما را به‌روزرسانی می‌کند و چگونه استفاده از کلیدها می‌تواند به این فرآیند برای بهبود کارایی کمک کند. ما اهمیت مؤلفه‌های ساختار یافته و متمرکز بر وظیفه را در افزایش عملکرد برنامه کشف خواهیم کرد.

ما در مورد مفهوم تغییرناپذیری و اهمیت آن در کمک به React.memo و shallowCompare به طور موثر بحث خواهیم کرد. در پایان، ابزارها و کتابخانه‌های مختلفی را معرفی خواهیم کرد که می‌توانند سرعت برنامه‌های شما را بیشتر کنند. هدف این فصل این است که شما را با دانش ارزشمندی برای افزایش سرعت و عملکرد برنامه‌های خود تجهیز کند.

در فصل 16 کتاب React 18 Design Patterns and Best Practices، تست و اشکال‌زدایی، همه چیز را در مورد آزمایش یاد می‌گیریم. خواهید فهمید که چرا آزمایش مهم است و ابزارها و تکنیک‌های مختلف را برای بررسی اینکه آیا مؤلفه‌های React ما آنطور که باید کار می‌کنند، بررسی کنید.

ما با کتابخانه‌هایی مانند React Testing Library و Jest برای نوشتن و اجرای آزمایش‌ها کار خواهیم کرد، و حتی نحوه آزمایش بخش‌های پیچیده برنامه‌مان مانند مؤلفه‌های مرتبه بالا یا فرم‌هایی با فیلدهای زیاد را مشاهده خواهیم کرد. به علاوه، ما یاد خواهیم گرفت که چگونه از ابزارهایی مانند React DevTools و Redux DevTools برای کمک به توسعه برنامه‌های بهتر استفاده کنیم. در پایان این فصل، درک کاملی از نحوه عملکرد خوب برنامه خود از طریق آزمایش موثر خواهید داشت.

در فصل 17 کتاب React 18 Design Patterns and Best Practices، استقرار در تولید، برنامه React را که شما ساخته‌اید می‌گیریم و آن را با دنیا به اشتراک می‌گذاریم! ما از یک سرویس ابری به نام DigitalOcean برای انجام این کار استفاده خواهیم کرد. شما یاد خواهید گرفت که چگونه از Node.js و nginx برای راه اندازی و اجرای برنامه خود بر روی سرور استفاده کنید، و ما از سرور اوبونتو DigitalOcean برای این منظور استفاده خواهیم کرد.

ما شما را با نحوه راه اندازی DigitalOcean Droplet، پیکربندی و پیوند آن به دامنه خود آشنا خواهیم کرد. ما همچنین قصد داریم CircleCI را به شما معرفی کنیم، که ابزاری است که به شما کمک می‌کند به طور خودکار مطمئن شوید که برنامه شما همیشه برای کاربران آماده است، مهم نیست که چقدر تغییر می‌دهید. در پایان این فصل، برنامه خود را به صورت زنده در اینترنت خواهید داشت تا همه ببینند!

سرفصل‌های کتاب React 18 Design Patterns and Best Practices:

• Cover
• Copyright
• Table of Contents
• Preface
• Chapter 1: Taking Your First Steps with React
• Chapter 2: Introducing TypeScript
• Chapter 3: Cleaning Up Your Code
• Chapter 4: Exploring Popular Composition Patterns
• Chapter 5: Writing Code for the Browser
• Chapter 6: Making Your Components Look Beautiful
• Chapter 7: Anti-Patterns to Be Avoided
• Chapter 8: React Hooks
• Chapter 9: React Router
• Chapter 10: React 18 New Features
• Chapter 11: Managing Data
• Chapter 12: Server-Side Rendering
• Chapter 13: Understanding GraphQL with a Real Project
• Chapter 14: MonoRepo Architecture
• Chapter 15: Improving the Performance of Your Applications
• Chapter 16: Testing and Debugging
• Chapter 17: Deploying to Production
• Packt Page
• Other Books You May Enjoy
• Index

جهت دانلود کتاب React 18 Design Patterns and Best Practices می‌توانید پس از پرداخت، دریافت کنید.