برنامه نویسی ری اکت را چگونه شروع کنیم؟

برنامه نویسی ری اکت یک کتابخانه جاوا اسکریپت منبع باز برای توسعه رابط های کاربر است. در سال 2013 منتشر شد و توسط فیس بوک توسعه یافت. امروزه، بسیاری از شرکت‌های درجه یک از React برای توسعه برنامه‌های خود استفاده می‌کنند و در میان آنها می‌توان فیس‌بوک، اینستاگرام و کلاینت وب واتس‌اپ (همه متعلق به فیس‌بوک) و سایرین مانند AirBnb، Uber، Netflix، Twitter، Reddit یا Paypal را پیدا کرد.

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

React چیست؟

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

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

از این نظر، React شبیه Angular است که هر برنامه React حداقل یک جزء دارد. که ما معمولاً از آن به عنوان مؤلفه “ریشه” یاد می کنیم که شامل سایر اجزای “کودک” و اینها به نوبه خود سایرین و غیره است. به این ترتیب، می توان ادعا کرد که نمای درختی از اجزا است، همانطور که در نمودار مثال زیر نشان داده شده است:

یک جزء اصلی به عنوان یک کلاس جاوا اسکریپت (ES6) پیاده سازی می شود که دارای یک حالت و یک متد رندر است:

import React from "react";
class ComponentExample extends React.Component {
  state = {
    data = ""
  }
  render () {
    return (
      <h1>Hello World!</h1>
    )
  }
}
export default ComponentExample;

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

DOM مجازی

خنده دار است نه فقط نوشتن نمای کامپوننت همراه با منطق، بلکه نوشتن کد HTML مستقیماً در فایل .js که کامپوننت در آن گنجانده شده است.

این “کد HTML” و اکنون آن را در گیومه قرار می دهم، کد HTML برای استفاده نیست، بلکه JSX است. زبانی که توسط خود فیس بوک ایجاد شده است که با نحو HTML، به یک شی جاوا اسکریپت که به عنصر DOM نگاشت می شود، کامپایل می شود.

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

با وجود اینکه از نسخه 16 یک کتابخانه بسیار سریع و کارآمد بر روی هر ماشینی است، در صورتی که نیاز به ایجاد یک برنامه وب برای دستگاه های با منابع کم داشته باشیم، امکان استفاده از جایگزینی به نام Preact وجود دارد که از همان API و الگوها پیروی می کند. نسبت به React، اما با اندازه کوچکتر.

اگر با فریم‌ورک‌های دیگری مانند Angular ، با وجود روش‌های مختلف کار، تجربه دارید، فلسفه استفاده از آن‌ها مشابه است، بنابراین بدون شک، یادگیری این کتابخانه را به شدت توصیه می‌کنم زیرا ممکن است در آینده ضروری شود.

نکات تکمیلی برنامه نویسی ری اکت

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

داده های جالبی است که React در فیس بوک برای تولید کامپوننت ها استفاده می شود و اینستاگرام به طور کامل در برنامه نویسی ری اکت نوشته شده است. علاوه بر این، در پلتفرم های دیگری مانند Netflix، PayPal، AirBnb، Uber، Reddit و Twitter نیز استفاده می شود.

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

این کتابخانه برنامه نویسی چگونه کار می کند؟

برای درک نحوه عملکرد React، ضروری است که خود را در یک زمینه قرار دهیم، زیرا هنگام یادگیری توسعه وب، دانش سه مفهوم اساسی به دست می آید:

    HTML : معناشناسی، ساختار و اطلاعات صفحه وب. یعنی اسکلت آن.

    CSS : ظاهر صفحه وب ما.

    جاوا اسکریپت – این اساساً مغز صفحه ما است. بر اساس آنچه در آن اتفاق می افتد، تعیین می کند که چه کاری انجام شود.

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

به همین دلیل، مهندسان فیس بوک تصمیم گرفتند همه چیز را در یک بسته واحد قرار دهند که آن را “کامپوننت” نامیدند. در کامپوننت ها، ساختار HTML و JS غیرقابل تفکیک هستند و با CSS قابل ترکیب هستند.

