React.JS برای آدمک های مبتدی، با استفاده از کتابخانه هنگام نوشتن روبات های معامله گر

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

کتابخانه جاوا اسکریپت – React: چیست

React.JS کتابخانه ای از زبان برنامه نویسی محبوب
جاوا اسکریپت است که توسط شبکه اجتماعی آنلاین فیس بوک به منظور بهبود و ساده سازی روند توسعه پوسته خارجی سایت ها و برنامه ها – رابطی که کاربر با آن در تعامل است – تشکیل شده است. ویژگی اصلی کتابخانه اجزا و حالت ها است. کامپوننت بخشی از یک مجموعه دیجیتالی است که مسئول ظاهر قسمت خاصی از سیستم در حال طراحی است.

توجه داشته باشید! چنین قطعاتی را می توان تودرتو کرد.

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

بنابراین، انعطاف پذیری React.JS بیان می شود – مؤلفه رابط یک بار نوشته می شود و پس از آن همه حالت های ممکن به آن داده می شود.

چرا به کتابخانه React نیاز است؟

React.JS یکی از گزینه های ممکن برای نوشتن کد JS یا HTML با فرمت مناسب، ایجاد کپی از آن و بصری کردن آن است. اجزای اینجا به یک زبان سیستم خاص – JSX نوشته شده اند که شامل عناصر زبان برنامه نویسی جاوا اسکریپت و زبان نشانه گذاری استاندارد HTML است.
کد نوشته شده در JSX کاملاً خاص است. همچنین مهم است که مرورگر وب نیازی به درک این زبان سیستم نداشته باشد – کد React.JS به JS منتقل می شود که هر مرورگری بدون مشکل آن را درک می کند. برای انجام این کار، آنچه در کتابخانه ایجاد می‌شود از طریق کامپایلرهای تخصصی (یکی از محبوب‌ترین‌های امروز Babel js) منتقل می‌شود که کدهای زبان‌های برنامه‌نویسی کمتر شناخته شده را به نمایش‌های جاوا اسکریپت تبدیل می‌کنند.
در ابتدا ممکن است به نظر برسد که سیستم استفاده به شدت غیرمنطقی است، اما پس از مدتی به آن عادت می کنید و متوجه می شوید که چرا مکانیزم به این شکل طراحی شده است. کتابخانه جاوا اسکریپت چندین مزیت قوی دارد:

• زبان برنامه نویسی سیستم نسبت به جاوا اسکریپت شناخته شده راحت تر قابل تشخیص است و در نتیجه پشتیبانی از کد و رفع خطاهای روی آن چندین برابر زمان کمتری می برد (سرعت نوشتن کدها و برنامه های جدید به همین نسبت افزایش می یابد).
• یک سیستم راحت و کاربردی از عناصر تشکیل دهنده در اینجا ساخته شده است – قسمت های تکراری کد که در مراحل مختلف نوشتن و در برنامه های مختلف استفاده می شود و همچنین بسته به زمینه تغییر می کند.
• هر عنصر تشکیل دهنده فقط تابع حالت خود است ، بنابراین اگر در عمل به طور ناگهانی خطایی در کار آن پیدا شود، اصلاح کاستی های کد آسان تر است. لحظه‌های نادرست به سطح شناور می‌شوند: عنصری که به درستی کار می‌کند در این حالت به کار خود ادامه می‌دهد، مگر اینکه، البته، حالت اشتباه در رابطه با آن استفاده شود.

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

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

دوره اساسی React JS از A تا Z: https://youtu.be/GNrdg3PzpJQ

آشنایی برای مبتدیان: مفاهیم اساسی

سلام دنیا!

هنگام دسترسی به صفحه اول کتابخانه، کاربر یک عنوان خوشامدگویی را به عنوان مثال کوچک می بیند – “سلام دنیا!”.

مبانی زبان سیستم JSX

JSX یک زبان برنامه نویسی سیستمی است که پسوندی از جاوا اسکریپت شناخته شده است. این شامل ترکیبی از دو زبان – برنامه نویسی JA و زبان نشانه گذاری استاندارد HTML است. توسعه‌دهندگان از آن برای تنظیم مفهوم استفاده می‌کنند تا React را نشان دهد که رابط کاربری دقیقاً چگونه باید باشد. JSX “قطعات” کتابخانه را ایجاد می کند.

JSX چیست؟

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

تشکیل عبارات در زبان سیستم

JSX به شما این امکان را می دهد که از هر عبارت جاوا اسکریپتی که به خوبی نوشته شده است در داخل بریس های فرفری در یک فرآیند استفاده کنید.

JSX همچنین یک عبارت است هنگامی که کد منبع بایت کدگذاری می شود، هر عبارت JSX به یک فراخوانی تابع JS استاندارد تبدیل می شود که دسته جاوا اسکریپت را هدف قرار می دهد. از اینجا می توان فهمید که پسوند سیستم زبان برنامه نویسی رسمی می تواند در داخل دفترچه راهنمای if و برای دوره ها استفاده شود.

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

رندر جزئیات

جزئیات بسیاری از بلوک های سازنده کوچکی هستند که برنامه های React را تشکیل می دهند.
جزئیات تصویری است که توسعه دهنده می خواهد در انتها روی مانیتور ببیند. در مقایسه با عناصر Document Object Model، عناصر کتابخانه ساده هستند و منابع زیادی را اشغال نمی کنند. عناصر تشکیل دهنده اجزا هستند.

