مقدمه ای بر React Basics و Next.js

معرفی React و Nextjs

React و Next.js به دو مورد از محبوب ترین کتابخانه های جاوا اسکریپت برای ساخت برنامه های کاربردی وب مدرن تبدیل شده اند. در این پست وبلاگ، مروری جامع از هر دو کتابخانه، ویژگی‌های کلیدی آنها، و نحوه استفاده از آنها برای ایجاد برنامه‌های کاربردی وب مقیاس‌پذیر قدرتمند و کارآمد ارائه خواهیم کرد.

قبل از اینکه به React و Next.js بپردازیم، اجازه دهید تفاوت بین کتابخانه و چارچوب را روشن کنیم.

کتابخانه در مقابل چارچوب

بیایید تفاوت بین یک Library که در اینجا React است و Framework که Next.js است را بدانیم.

• کتابخانه: مجموعه ای از کدهای از پیش نوشته شده که می توانید از آن برای انجام وظایف خاص در برنامه خود استفاده کنید. شما بر نحوه و زمان استفاده از کتابخانه کنترل دارید. نمونه هایی از کتابخانه ها عبارتند از Lodash، jQuery، React و Axios.

• چارچوب: یک سازه یا پایه کامل برای کاربردهای ساختمانی. مجموعه ای از قوانین و قراردادها را ارائه می دهد که باید از آنها پیروی کنید. چارچوب اغلب جریان برنامه شما را دیکته می کند. نمونه هایی از فریمورک ها عبارتند از Nextjs، Nestjs.

اساساً، یک کتابخانه مؤلفه‌های رابط کاربری را در اختیار ما قرار می‌دهد که می‌توانیم در یک پروژه از آن‌ها استفاده کنیم و به آن محدود می‌شود، در حالی که یک چارچوب حاوی چیزهای اضافی به کتابخانه است، مانند ابزارها و قابلیت‌هایی که به فرد کمک می‌کند مستقیماً به جای کار از ابتدا، از آن استفاده کند. ما تفاوت های بیشتری را در آموزش های آینده خواهیم دانست. در حال حاضر، React یک کتابخانه است و Next.js یک چارچوب مبتنی بر React Library با ابزارها و قابلیت‌های اضافی است که توسعه ما را آسان‌تر می‌کند.

مثالی از React Functional Component

React چیست؟

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

JSX

یک پسوند نحوی برای جاوا اسکریپت که نوشتن ساختارهای HTML مانند در کد جاوا اسکریپت را آسان‌تر می‌کند. می‌توانیم هم HTML و هم JS را با هم بنویسیم تا رندر شرطی و قالب‌بندی متن را آسان‌تر کنیم. همچنین، می‌توانیم از یک فایل برای نوشتن کد کامل در مقایسه با فریم‌ورک‌هایی مانند Angular استفاده کنیم که در آن قالب و عملکرد متفاوت می‌نویسیم.

const fruitsList = (
);

اجزاء

کامپوننت ها بلوک های اصلی برنامه های React هستند که منطق را محصور می کنند و UI را رندر می کنند. آن را به عنوان یک بلوک لگو در نظر بگیرید، جایی که هر بلوک ترکیبی، کل چیز را با هم می سازد. ما چندین مؤلفه را می نویسیم تا عملکرد کوچک تری داشته باشیم بدون هیچ گونه جفت یا وابستگی. در مثال زیر، ما یک جزء تابعی به اشتراک گذاشته ایم که می تواند به دو صورت نوشته شود، یکی با عبارات لامبدا و دیگری با توابع عادی. قبلاً Class Component ها نیز وجود داشت، اما امروزه همه از کامپوننت های تابعی استفاده می کنند که ساده تر از کامپوننت های کلاس هستند و از Hooks بر روی متدهای کلاس چرخه عمر در کامپوننت کلاس استفاده می کنند و کد را نیز کاهش می دهند.

const TestComponent = () => <div> <h2>Hi I am a component </h2> div>

function TestComponent() { return <div> <h2>Hi I am a component </h2> div> }

دولت و لوازم

مکانیسم هایی برای مدیریت داده ها و انتقال آن بین اجزا. Props اساساً ویژگی هایی هستند که تغییر نمی کنند و state مقادیر مربوط به ویژگی هایی هستند که می توانند در طول زمان تغییر کنند. فرض کنید باید لیست میوه ها را در یک صفحه نشان دهیم.

به عنوان مثال، ما یک مؤلفه ایجاد می کنیم که لیست میوه ها را از لیستی که به آن ارسال شده است، ارائه می دهد. بگذارید متغیر fruitNames را بگوییم[] لیستی از میوه ها به عنوان است [‘Banana’, ‘Apple’, ‘Orange’]. این لیست می تواند تغییر کند، بنابراین یک متغیر حالت است.

و یک متغیر دیگر sectionLabel as 'Fruits List' صرف نظر از فهرست میوه ها یکسان است، زیرا باید بگوییم که این جزء دارای لیستی از میوه ها است.

بنابراین، ما معمولاً از Props برای انتقال از کامپوننت والد به مؤلفه فرزند استفاده می کنیم، جایی که تغییر نمی کند. و متغیر حالت، که در آن باید مقدار آن را در طول چرخه حیات کامپوننت تغییر دهیم.

DOM مجازی

DOM به Document Object Model اشاره می کند که در آن کد HTML سند است و شی و مدل داده هایی هستند که می خواهیم در یک صفحه وب ارائه دهیم. Virtual DOM یک نمایش سبک از DOM واقعی است که امکان به روز رسانی کارآمد را فراهم می کند زیرا کارآمد و سریع نسبت به به روز رسانی DOM واقعی است که باعث می شود React مورد علاقه همه باشد.

