پیش نیازهای یادگیری ReactJS

مقدمه

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

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

پیش نیازهای ضروری برای یادگیری ReactJS

HTML و CSS

بلوک های سازنده وب HTML و CSS هستند. زبان مورد استفاده برای توصیف هر جزء از یک وب سایت در مرورگر وب شما HTML یا زبان نشانه گذاری HyperText نامیده می شود. در نتیجه، می‌توانید سرصفحه‌ها، پاراگراف‌ها، پیوندها، جاسازی‌ها و موارد دیگر را با استفاده از HTML مشخص کنید، که به مرورگر شما کمک می‌کند تا بفهمد چگونه صفحه وب را که می‌بینید سازماندهی کند.

زبان معروف به CSS یا Cascading Style Sheets چیزی است که به صفحات وب ظاهر و چیدمان می دهد. به بیان دیگر، از CSS برای ایجاد وب سایت های جذاب با فونت های زیبا، رنگ های زنده، پس زمینه های خیره کننده و حتی انتقال های زیبا و جلوه های سه بعدی استفاده می شود.

با هر دو HTML و CSS، هر توسعه‌دهنده فرانت‌اند کار خود را آغاز می‌کند. بنابراین، تا زمانی که یاد بگیرید چگونه واکنش نشان دهید، باید در کدنویسی در HTML و CSS مهارت داشته باشید.

اولین پیش نیاز برای یادگیری Reactjs شروع یادگیری HTML و CSS است. شما باید بدانید که چگونه تگ های HTML معنایی ایجاد کنید، انتخابگرهای CSS را بنویسید، از کلاس ها استفاده کنید، بازنشانی های CSS، مدل جعبه را اجرا کنید و به جعبه مرزی و flexbox، همراه با HTML و CSS برای برنامه های کاربردی فرانت اند و برنامه های وب پاسخگو بازنشانی کنید. .

مبانی جاوا اسکریپت و ES6

نسخه بعدی جاوا اسکریپت، ECMAScript 6 یا ES6، تغییرات متعدد و قابلیت های جدیدی را در خود جای داده است. کد شما به لطف ویژگی های جدید خارق العاده و نحو جدید جاوا اسکریپت ES6 مدرن تر و خواناتر می شود. با نوشتن کد کمتر می توانید کارهای بیشتری انجام دهید. ما در مورد چندین ویژگی جدید فوق‌العاده در ES6، مانند ماژول‌ها، رشته‌های الگو، تخریب کلاس و توابع فلش یاد می‌گیریم.

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

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

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

Git و CLI (رابط خط فرمان)

وقتی صحبت از فرآیند توسعه نرم افزار می شود، Git یک ابزار بسیار مهم و موثر است.

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

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

CLI (واسط خط فرمان) برای کمک به شما در انجام هر عمل در React استفاده خواهد شد. شما باید عادت به استفاده از CLI داشته باشید زیرا می توان از آن برای بسیاری از وظایف مختلف مانند نصب بسته ها، استفاده از NPM، ساخت و اجرای برنامه های React و موارد دیگر استفاده کرد.

مدیر بسته (Node + Npm)

هنگام استفاده از ReactJS، نصب بسته های نرم افزاری متعدد و کوچکتر ضروری است. بسته‌های Node کتابخانه‌های جاوا اسکریپت هستند که حاوی تمام فایل‌های لازم هستند. ماژول ها کتابخانه های جاوا اسکریپت هستند که در پروژه های Node گنجانده شده اند. در پکیج ها دو چیز وجود دارد… فایل های Js به همراه فایل های package.json. برای راه اندازی این بسته ها به یک نصب کننده بسیار خوب نیاز دارید زیرا دانلود و راه اندازی برنامه را بدون نگرانی در مورد وابستگی ها برای شما آسان می کند.

Node Package Manager (NPM) در این شرایط وارد عمل می شود و به نصب و مدیریت برنامه های جاوا اسکریپت کمک می کند. با نصب Node.js ابتدا می توانید NPM را نصب کنید. با نصب Node.js NPM به طور خودکار تنظیم می شود.

Nodejs را می توانید از سایت رسمی دانلود کنید. اینجا را کلیک کنید

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

دستورات زیر یک پروژه نمونه برای شما ایجاد می کند. برای شروع می توانید این مراحل را دنبال کنید:

npx create-react-app my-app
cd my-app
npm start

بنابراین، قبل از اینکه به React بروید، باید با تکنیک های رجیستری و نصب بسته NPM (Node Package Manager) آشنا باشید. به طور خلاصه، رجیستری NPM مکانی است که توسعه دهندگان برای دریافت نرم افزار مورد نیاز برای توسعه نرم افزار به آنجا می روند.

متغیرهای ES6 – Let و Const

قبل از ES6، توسعه دهندگان متغیرها را یا با کلمه کلیدی var یا بدون کلمه کلیدی اعلام می کردند. با این حال، همه چیز تغییر کرده است!

جاوا اسکریپت با ES6 وارد دوران فعلی شد که دو کلمه کلیدی جدید را برای تعیین متغیرها اضافه کرد: let و const. آنها در دامنه متفاوت هستند، که برای تعیین مکان و اینکه آیا یک متغیر می تواند استفاده شود استفاده می شود. متغیرها را می توان در یک تابع، در یک بلوک یا خارج از یک تابع و یک بلوک یافت.

var: سطح محدوده عملکردی – این کلمه کلیدی اجازه دسترسی به متغیرهای اعلام شده در داخل توابع را در خارج نمی دهد.

let: سطح محدوده بلوک – کلمه کلیدی let متغیرها را خارج از محدوده اعلان قابل دسترسی می کند.

const: سطح محدوده بلوک – کلمه کلیدی const شبیه متغیرهای اعلام شده با استفاده از کلمه کلیدی let است. مقدار ثابت را نمی توان با اعلام مجدد یا تخصیص مجدد تغییر داد.

Arrow Functions

arrow function یکی از ویژگی های جدید در نسخه ES6 جاوا اسکریپت است. در مقایسه با توابع معمولی، به شما امکان می دهد توابع را ساده تر بنویسید.

• کد را ساده می کند و خواندن آن را آسان تر می کند.
• بزرگترین فایده «این» زمینه‌ای، حذف ضرورت «پیوند» توابع است.
• توابع پیکان اغلب توسط همه مرورگرهای فعلی پشتیبانی می شوند.

let x = (x, y) => x * y;

Exports and Imports

ما می توانیم با استفاده از ES6 ماژول هایی را در جاوا اسکریپت ایجاد کنیم. یک ماژول می تواند شامل کلاس ها، توابع، متغیرها و اشیا باشد. با استفاده از ماژول های جاوا اسکریپت می توانید کد خود را به فایل های مختلف تقسیم کنید. در نتیجه ممکن است پایه کد به راحتی حفظ شود.

ما می توانیم از دستورات صادرات و واردات استفاده کنیم تا همه آنها را در یک فایل دیگر در دسترس قرار دهیم. صادرات و وارد کردن اعضا در یک ماژول با استفاده از کلمات کلیدی صادرات و واردات انجام می شود.

Rest and Spread Operator

عملگرهای spread و rest در جاوا اسکریپت با سه نقطه (…) نشان داده می شوند. با این حال، این دو اپراتور واقعاً یکسان نیستند. تمایز کلیدی بین عملگرهای rest و spread این است که یک آرایه جاوا اسکریپت با باقیمانده مجموعه خاصی از مقادیر ارائه شده توسط کاربر هنگام استفاده از عملگر rest پر می شود. با این حال، یک نحو گسترش یافته، یک تکرارپذیر را به عناصر خود گسترش می دهد.

تخریب ساختار شی و آرایه

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

جاوا اسکریپت از براکت‌های مربع[] برای تخریب آرایه‌ها استفاده می‌کند که به ما امکان می‌دهد نام متغیری را که به نام آرایه حاوی عنصر اختصاص داده شده است، ذخیره کنیم.

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

Template Literals

در ES6، Template Literal ویژگی‌های جدیدی را معرفی می‌کند که به شما امکان می‌دهد یک رشته با انعطاف‌پذیری بیشتری نسبت به رشته‌های پویا تولید کنید. یک رشته به طور کلی با نقل قول های تکی (‘) یا دوگانه (“) تولید می شود.

قالب literal یک رشته لفظی است که عبارات جاسازی شده را با استفاده از کاراکترهای بکتیک () فعال می کند. می توان از درون یابی رشته و رشته های چند خطی با آنها استفاده کرد. این رشته قبلا به عنوان رشته الگو شناخته می شد.