اجزاء و لوازم جانبی

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

انواع اجزاء: کاربردی و کلاس

ساده ترین کار این است که به یک جزء کتابخانه به عنوان یک تابع مراجعه کنید.
کامپوننت ها همچنین می توانند در قالب کلاس ES6 نمایش داده شوند.

جالب هست! کتابخانه React این دو نوع مؤلفه را مشابه تعریف می کند.

لوازم جانبی

Props اشیاء تغییرناپذیری هستند که فقط خواندنی هستند. بنابراین، یک کامپوننت، صرف نظر از اینکه متعلق به چه نوع است، نباید چیزی بر روی پایه خود بنویسد.

حالت و چرخه زندگی

ابتدا، بیایید نحوه اعمال درست حالت در محل کار را دریابیم. سه نکته مهم در مورد وضعیت جزء وجود دارد:

1. حالت را مستقیماً تغییر ندهید، از روش setState استفاده کنید. به یاد داشته باشید که تنها ناحیه ای که می توانید وضعیت را مستقیماً تغییر دهید سازنده است.
2. به روز رسانی های حالت ممکن است همزمان نباشند.
3. جریان اطلاعات یک جهت دارد. در ساخت کامپوننت، هیچ یک از آنها نمی دانند که آیا حالت به جزء دیگر اختصاص داده شده است یا خیر. مهم نیست که چگونه این یا آن عنصر عملکردی مستقل شکل گرفته است – با استفاده از یک ابزار کاربردی یا طبقه بندی. به این جریان داده «پایین دست» می گویند. یک حالت همیشه برای برخی از عناصر تعریف می‌شود و تداعی‌های ساختاری این حالت فقط می‌تواند بر بخش‌هایی تأثیر بگذارد که در ترتیب سلسله مراتبی «پایین‌تر» قرار دارند.

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

تحلیل رویداد

فرآیند تجزیه رویدادها در مؤلفه‌های React شبیه به مدیریت رویدادها در عناصر مدل شی سند است. با این حال، چندین ویژگی وجود دارد که آنها را از یکدیگر متمایز می کند:

1. رویدادها در کتابخانه جاوا اسکریپت به سبکی متفاوت از استاندارد نامگذاری می شوند.
2. با استفاده از زبان برنامه نویسی توسعه یافته سیستم، توسعه دهنده به جای رشته، یک زیربرنامه را به عنوان کنترل کننده رویداد ارسال می کند.

ارائه شرطی عناصر

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

تغییر مولفه ها

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

فهرست ها و کلیدها

این بخش شامل چندین جزء است:

1. ترسیم عناصر متعدد کاربر می تواند مجموعه ای از عناصر را تشکیل داده و با استفاده از بریس های فرفری در زبان برنامه نویسی سیستم جاسازی کند.
2. فهرست ابتدایی عناصر اغلب، کاربران و توسعه دهندگان لیست ها را مستقیماً در یک بخش تنظیم می کنند.

کلیدها

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

تشکیل می دهد

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

موارد مدیریت شده

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

ظهور دولت

State Lifting یک الگوی استاندارد است که هر توسعه دهنده باید از آن آگاه باشد و بتواند در فرآیند کار از آن استفاده کند. استفاده از آن الگوهای مدیریت دولتی پیچیده و معمولاً بی فایده را از بین می برد.

چرا کنترل ظهور دولت اینقدر ضروری است؟

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

ترکیب در مقابل وراثت

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

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

در صورتی که برای بار دوم یا سومین بار نیاز به استفاده از عملکرد بدون ظاهر برای کار با کامپوننت دارید، آن را در یک ماژول JS جداگانه بیرون بکشید. آن را به یک جزء منتقل کنید و از تابع تولید شده بدون گسترش بیشتر استفاده کنید. React یا Vue یا Angular، چه چیزی را انتخاب کنید: https://youtu.be/Nm8GpLCAgwk

اصول React.js

کل فلسفه کتابخانه جاوا اسکریپت در راهنمای React پنهان شده است. به نظر می رسد که این طولانی است و اهمیت چندانی ندارد، با این حال، بسیاری از کاربران ادعا می کنند که پس از خواندن همه چیز سر جای خود قرار گرفت. اسناد بسیار قدیمی هستند، اما هنوز هم ارزش و ارتباط زیادی دارند –
https://ru.reactjs.org/docs/thinking-in-react.html . آموزش React js https://ru.reactjs.org/tutorial/tutorial.html

عملکرد کتابخانه React.js

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

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

استفاده عملی

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

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

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

GitHub و React.js

GitHub پلتفرمی است که تمامی نسخه های پروژه ها را میزبانی می کند. کاربر میزبانی را متصل می کند، مراحل ثبت نام را در وب سایت رسمی GitHub انجام می دهد و سپس یک مخزن آنلاین ایجاد می کند که در آن همه فایل ها را از Git منتقل می کند.
Git امروزه محبوب ترین و مرتبط ترین سرویس کنترل نسخه پروژه است و GitHub یک مخزن کد از راه دور است.

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

مستندات

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

توجه داشته باشید! خواندن دفترچه راهنما را فراموش نکنید. حداقل نگاهی بیندازید – در حال حاضر بیشتر چیزهایی که غیرقابل درک به نظر می رسید در جای خود قرار می گیرند.

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