این امر اجرای یک نماد جدید را امکان پذیر کرد که توسعه برنامه های کاربردی مقیاس پذیر را کارآمدتر می کند: JSX که مخفف JavaScript XML است.

JSX چیست؟

این شامل یک فرمت از نحو جاوا اسکریپت است که به ما امکان می دهد یک شی جاوا اسکریپت را برای نگاشت یک عنصر از DOM (شیء سند) کامپایل کنیم. از طریق JSX، یک DOM مجازی (که نمایشی از DOM در حافظه است) ایجاد می شود که وزن بسیار کمی دارد و از منابع کمتری استفاده می کند.

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

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

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

DOM مجازی چگونه کار می کند؟

تصور کنید که یک شی دارید که یک مدل در اطراف یک شخص است. شما تمام ویژگی‌های مرتبطی را دارید که یک فرد می‌تواند داشته باشد، و وضعیت فعلی آن شخص را منعکس می‌کند. این اساساً همان کاری است که React با DOM انجام می دهد.

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

بنابراین هنگامی که این تغییرات اعمال می شود، دو مورد زیر رخ می دهد:

    ابتدا، React یک الگوریتم متفاوت را اجرا می کند ، که مشخص می کند چه چیزی تغییر کرده است. Y

    مرحله دوم آشتی است، جایی که DOM با نتایج  diff به روز می شود .

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

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

شما از قبل می دانید React JS چیست و چگونه کار می کند!

اکنون، هنگام انتخاب فناوری برای استفاده در FrontEnd یک پروژه جدید، با یک تصمیم ظریف و مهم روبرو هستیم که تأثیر زیادی بر آینده برنامه ما خواهد داشت. به همین دلیل، انتخاب فناوری‌هایی که توسعه را تکمیل و تسهیل می‌کنند، کلیدی است. و یکی از این ابزارها React JS است.

چرا بایداین زبان برنامه نویسی را بشناسید؟

عمدتاً به دلیل تازگی هایی که ارائه می دهد، مانند:

پیوند یک طرفه داده ها : جریان داده ها را در یک جهت ترویج می دهد، تشخیص خطاها در برنامه های پیچیده را تسهیل می کند، بارگذاری داده ها را ساده می کند و مرحله آزمایش را آسان تر می کند.

    Virtual DOM: که از نمایش کل DOM در هر بار تغییر در رابط برنامه جلوگیری می کند.

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

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

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

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

البته اساس برنامه نویسی فیس بوک، اینستاگرام و واتس اپ است. و چندین شرکت بین المللی مانند تسلا، نتفلیکس، توییتر، اوبر، والمارت، شاپیفای، AirBnb و غیره. React همچنین دارای مخزن خود در پلتفرم GitHub است، جایی که توسعه دهندگان داخلی و خارجی تغییرات پیشنهادی خود را در کد به اشتراک می گذارند.

React برای چه مواردی استفاده می شود؟

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

React عملکرد بهینه ای دارد که مسئول به روز رسانی و رندر کردن تغییرات ایجاد شده به صورت خودکار است. این کیفیت به برنامه نویسان اجازه می دهد تا کدهای خود را بدون اشکالات عمده در مدل در اشیاء برای نمایش اسناد (DOM) توسعه دهند.

همچنین به دلیل توانایی عالی در ادغام با سایر عناصر، سفارشی کردن وب سایت شما بسیار کاربردی است.

علاوه بر پیکربندی صفحات وب جدید، این کتابخانه جاوا اسکریپت برای ایجاد برنامه های کاربردی تلفن همراه که با چارچوب React Native تکمیل می شوند، استفاده می شود. و به همین ترتیب با کمک فریم ورک React 360 اپلیکیشن های واقعیت مجازی ایجاد کنید.

وقت آن است که در این موضوع متخصص باشید و حرفه خود را به عنوان یک فرانت اند با جاوا اسکریپت کامل کنید، اماده ای؟!

برای مطالعه مطالب بیشتر با ایران فریلنس همراه باشید.