5 مهارتی که باید پیش از یادگرفتن React JS بیاموزید

اگر درحال یادگیری React هستید و در درک مفاهیم آن دچار مشکل شده‌اید به احتمال زیاد در پروسه یادگیری‌تان مرتکب اشتباهاتی شده‌اید.

بدون شک ReactJS یکی از پرطرفدارترین کتابخانه‌ها در میان دولوپرهای فرانت‌اند است که روزبه‌روز بر محبوبیت آن افزوده می‌شود.

وب‌سایتی که با ReactJS توسعه پیدا می‌کند زیبا به نظر می‌رسد و دولوپرهای تازه‌کار را به سرعت مجذوب خود می‌کند.

اما اشتباه رایجی که بسیاری از توسعه دهندگان و حتی افراد با تجربه مرتکب آن می‌شوند این است که بدون مقدمه و فراگیری پیش‌نیازها به سراغ یادگیری ReactJS (یا هر کتابخانه و فریمورک دیگری) می‌روند.

اگر با میان‌بر زدن کار را جلو ببرید هنگام یادگیری React و بعدها هنگام مصاحبه شغلی با مشکلات زیادی روبه‌رو خواهید شد.

درصورتی که پیش‌زمینه خوبی در جاوا اسکریپت نداشته باشید و در طول مصاحبه سوال‌هایی مرتبط با Package manager ،Babel ،JSX ،ES6 یا مفاهیم پایه‌ای جاوا اسکریپت مطرح شود، توانایی پاسخ گویی نخواهید داشت.

در ادامه شما را با مفاهیم و پیش‌نیازهایی که قبل از شروع به یادگیری React باید فرا بگیرید آشنا خواهیم کرد.

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

HTML و CSS

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

پس قبل از کدنویسی در react باید نسبت به این دو زبان تسلط کافی را داشته باشید.

باید بدانید چطور در HTML از تگ‌های معنادار و ویژگی کلاس، و در CSS از انتخاب کننده‌ها (selectors) استفاده کنید.

باید با ریست کردن (CSS reset)، مفاهیم مدل جعبه‌ای (box model)، تغییر به border-box و استفاده از flexbox در CSS آشنا باشید.

باید بتوانید با استفاده از media queries وب اپلیکیشنی ریسپانسیو کدنویسی کنید.

JSX و Babel

در react با JSX یا Javascript XML که به HTML شباهت دارد، کار خواهید کرد.

آن را می‌توانید جاوا اسکریپت با طعم HTML در نظر بگیرید.

JSX راحت‌ترین روش برای اضافه کردن HTML درون کدهای جاوا اسکریپت و به نوعی افزونه‌ای برای سینتکس جاوا اسکریپت است.

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

const h1 = <h1>Hello Programmers</h1>;

1	const h1 = <h1>Hello Programmers</h1>;

کد بالا در نگاه اول ممکن است کمی گیج کننده باشد. جاوا اسکریپت است یا HTML؟ یا حتی زبانی جدید؟

اگر این کد را در یک فایل HTML ذخیره و آن را اجرا کنید هرچند حاوی تگ HTML هست اما چیزی مشاهده نخواهید کرد.

JSX با گسترش دادن سینتکس جاوا اسکریپت کاری می‌کند که XML/HTML و کدهای جاوا اسکریپت باهم به نوعی هم‌زیستی دست پیدا کنند. به مثال‌های زیر دقت کنید.

var MyComponent = React.createClass({ 
  
   render :function () { 
  
     return(   
  
       <h2>Hello Programmers!</h2> 
  
     ); 
  
   } 
  
}); 
  
ReactDOM.render(<MyComponent/>, document.getElementById('content'));

var MyComponent = React.createClass({

render :function () {

return(

<h2>Hello Programmers!</h2>

);

}

});

ReactDOM.render(<MyComponent/>, document.getElementById('content'));

مورد دیگری که باید درباره آن بدانید Babel است.

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

Babel ویژگی‌های جدیدترین نسخه جاوا اسکریپت یعنی ECMAScript 2015+ یا ES6+ را به جاوا اسکریپت معمولی (ES5) اضافه می‌کند.

قبل از کار با React حتما نسبت به اینکه با دو مفهوم JSX و Babel آشنایی کامل دارید اطمینان حاصل کنید.

مفاهیم پایه جاوا اسکریپت و ES6

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

این مورد در طول مصاحبه‌های شغلی هم نسبت به react اولویت بالاتری دارد.

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

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

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

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

به علاوه اینکه در مصاحبه‌های شغلی اول کار در زمینه مباحث بنیادی جاوا اسکریپت آزموده می‌شوید و بعد React.

