مقدمه (Intro)
در این صفحه یک مقدمه ری اکت می خوانی. خیلی ساده و مدرسه ای جلو می رویم. می فهمی React چیست و چرا همه درباره اش حرف می زنند. بعد هم خیلی خلاصه درباره تاریخچه و نسخه های ری اکت صحبت می کنیم.
ری اکت (React) دقیقا چیست؟
React یک کتابخانه جاوااسکریپت است. کتابخانه (Library) یعنی جعبه ابزار آماده کد. از React برای ساخت بخش ظاهری سایت استفاده می کنیم. فرانت اند (Front-end) یعنی همان چیزی که کاربر روی صفحه می بیند.
ری اکت توسط مهندس نرم افزار فیسبوک، جردن واک (Jordan Walke) ساخته شد. به آن React.js یا ReactJS هم می گویند. با React رابط کاربری را تکه تکه و کامپوننتی می سازیم. کامپوننت (Component) یعنی یک تکه کوچک و قابل استفاده مجدد از رابط کاربری.
ری اکت چگونه کار می کند؟
ری اکت یک DOM مجازی (Virtual DOM) در حافظه می سازد. DOM درواقع نقشه درختی صفحه HTML است. یعنی ساختار تگ ها و عناصر روی صفحه.
به جای دست کاری مستقیم DOM مرورگر، React روی نسخه مجازی کار می کند. بعد تفاوت نسخه قبلی و جدید را حساب می کند. سپس فقط قسمت های لازم را در DOM واقعی عوض می کند. این کار سرعت را بالا می برد و فشار روی مرورگر را کم می کند.
در ادامه آموزش ری اکت، مرحله به مرحله می بینی این فرایند چطور انجام می شود. مثلا هنگام رندر دوباره کامپوننت ها، فقط بخش هایی که تغییر کرده اند، آپدیت می شوند.
پیش نیازهای شروع با React
قبل از شروع کار جدی با ری اکت، چند پیش نیاز مهم داری. باید یک آشنایی پایه با HTML داشته باشی. HTML اسکلت صفحه است؛ مثل ستون های ساختمان.
بعد نوبت CSS است که ظاهر را می سازد. رنگ ها، فاصله ها و چیدمان را CSS تعیین می کند. در نهایت JavaScript منطق رفتاری صفحه را می سازد؛ مثلا کلیک روی دکمه یا پاسخ به فرم.
اگر این سه مورد را بلد نیستی، بهتر است اول آن ها را مرور کنی. سپس به سراغ مقدمه ری اکت و بقیه فصل ها بروی. برای شروع کلی تر می توانی از خانه React کار را دنبال کنی.
تاریخچه کوتاه React.JS
طبق منبع، آخرین نسخه React.JS نسخه 19.0.0 است. این نسخه در دسامبر 2024 منتشر شده است. نسخه عمومی اولیه (0.3.0) در جولای 2013 منتشر شد.
ری اکت ابتدا در سال 2011 داخل خود فیسبوک استفاده شد. بخش Newsfeed فیسبوک اولین جایی بود که آن را جدی تست کردند. سازنده اصلی آن همان مهندس فیسبوک، جردن واک بود.
با دانستن این تاریخچه می فهمی ری اکت ابزار تازه ای نیست. سال ها در یک سرویس بزرگ مثل فیسبوک امتحان شده است. برای همین، امروز هم در پروژه های حرفه ای زیادی از آن استفاده می شود.
چطور این مقدمه ری اکت را ادامه بدهی؟
برای ادامه مسیر، اول همین مقدمه را خوب هضم کن. بعد می توانی به بخش شروع کار بروی. آنجا محیط پروژه و راه اندازی را می بینی.
- اگر لازم است، HTML، CSS و JavaScript را مرور کن.
- این صفحه مقدمه ری اکت را یک بار دیگر سریع بخوان.
- سپس به صفحه شروع کار با React برو.
نکته: اگر احساس کردی بعضی اصطلاح ها هنوز مبهم است، نگران نباش. در فصل های بعدی هرکدام را با مثال های عملی می بینی.
جمع بندی سریع
- React یک کتابخانه جاوااسکریپت برای فرانت اند است.
- ری اکت از DOM مجازی برای سرعت بیشتر استفاده می کند.
- قبل از ری اکت، HTML، CSS و JavaScript را تقویت کن.
- مقدمه ری اکت فقط شروع مسیر یادگیری تو است.
- ری اکت سال ها در فیسبوک استفاده و تست شده است.