Map Filter and Reduce

سه تابع آرایه در جاوا اسکریپت وجود دارد: نقشه، کاهش و فیلتر. هر کدام یک تبدیل یا عملیات را در حین تکرار روی یک آرایه اجرا می کنند. هر کدام یک آرایه جدید در پاسخ به خروجی تابع تولید می کنند.

با استفاده از متد map() یک آرایه با اعمال یک تابع برای هر عنصر آرایه قدیمی ایجاد می شود.

متد filter() یک دستور شرطی را برای هر عنصر آرایه اعمال می کند. اگر شرط درست برگردد، یک عنصر را به آرایه خروجی هل می دهد. اگر شرط false برگردد، عناصر به آرایه خروجی فشار داده نمی شوند.

آرایه های مقادیر با استفاده از روش ()reduce به یک عدد کاهش می یابد. هر عنصر آرایه از طریق یک تابع کاهنده اجرا می شود تا مقدار خروجی تولید شود.

کلاس ها

JavaScript ES6 کلاس ها را به عنوان یک ویژگی جدید معرفی می کند. اشیا با استفاده از کلاس ها طراحی می شوند. اشیاء را می توان از کلاس ها ایجاد کرد.

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

// creation of a class
class Home {
constructor(area) {
this.area = area;
}
}
// creation of an object
const home1 = New Home(100);

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

اگرچه همه با استفاده از مولفه های کاربردی برنامه را بازنویسی نمی کنند، شما باید از اجزای کلاس نیز آگاه باشید. این به این دلیل است که اکثر برنامه ها با استفاده از اجزای کلاس توسعه داده شده اند.

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

This در مرورگر

در جاوا اسکریپت، THIS کلیدواژه یک تابع کمی متفاوت از سایر زبان ها عمل می کند. همچنین بین حالت های سخت و غیر دقیق تمایز قائل می شود.

مقدار THIS معمولاً با نحوه فراخوانی یک تابع (اجرای زمان اجرا) تعیین می شود. هنگامی که تابع فراخوانی می شود، ممکن است هر بار مقدار متفاوتی داشته باشد، زیرا نمی توان آن را با انتساب در طول اجرا تنظیم کرد. این تابع را می توان بدون توجه به نحوه فراخوانی آن با استفاده از متد ()bind تنظیم کرد.

Promises and Async در انتظار

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

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

وعده ها با روش های ناهمزمان با استفاده از Async/Await انجام می شود. کد به تازگی تغییر شکل داده شده است تا قول ها برای خواندن و استفاده ساده تر شود. برنامه نویسی ناهمزمان را با شبیه سازی بیشتر شبیه کدهای همزمان ساده می کند.

چرا شرکت ها Reactjs را ترجیح می دهند؟

1. کامپوننت ها روان تر نوشته می شوند – کارایی کد جاوا اسکریپت را می توان با JSX افزایش داد.
2. علاوه بر افزایش کارایی، تعمیر و نگهداری را در آینده ساده می کند.
3. رندر توسط آن سریعتر انجام می شود
4. ابزارهای توسعه دهنده مفیدی همراه با آن وجود دارد.
5. SPA (برنامه تک صفحه ای)
6. اتصال داده ها یک طرفه است، شبیه به جریان داده های یک طرفه.
7. سئو دوستانه

نتیجه

React JS یک کتابخانه front-end است که منبع باز است. هدف اصلی این کتابخانه طراحی رابط های کاربری برای اپلیکیشن های وب و موبایل است که سریع و جذاب باشند. پیش نیازهای ضروری ReactJS عبارتند از HTML و CSS، مبانی جاوا اسکریپت و ES6، Git و CLI (واسط خط فرمان) و Package Manager (Node + Npm). همه شما باید متغیرهای ES6، توابع پیکان، صادرات و واردات، اپراتور Rest و spread، تخریب شی و آرایه، این کلمه کلیدی در جاوا اسکریپت را بدانید. الفبای الگو یک رشته لفظی است که عبارات تعبیه شده را با استفاده از کاراکترهای بکتیک فعال می کند. سه تابع آرایه در جاوا اسکریپت وجود دارد: نقشه، کاهش و فیلتر برای انجام عملیات در حین تکرار روی یک آرایه.