ریکت React چیست و چه کاربردی دارد؟

امروزه، فریم‌ ورک‌ها و کتابخانه‌ های فرانت اند در حال تبدیل شدن به بخشی ضروری از پشته توسعه وب مدرن هستند. React.js یک کتابخانه front-end است که به تدریج به چارچوبی برای توسعه وب مدرن در جامعه جاوا اسکریپت تبدیل شده است.

برای کسانی که در توسعه وب تازه کار هستند، یا سعی می کنند بفهمند این همه هیاهو در مورد چیست، بیایید به React نگاه کنیم، چگونه کار می کند و چه چیزی آن را از سایر چارچوب های جاوا اسکریپت متمایز کرده است.

فریم ورک ریکت چیست؟

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

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

نقش اصلی React در یک برنامه کاربردی این است که با ارائه بهترین و کارآمدترین اجرای رندر، لایه نمای آن برنامه را درست مانند V در الگوی مدل-view-کنترلر (MVC) مدیریت کند. React.js به‌ جای پرداختن به کل رابط کاربری به‌ عنوان یک واحد، توسعه‌ دهندگان را تشویق می‌کند تا این رابط‌های کاربری پیچیده را به اجزای منفرد قابل استفاده مجدد که بلوک‌های ساختمان کل رابط کاربری را تشکیل می‌دهند، جدا کنند.

در انجام این کار، فریم ورک ReactJS سرعت و کارایی جاوا اسکریپت را با یک روش کارآمدتر برای دستکاری DOM ترکیب می‌کند تا صفحات وب سریعترین ایجاد کند و برنامه‌های وب بسیار پویا و پاسخگو، نتیجه کار باشند.

تاریخچه مختصری از React.js

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

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

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

کاربرد ریکت React.js

به طور معمول، شما یک صفحه وب را با تایپ URL آن در مرورگر وب خود ارسال می کنید. سپس مرورگر شما درخواستی برای آن صفحه وب ارسال می کند که مرورگر شما آن را ارائه دهد. اگر روی پیوندی در آن صفحه وب کلیک کنید تا به صفحه دیگری در وب سایت بروید، یک درخواست جدید برای دریافت آن صفحه جدید به سرور ارسال می شود.

این الگوی بارگذاری رفت و برگشت بین مرورگر شما (کلاینت) و سرور برای هر صفحه یا منبع جدیدی که سعی می کنید در یک وب سایت به آن دسترسی پیدا کنید ادامه می یابد. این رویکرد معمولی برای بارگذاری وب سایت ها است که به خوبی کار می کند، اما یک وب سایت بسیار مبتنی بر داده را در نظر بگیرید. بارگذاری مجدد و عقب صفحه وب کامل اضافی خواهد بود و تجربه کاربری ضعیفی ایجاد می کند.

علاوه بر این، هنگامی که داده ها در یک برنامه جاوا اسکریپت سنتی تغییر می کنند، برای منعکس کردن این تغییرات به دستکاری DOM نیاز دارد. باید شناسایی کنید که کدام داده‌ها تغییر کرده‌اند و DOM را به‌روزرسانی کنید تا آن تغییرات را منعکس کند، که منجر به بارگیری مجدد صفحه می‌شود.

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

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

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

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

نحوه استفاده از React.js

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

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

اتصال React به یک وب سایت

می‌توانید React را از طریق یک شبکه تحویل محتوا (CDN) به یک برنامه وب موجود متصل کنید تا مقداری تعامل به آن صفحه HTML اضافه کنید. با انجام این کار، React کنترل بخش خاصی از آن وب سایت را به دست می آورد، مانند نوار کناری، ویجت یا چیز دیگری. اینها فقط مولفه های React قابل استفاده مجدد و تعاملی با قابلیت های React هستند. (آموزش طراحی سایت جامع و پروژه محور)

شما می توانید در سه مرحله ساده به آن دست پیدا کنید:

اولین قدم این است که دو اسکریپت اصلی CDN را به فایل فهرست HTML وب سایت خود اضافه کنید. برای بارگیری React در برنامه خود از طریق سرویس CDN به این اسکریپت ها نیاز دارید.

<!– The first link is that of the core React library API itself”. –>
<script src=”https://unpkg.com/react@17/umd/react.development.js” crossorigin></script>

<!– The second link is that of the React DOM needed to render to the DOM”. –>
<script src=”https://unpkg.com/react-dom@17/umd/react-dom.development.js” crossorigin></script>

<!– The 3rd link is that of Babel, which is needed to compile our React code so it is understood by all browsers”. –>
<script src=’https://unpkg.com/babel-standalone@6.26.0/babel.js’></script>

<!– Load the React component file. –>
<script type=”text/babel” src=”like_widget.js”></script>

دوم، شما یک <div> را در جایی از فایل نشانه گذاری خود ایجاد میکنید تا قسمتی را که می خواهید به آن وصل کنید علامت گذاری کنید و کامپوننت React را رندر کنید. شما همچنین به آن یک شناسه منحصر بفرد می‌دهید که بعداً در کد جاوا اسکریپت برای یافتن محل استفاده می‌کنیم. مثلا:

<!– … Your existing HTML markup … –>

<!– … Your existing HTML markup … –>

مرحله نهایی ایجاد فایل جاوا اسکریپت like_widget است، همانطور که در زیر نشان داده شده است:

// Custom React component function that returns a JSX syntax

const ActualWidget = () => <h1>Hello World</h1>;

// Select the container

const container = document.getElementById(“like_widget_container”);

// Render the component to the DOM

ReactDOM.render(<ActualWidget />, container);

اگر برنامه را اجرا کنید، “Hello World” را دقیقاً در همان نقطه ای که در زیر علامت گذاری کرده اید به مرورگر ارائه می دهد.

ممکن است متوجه یک نحو عجیب و غریب به نام JavaScript XML (JSX) شده باشید که توسط تابع ActualWidget بازگردانده شده است. شما از JSX با React برای ترکیب HTML و جاوا اسکریپت به راحتی استفاده می کنید. فیس بوک JSX را به عنوان یک پسوند نحوی برای جاوا اسکریپت توسعه داد تا عملکرد HTML را با جاسازی مستقیم آن در کد جاوا اسکریپت گسترش دهد. با JSX، نیازی به جدا کردن کدهای HTML و JS نیست، زیرا React به شما اجازه می‌دهد HTML اعلامی را مستقیماً در کد جاوا اسکریپت بنویسید.

ایجاد یک برنامه ریکت React

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

ایجاد یک برنامه ریکت

خوشبختانه، نیازی نیست که این تنظیمات ساخت را یاد بگیرید یا خودتان ابزارهای ساخت را پیکربندی کنید. فیس بوک یک ابزار خط فرمان بسته Node به نام Cre-react-app ایجاد کرده است تا به شما کمک کند یک نسخه Boilerplate از یک برنامه React ایجاد کنید. این بسته به شما کمک می‌کند تا کار خارج از جعبه را انجام دهید و ساختاری سازگار برای برنامه‌های React فراهم می‌کند که هنگام جابجایی بین پروژه‌های React، آن را تشخیص خواهید داد.

ایجاد یک پروژه React جدید به سادگی اجرای دستورات زیر در ترمینال شماست:

npx create-react-app my-new-app

cd my-new-app

npm start

شرکت هایی که از React.js استفاده می کنند

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

شرکت هایی که از React.js استفاده می کنند

فیس بوک
اینستاگرام
نتفلیکس
Reddit
اوبر
Airbnb
مجله نیویورک تایمز
خان آکادمی
کد آکادمی
SoundCloud
Discord
واتس اپ وب

React همچنین قوی‌ تر شده است و اکنون می‌توان از آن برای ساخت برنامه‌های تلفن همراه بومی با استفاده از برنامه‌های React Native و Desktop با استفاده از Electron.js استفاده کرد.

شروع کار با ریکت React.JS

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

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