طراحی سایت با ری اکت چگونه است + آموزش گام به گام React

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

امروز موضوع بحث ما در این مقاله اینه که اصلاً ری اکت چیه. همینطور اینکه استفاده از این کتابخونه تو طراحی وبسایت چه کمکی به شما میکنه. پس تا آخر مقاله همراه ما باشین تا به جواب سوالات خودتون برسین.

React چیست؟

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

مثلاً فرض کنین شما یکی از طرفدارهای بزرگ المپیک هستین و برای ردیابی امتیازات، تصمیم به طراحی وبسایت با React می‌گیرین. دیگه لازم نیست کاربرانی که از سایت شما بازدید می‌کنن، منتظر بمونن تا داده‌ها مدام بازسازی و نوسازی بشن! مؤلفه‌های React به طور کارآمدی به روز میشن تا داده‌های در حال تغییر رو در خودشون جا بدن و اونها رو به مخاطب ارائه بدن!

React برای واکنش در برابر تغییرات داده‎های ورودی از روش virtual tree reconciliation استفاده می‎کنه. در این روش هر زمان داده‌ای تغییر می‌کنه، به جای بازسازی کل درخت DOM (که کار کندی هم هست)، ری اکت تصمیم می‌گیره یه سری تغییرات در Virtual DOM انجام بده و نهایتاً هم کمترین تعداد تغییرات DOM که ضروری هستن رو اعمال می‌کنه. درخت مجازی Virtual Tree در مقابل چیزی مثل vanilla JS یا jQuery قرار می‌گیره که در اون شما مستقیماً شبکه‌های DOM رو تنظیم یا به‌روز میکنین.

تغییر سایت شما از چیزی که قبلاً بوده به فناوری‌های جدید، به معنای انتقال تدریجی سایت (صفحه به صفحه) به اون فناوری جدیده. انجام چنین کاری با برخی از فناوری‌های جدید front-end که میخوان کل صفحه رو کنترل کنن، دشواره. در واقع این فناوری‌ها مثل اون دوستی هستن که می‌خواد هر مهمونی که شما دعوت شدین، اون هم دعوت بشه و اصلاً براش مهم نیست که آیا اصلاً حضورش در چنین جایی لازمه یا نه. یعنی باید در همه قسمت‌های سایت خودتون بی‌برو برگرد ازشون استفاده کنین.

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

آیا طراحی وبسایت با ری اکت آسونه؟

وبسایت با استفاده از کامپوننت های component ری اکت و با توجه به اصل Single Responsibility به کوچکترین بیت‌های ممکن تقسیم میشه.

به عنوان مثال، در یه لیست کارها (منظورمون To-Do List هست)، سلسله مراتب مؤلفه‌ها شامل موارد زیر است:

• لیست کامل کارها
• نوشتن عنوان برای هر گروه از کارهایی که قراره انجام بشه
• اضافه کردن لاین انجام کار
• نوشتن لاین انجام کار
• وظایف فرعی که در بین کارهای انجام شده، قراره انجام بشه
• نمایش دکمه تکمیل کارها

وب سایت Reactjs.org به شما توصیه می‌کنه که هنگام ایجاد سلسله مراتبی از اجزای React و زیرمجموعه‌ها یا در واقع همون طراحی سایت با ری اکت، با طراح(های) خودتون همکاری کنین. چون که طراحان احتمالاً از قبل برای هر قطعه کوچیک از طرح، اسم دارن و اینطوری می‌تونین از عدم تشابه اسمی اجزای خودتون با اونها مطمئن بشین و به مشکل برنخورین.

مؤلفه‌های React یا React Components دقیقاً مثل سایر توابع در هر زبان برنامه نویسی دیگه‎ای کار میکنن، چون که ما همیشه مؤلفه‌ها رو با یه مقدار ورودی فراخوانی می‌کنیم (که در React ، «ویژگی» property نامیده میشه) و با یه مقدار خروجی خارجشون می‌کنیم (یک بخش UI در React). همچنین، اجزای Component اون تابع، قابل استفاده مجدد هستن و می‌تونن کامپوننت دیگه‌ای رو هم در خودشون جای بدن. پس در ری اکت و سایر زبان های برنامه نویسی، همچین مواردی مشابه هم هستن.

نحوه طراحی سایت با ری اکت

خب حالا وقتشه که در مورد طراحی سایت با این کتابخونه محبوب جاوا اسکریپت صحبت کنیم:

سال‌ها پیش توسعه وب کار خیلی ساده‌ای بود. شما می‌تونستین ویرایشگر متن رو روشن کنین و یه وبسایتی ایجاد کنین که به این شکل باشه:

            
    
        
    
    
        Welcome to my web page.
    



                            

