react چیست و چرا محبوب است؟ (ری اکت) – به زبان ساده

React یا reactjs یکی از محبوب ترین فناوری های صوتی در محیط کار است. اما واکنش چیست؟ آیا این یک زبان برنامه نویسی است؟ نرم افزاره؟ یا ... اگر کمی در مورد توسعه وب می دانید یا تحصیل کرده اید، باید به فکر کسب درآمد از طریق برنامه نویسی باشید. که می تواند...
گروه: چگونه رفتار کنیم
مجموعه نوار کناری
یک مهارت پر سر و صدا که در بازار کار تقاضای زیادی دارد، توانایی پاسخگویی یا پاسخگویی است. اما چه واکنشی نشان می دهد؟ آیا این یک زبان برنامه نویسی است؟ نرم افزاره؟ یا…
اگر اطلاعات کمی در مورد برنامه نویسی وب دارید یا کمی کشف کرده اید، ممکن است به فکر کسب درآمد با برنامه نویسی باشید.
احتمالاً نام HTML، CSS و جاوا اسکریپت را شنیده اید یا همه آنها را می شناسید! اما هنوز شغل مناسبی برای این کار پیدا نکرده اید.
React js چیست؟
React js یک کتابخانه جاوا اسکریپت است که برای برنامه نویسی وب سمت کلاینت (front-end) استفاده می شود. اما اگر با کتابخانه جاوا اسکریپت یا خود جاوا اسکریپت آشنایی ندارید، این تعریف چندان کاربردی به نظر نمی رسد!
بنابراین ابتدا جاوا اسکریپت را برای درک React معرفی می کنیم.
جاوا اسکریپت چیست؟
واکنش ها چیست و چرا محبوب هستند؟ (واکنش ها) - به زبان ساده
جاوا اسکریپت را ندارید؟
جاوا اسکریپت (JavaScript یا به اختصار JS) یک زبان برنامه نویسی است که برای ایجاد یا مدیریت وب سایت های پویا استفاده می شود.
صفحه داینامیک چیست؟ صفحات شامل نمایش اسلاید ویدیویی، کنترل فرم تایپ، و…
هرگاه وارد وب‌سایتی می‌شوید که در آن عناصر در صفحه حرکت می‌کنند یا صفحه به‌طور خودکار رفرش می‌شود، جاوا اسکریپت استفاده می‌شود.
کتابخانه جاوا اسکریپت چیست؟
با توجه به توضیحات بالا، حتما متوجه شده اید که جاوا اسکریپت در اکثر وب سایت های امروزی نقش اصلی را ایفا می کند. اما بسیاری از اوقات، توسعه دهندگان وب از قسمت خاصی از کد خود چندین بار استفاده مجدد می کنند. مثلا برای ساخت اسلایدر با 10 تصویر، 10 بار یک کد مخصوص می سازند. بازنویسی این کدها مانند اختراع مجدد چرخ است!
برای این منظور از کتابخانه جاوا اسکریپت استفاده می شود تا بتوانیم بارها و بارها از همان کد استفاده کنیم. نیازی به نوشتن چندین بار این کد نیست. این باعث افزایش سرعت کدنویسی و سرعت اجرای برنامه می شود.
برگردیم به واکنش. خب، کتابخانه های جاوا اسکریپت زیادی وجود دارد و React یکی از آنهاست. اما چه چیزی آن را از بقیه متمایز می کند؟ React JS چه زمانی و در کجا استفاده می شود و چرا باید این کتابخانه را یاد بگیریم؟ در نهایت، آیا کتابخانه های جاوا اسکریپت عالی وجود دارد؟
چرا توسعه دهندگان وب از React استفاده می کنند؟
وظیفه اصلی React کمک به برنامه نویسان برای ایجاد رابط کاربری (UI) وب سایت ها است. از نظر برنامه های کاربردی وب و وب سایت ها، رابط کاربری شامل دکمه ها، فرم ها، لینک ها و متن هایی است که کاربر با آنها تعامل دارد و می بیند.
قبل از React JS، توسعه‌دهندگان مجبور بودند از Velina JavaScript یا کتابخانه‌هایی استفاده کنند که به رابط کاربری (مانند jQuery) برای توسعه UI اهمیتی نمی‌دادند. در نتیجه برنامه نویس زمان بیشتری را برای کدنویسی صرف می کند و همچنین باعث اشتباهات و خطاهای بیشتری می شود
در سال 2011، یکی از مهندسان فیس بوک، جردن واک، React JS را برای بهبود رابط کاربری توسعه داد.
React برای کاهش خطاها و افزایش سرعت کدنویسی و سهولت استفاده به برنامه نویسان معرفی شده است:
JSX
اندازه گیری مجازی
برای درک بهتر اینکه چرا باید از React استفاده کنیم، بیایید به این دو نگاه کنیم.
JSX
هسته هر وب سایت HTML است. مرورگرهای وب تگ های HTML را می خوانند و به شما نشان می دهند. در این فرآیند، مرورگرها یک مدل شیء سند (DOM) ایجاد می کنند. این یک درخت صفحه است که ترتیب آن صفحه را نشان می دهد. سپس توسعه دهندگان می توانند صفحات پویا را با استفاده از ویژگی های DOM ایجاد کنند.
React چیست؟
JSX (مخفف JavaScript eXtension) افزونه‌ای برای React است که ساخت کدهای خود را برای توسعه‌دهندگان آسان‌تر می‌کند. که شباهت زیادی به ظاهر HTML دارد. در واقع، توسعه دهندگان به جای یادگیری کدهای جدید، اکنون می توانند تقریباً همان HTML را با متن های کمی متفاوت بنویسند.
به عنوان مثال، در جاوا اسکریپت، کلمه class از قبل رزرو شده است و نمی توان از آن برای نوشتن کلاس در JSX استفاده کرد. بنابراین آنها باید از کلمه دیگر که className است استفاده کنند!
همه چیزهایی که در مورد JSX صحبت می کنیم کمک به بهبود سرعت و کارایی سایت است. اما چگونه؟ این به یکی دیگر از ویژگی های React یعنی DOM مجازی برمی گردد.
گنبد مجازی
اگر از برنامه نویسی React یا JSX استفاده نمی کنید، باید از HTML و خود DOM استفاده کنید. برای وب سایت های ایستا ساده خوب است اما برای وب سایت هایی که تعامل زیادی با کاربر دارند و همه عناصر وب سایت تغییر می کنند و حرکت می کنند مشکل زا محسوب می شود. (زیرا بیشتر ویژگی های DOM باید دائما در حال تغییر باشند)
با این حال، اگر توسعه‌دهنده‌ای از JSX برای اصلاح DOM استفاده کند، React چیز دیگری به نام Virtual DOM ایجاد می‌کند.
همانطور که از نام آن پیداست، این یک نسخه مجازی از DOM یک وب سایت است که React از آن برای مقایسه آن با نسخه اصلی استفاده می کند و می بیند که کدام قسمت از DOM اصلی باید پس از یک عمل تغییر یابد (مانند کلیک کاربر روی دکمه). محل.
من حساب می کنم:
بیایید یک مثال بزنیم. فرض کنید یک کاربر می خواهد نظری را در زیر یک پست وب سایت بنویسد و روی دکمه نظر کلیک می کند. بدون استفاده از React، کل DOM باید به روز شود تا این تغییر منعکس شود. (زمان و فرآیند درخواست مجدد صفحه کامل از سمت سرور را در نظر بگیرید!). اما از طرف دیگر React به DOM مجازی نگاه می کند، بنابراین پس از این اقدام کاربر، تنها قسمت های مربوطه تغییر می کند. در این صورت یک نظر به پست اضافه می شود که فقط در قسمت نظرات صفحه بدون رفرش کردن صفحه باید تغییر داده شود.
این اقدامات، تنها نیاز به تغییر یک قسمت از صفحه دارند که به کار کمتر و زمان کمتری برای کاربر نیاز دارد.