برای درک این مفهوم Virtual DOM، اجازه دهید Angular را مقایسه کنیم، جایی که در تازه‌سازی داده‌ها، یک نمای جدید دریافت می‌کنیم که همه چیز را در صفحه کاربر به‌روزرسانی می‌کند، در حالی که React در سمت دیگر، به جای به‌روزرسانی کل صفحه، فقط داده‌های تغییر یافته را به‌روزرسانی می‌کند. . این فرآیند باعث می شود React کارآمد و سریع، با استفاده از حافظه کم و عملکرد مناسب باشد.

Next.js Framework چیست؟

Next.js یک چارچوب React است که فرآیند ساخت برنامه های React رندر شده توسط سرور را ساده می کند. SSR یا رندر سمت سرور یک فرآیند مفید برای بهبود سرعت یک برنامه وب و همچنین یک عامل کلیدی برای SEO است زیرا به رتبه بندی سایت کمک می کند سریعتر شود. این ویژگی هایی مانند:

رندر سمت سرور (SSR)

SSR مفهومی از رندر کردن مؤلفه در سمت سرور و ارائه یک صفحه به طور مستقیم به کاربر به جای ارائه در انتهای کاربر است. Nextjs اجزای رندرینگ را در سرور فراهم می کند، سئو و عملکرد بارگذاری اولیه صفحه را بهبود می بخشد. این عملکرد به دلیل کاهش اندازه صفحه و همچنین کاهش اسکریپت ها / فایل ها برای بارگیری به موقع است.

تولید سایت ایستا (SSG)

با تولید سایت ایستا، ما فقط صفحات استاتیکی را می سازیم که می توانند بدون هیچ سروری در حال اجرا با استفاده از میزبانی سایت استاتیک مانند صفحات Vercel یا Github ارائه شوند. این باعث می‌شود که سرویس‌دهی سایت‌ها مقرون‌به‌صرفه و سریع باشد و بیشتر برای وبلاگ‌های ثابت یا صفحات اطلاعاتی که در آن به داده‌های پویا نیازی نداریم، استفاده می‌شود. با Next.js صفحات پیش رندر در زمان ساخت، زمان بارگذاری سریع و کاهش بار سرور را فراهم می کند. این باعث می‌شود که ایجاد سایت‌های ساده که به راحتی در سایت‌های میزبانی استاتیک ارائه شوند، راحت باشد.

مسیرهای API

با Next.js می‌توانید مستقیماً API ایجاد کنید، بدون اینکه یک Backend جداگانه برای مدیریت منطق API داشته باشید. با SSR می‌توانید APIهای پویا مانند بارگیری اطلاعات کاربر، بررسی سبد خرید، محصولات به‌روز شده و منطق تجاری بیشتر اضافه کنید.

مسیریابی مبتنی بر فایل

به طور خودکار مسیرها را بر اساس ساختار پروژه شما ایجاد می کند. این به این معنی است که بر اساس نام فایل شما، صفحات را می توان ایجاد کرد. به عنوان مثال، ما صفحاتی با نام about، home ایجاد می کنیم، بنابراین با بازدید از /home و /about می توانیم به صفحات در برنامه NextJS برویم، این امر مسیریابی را بدون هیچ منطق اضافی آسان می کند. به سادگی می توانید صفحات بیشتری را از این طریق به برنامه اضافه کنید.

چرا از React و Next.js با هم استفاده کنیم؟

اکنون ویژگی های هر دو را می دانیم، بنابراین ترکیب React و Next.js چندین مزیت را ارائه می دهد:

بارگذاری سریعتر صفحه

با پشتیبانی از SSR و SSG، می توان زمان بارگذاری اولیه صفحه برنامه وب را به میزان قابل توجهی بهبود بخشید. می تواند برنامه وب سریعتر و کارآمدتر با استانداردها ایجاد کند.

سئوی بهتر

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

تجربه کاربری بهبود یافته

زمان بارگذاری سریعتر و تجربه کاربری بهتر می تواند منجر به افزایش تعامل و تبدیل شود. اگر سایت شما سریع بارگذاری می شود، کاربران دوست دارند از برنامه های شما بازدید کنند.

توسعه ساده شده

Next.js یک راه راحت برای ساختار و مدیریت برنامه های React ارائه می دهد. همچنین عملکردهای اضافی را برای بهتر کردن ReactJS فراهم می کند و همچنین مستندات خوبی را با پشتیبانی فعال جامعه و با پشتیبانی از خود تیم Vercel ارائه می کند و آن را به یک چارچوب تجربه برتر برای توسعه با استاندارد بالا و بهینه سازی تبدیل می کند.

توجه: می توانید اطلاعات بیشتری در مورد فریمورک Next.Js در وب سایت رسمی بخوانید.

نتیجه گیری

در این پست وبلاگ، React و Next.js را معرفی کرده‌ایم و ویژگی‌ها و مزایای کلیدی آنها را مورد بحث قرار داده‌ایم. در پست‌های آینده، عمیق‌تر به موضوعات خاص مانند راه‌اندازی پروژه React و Next.js، درک کامپوننت‌ها و JSX، و کار با state و props خواهیم پرداخت.

همچنین یک پروژه و چند قطعه کد برای توضیح موارد اضافه می کنیم. بنابراین در صورت تمایل نظرات خود را در مورد نظر ما کامنت کنید و نظرات خود را با ما در میان بگذارید. همچنین لینک کانال تلگرامی را که پست وبلاگ خود را در آن به اشتراک می گذاریم به محض ارسال به اشتراک می گذاریم.

ابتدا در Introduction to React Basics و Next.JS Framework ارسال شده است