البته اصلاً نگران نباشین! اگه قبلاً هرگز برنامه نویسی نکردین و موارد بالا برای شما ترسناک به نظر میان، یه بار دیگه یه نگاهی روی اونها بندازین، خواهید دید که این <برچسب ها>ی مختلف هستن که ساختار محتوای شما رو ارائه میدن. برخی از برچسب‌ها مثل Welcome to my web page.

خیلی ساده بود، درسته؟ اما این مثال یه چیز سرگرم کننده و جذاب نیست. چون تمام کاری که این کد انجام میده اینه که هنگام بارگذاری صفحه، نمایش داده میشه و اصلاً تعاملی نیست. ولی خواسته شما چی بود؟ این که روی کدی کلیک کنین و با اون تعامل داشته باشین! پس برای این کار به جاوا اسکریپتی نیاز دارین که به اقداماتی که در صفحه انجام میدین پاسخ بده.

در اینجا توابع و رویدادها وارد عمل میشن. یه تابع (function) راهی برای نامگذاری بلوک کد است و یک رویداد (event) اون چیزیه که برای صفحه شما اتفاق میفته. مثل کلیک، پیمایش، ضربه زدن و غیره. در این حالت، ما ازتون می‌خوایم که یه رویداد کلیک از تابعی به نام sayHello رو اجرا کنین:

    
        
        
    
    
        Click Me!
    


    
        
        
    
        Click Me!
    

Co">
            
    
        
        
    
    
        

    
        
        
    
    
        Click Me!
    


    
        
        
    
        Click Me!
    

Co">
    


    
        
        
    
    
        

    
        
        
    
    
        Click Me!
    


    
        
        
    
        Click Me!
    

Co">
    

Co
                            

تبریک میگیم، شما حالا یه توسعه دهنده وب هستین! چون که در واقع تونستین برخی از عناصر بنیادی JavaScript رو یاد بگیرین و این کار اونقدر ساده و سرگرم کننده است که هرکسی می‌تونه این روش رو برای طراحی سایت خودش انتخاب کنه.

ری اکت رو وارد عمل کنین!

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

            import * as React from "react";
 
export function Page() {
    function sayHello() {
        alert("Hello!");
    }
 
    return 

;
}

                            

شاید به نظرتون این کد هم مثل کد قبلی باشه و به نظرتون هیچ فرقی با اون نداشته باشه، بلکه فقط ساده شده باشه. خب پس اینجا دقیقاً چی تغییر کرده؟

• در React، شما HTML خودتون رو در داخل JavaScript خودتون می‌نویسین.
• صفحه شما هم اکنون یه function است.
• در اینجا عملکرد sayHello با مورد قبلی دقیقاً یکسانه، اما دیگه نیازی به برچسب ندارین!
• سرانجام،

بنابراین، می‌تونیم همین‌جا کار رو متوقف کنیم و بهتون بگیم که طراحی سایت با React تماماً معادل استفاده از برچسب‌های کمتر و سرعت بخشیدن به گردش کار شماست. اما این دلیل اون همه خوشحالی و رضایت برای استفاده از ری اکت نیست! مسئله فقط استفاده از برچسب‌های کمتر نیست، بلکه شما می‌تونین برچسب‌های خودتون رو بسازین (به برچسب‌هایی که در React ایجاد می‌کنین کامپوننت Component گفته میشه) و این اون چیزیه که این کتابخونه رو از بقیه زبان ها جدا می‌کنه.

React Component

اگه از طراحی وب خوشتون میاد، احتمالاً برچسب‌های رایج مانند div ،p ،span و غیره رو از قبل راجع بهشون می‌دونین و اونها رو دوست دارین. برای اهداف این تمرین، فرض کنین در حال ساخت یه Navigation وبسایت معمولی در HTML هستین. چیزی که اینجا به نظر می‌رسه شبیه زیر است:

Home

Help

Docs

Mail

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

بنابراین نظرتون چیه یه روش دیگه رو امتحان کنیم؟! یه لحظه تصور کنین که در بالای همه برچسب‌های موجود، می‌تونین برچسب‌های جدیدی رو ایجاد کنین و حالا اگه شما قادر به انجام هر نوع مانوری در طراحی سایت بودین، آیا دوست نداشتین که منوی خودتون رو بیشتر شبیه مورد زیر کنین؟

این اون چیزیه که می‌تونیم بگیم خیلی قشنگ‌تر و تمیزتر از مورد قبلیه و البته خیلی هم کارآمدتره! شما الان نسخه HTML خودتون رو ایجاد کردین، یعنی دیگه مؤلفه‌هایی دارین که فقط برای وب سایتی که در اون کار می‌کنین ساخته شدن. تقریباً می‌تونین اجزای خودتون رو به عنوان الگوهای ریزی تصور کنین که از طریق برچسب‌ها کاملاً با HTML ترکیب شدن.