با متغییرها شروع کنید: number ،Boolean ،string و دیگر مباحث ابتدایی را به صورت کامل یاد بگیرید. با استفاده از همین‌ها ماشین حسابی بسازید تا با عملکردشان آشنا شوید.
یادگیری مواردی از جمله عملگرها، دستورات شرطی، فانکشن‌ها، حلقه‌ها، کلمات کلیدی جاوا اسکریپت، آرایه‌ها، اشیا و… ضروری است.
مباحثی مثل Event handling ،DOM manipulation و عملکرد متفاوت کلیدواژه this در شرایط مختلف که از جمله مباحث گیج کننده برای اکثر دولوپرها به حساب می‌آیند.
توابع مرتبه بالاتر، arrow function، تابع callback، نحوه عملکرد state و ()setState، کلاس و سازنده کلاس (constructor)، استفاده از extends در وراثت، متدهای map ،reduce و filter، کار با promises، مفهوم closures، تفاوت‌های const ،let و var همه و همه جزو مفاهیم بسیار مهمی هستند که یادگیری‌شان باید در اولویت قرار گیرد.

مدیریت پکیج‌های Node با NPM

در شروع کار با ReactJS نیاز خواهید داشت تا تعداد زیادی پکیج‌های کوچک‌تر مورد نیاز React را نصب کنید.

در جاوا اسکریپت، هر پکیج شامل تمام فایل‌های مورد نیاز یک ماژول است.

ماژول‌ها همان کتابخانه‌های جاوا اسکریپت هستند که می‌توانیم به پروژه‌مان در Node اضافه کنیم.

پکیج‌ها شامل فایل‌های package.json به‌علاوه فایل‌ جاوا اسکریپت هستند.

ما برای دانلود و نصب این پکیج‌ها به چیزی به نام Package Manager نیاز داریم تا پکیج مورد نظرمان را به صورت خورکار و به همراه تمامی پیش ‌نیازهایش برای‌مان نصب کند.

NPM یا Node package manager همان چیزیست که به دنبالش هستیم البته NodeJs را از قبل باید نصب کرده باشید.

NPM هم با نصب NodeJs به صورت خودکار نصب می‌شود.

بنابراین پیش از صعود به سمت React اول باید نحوه استفاده از NPM registry و چگونگی نصب پکیج‌ها با استفاده از آن را بیاموزید.

NPM registry جایی است که ماژول‌ها در آنجا به ثبت می‌رسند.

در واقع همه می‌توانند فایل‌هایشان (ماژول‌ها یا پکیج‌ها) را در آن ثبت کنند.

خلاصه NPM registry جاییست که دولوپرها کتابخانه‌های مورد نیازشان را از آن‌جا دریافت می‌کنند.

مثلا فرض بگیریم که شما کدی به زبان جاوا اسکریپت نوشتید که خیلی کاربردی است و قصد دارید این ماژول کاربردی‌تان را با بقیه هم به اشتراک بگذارید.

با ثبت کردن فایل‌تان در NPM registry دقیقا به همین خواسته‌تان می‌رسید و دیگران با مراجعه به NPM web registry می‌توانند به راحتی آن را دریافت و استفاده کنند.

گیت (Git) و خط فرمان (CLI)

گیت (Git) یکی دیگر از مهارت‌های مورد نیاز دولوپرهاست که برای نگه‌داری پروژه‌هایشان در پلتفرم‌هایی نظیر گیت‌هاب، بیت‌باکت و گیت‌لب استفاده می‌شود.

Git برای دولوپرهایی که بر روی یک پروژه کار می‌کنند امکان همکاری و نگه‌داری نسخه‌های مختلف پروژه را فراهم می‌کند.

پس آگاهی داشتن از نحوه کار Git و پلتفرم‌های نگه‌داری کد (Code hosting platforms) ضروری است.

توسعه دهندگان از دستورات خاصی برای ارتباط با Git استفاده می‌کنند که مهم‌ترین‌شان push ،pull ،add ،commit و… هستند که باید یاد بگیرید.

مباحث دیگری که باید در این زمینه فرابگیرید شامل ادغام (merging)، ایجاد شاخه (branching) و مدیریت تعارض در ادغام (handling merging conflicts) هستند.

همه کارهایی که در React انجام خواهید داد با کمک خط فرمان (CLI) صورت می‌گیرد.

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

مثال زیر نحوه ایجاد یک اپلیکیشن React با استفاده از پاورشل ویندوز را نشان می‌دهد.

منبع

Top 5 Skills You Must Know Before You Learn ReactJS – geeksforgeeks.org

React