مطمئنیم که شما تاحالا حدس زدین که این دقیقاً همون چیزیه که طراحی وبسایت با React به شما امکان میده انجام بدین. بیایین به نسخه دقیق موارد بالا در React نگاهی بیندازیم:

            function MenuItem(props) {
    return (

{props.name}

    );
}
 
function Menu() {
    return (

    );
}

                            

با یه تعدادی از عناصر JavaScript-y مانند function و return، این مورد کاملاً ساده به نظر می‌رسه. اما به طور کلی بدونین که شما ابتدا MenuItem رو تعریف می‌کنین و سپس اون رو هر چند بار که می‌خواین در منو به عنوان یه برچسب HTML مناسب استفاده می‌کنین. خیلی باحاله، درسته؟

توابع رو از قسمت‌های بالاتر یادتون میاد؟ توابع، راهی برای تعریف بلوک‌های کوچک کد در JavaScript با ورودی و خروجی است، دقیقاً مثل یه فرمول ریاضی. تعدادی عدد رو در اون قرار می‌دین و یه عدد دیگه‌ای به شما تحویل داده می‌شه. این دقیقاً همون کاریه که return نیز در اینجا انجام میده.

در مثال بالا، نه تنها توابع فقط برای تعریف قطعه‌ای از کد استفاده می‌شن، بلکه برای نام بردن اونها نیز کاربرد دارن و این نام توسط React به طور خودکار به برچسب تبدیل میشه.بعد می‌تونین در هر قسمت دیگه از پروژه خودتون، دقیقاً مانند برچسب MenuItem در بالا، از اون استفاده کنین. اساساً، شما می‌تونین یه جزء (component React) رو هم به عنوان یه برچسب و هم به عنوان یه تابع در نظر بگیرین. در واقع هر سه اونها مثل هم هستن! شایان ذکره که هرچه بیشتر در این باره عمیق بشین و جستجو کنین، این مسئله پیچیده‌تر می‌شه، اما در حال حاضر، این امر به شما کمک می‌کنه یه سری از اصول اساسی رو درک کنین.

آخرین قسمت، ورودیِ اجزای شماست. در این حالت، این نام برای MenuItem است. به ورودی‌های موجود در React می‌گیم props که همون فرم کوتاه شده کلمه properties هست. اگه می‌خواین از نام prop استفاده کنین، می‌تونین به سادگی props.name رو بنویسین (همونطوری که ما در مثال نوشتیم). شما آزادین هر اسمی رو که دوست دارین انتخاب کنین و هر چند باری که دلتون می‌خواد ازش استفاده کنین. برای استفاده از ورودی ها، فقط اسم Property برچسب رو تنظیم می‌کنین همونطور که برای هر کار دیگه‌ای در HTML انجام میدین: .

شما چه کار دیگه‌ای می‌تونین انجام بدین؟

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

            
    
        
        
    
    
        Welcome to our site!

    
    
        Cloud
        Tools
        Devices
    
    


                            

شما میتونین تمام اجزای خودتون رو به یه سیستم تبدیل کنین، اونها رو مستند کنین و با تیم خودتون به اشتراک بذارین (یعنی هر جایی که هر کسی که HTML میدونه، بتونه از اونها استفاده کنه). اگه یه کامپوننت واحد رو تغییر بدین، هر قسمت از پروژه شما به طور خودکار به روز میشه.

و البته، شما می‌تونین استایل اجزای خودتون رو هم مشخص کنین و مثلاً اونها رو تعاملی کنین. هر چیزی رو که اضافه می‌کنین در درون مؤلفه باقی خواهد موند، بنابراین همیشه جواب میده و دیگه مهم نیست که کجا ازش استفاده کردین. اگه CSS رو می‌شناسین، به راحتی میتونین استایل Properties رو تشخیص بدین، اگرچه React از سبک camelCase برای اونها استفاده میکنه.

            function Button(props) {
    const buttonStyle = {
        padding: "12px 30px",
        backgroundColor: "#05F",
        borderRadius: 6
    };
    const buttonTextStyle = { color: "white" };
  
    function sayHello() {
        alert(`Hello from ${props.title}`);
    }
  
    return (

    );
}

                            

طراحی سایت با ری اکت در مقابل چارچوب‌های دیگه

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

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

React تنها یک راه برای اجرای ایده‌های شماست اما یه راه خیلی خیلی محبوب و دوست داشتنی. روش‌های مختلف دیگه‌ای مثل Vue ،Angular و غیره هم وجود داره، اما همه اونها به سمت همون روش تفکر ساختار یافته حرکت می‌کنن.

وقتی که روی React تسلط پیدا کردین، جستجوی تفاوت‌های ظریف اما هوشمندانه بین چارچوب‌های مختلف و انتخاب موردی که برای شما مناسبه، دیگه کار چندان سختی نیست ?