آموزش رایگان ReactJS جدید 2021

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

React چیست؟ ‌

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

اما اگر بخواهیم React را از زبان وب سایت رسمی آن تعریف کنیم ویژگی های زیر را برای آن تعریف میکنیم:

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

بهترین راه یادگیری ReactJS چیست؟

مستندات رسمی ReactJS

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

دوره‎های جامع یا صفر تاصد ReactJS

دوره ها بسیار خوب هستند به چند دلیل:

• شروع کم دردسر
• تجربیات یک استاد
• لازم نیست به انگلیسی مسلط باشید

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

از طرفی تکنولوژی های مطرح مثل ReactJS همیشه سعی دارند تغییرات خود را اطلاع رسانی کنند. و بهترین جا برای اطلاع از اخبار آنها وب سایت رسمی و مستندات است.

آموزش ReactJS پیشنیازها

از کجا شروع کنم؟

• به وب‌سایت موجود اضافه کنید
• یک نرم‌افزار تک‌صفحه بسازید

Single Page App (SPA) یا نرم‌افزار تک‌صفحه چیست؟

بطور خلاصه میتوان گفت که این نرم افزار ها یک بار کل DOM را اجرا مینمایند و سپس سایر تعاملات کاربر از طریق AJAX صورت میگیرد.

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

کجا کد هامون رو اجرا کنیم؟

یک برنامه‌ ساده با ReactJS

• همیشه نرم افزار های ReactJS از یک تگ html شروع میشود. که معمولا یک تگ DIV است و دارای id خاصی است.
• بیشتر برنامه نویسان id مورد نظر را app یا root نامگزاری می کنند. اما شما مختارید تا id اون رو هرچه میخواهید بگزارید.
• یادآوری می کنم تا بعدا باید با همین id این تگ را بازیابی کرده و دراختیار ReactJS قرار دهید.
• بقیه نرم‌افزار و تعاملات با ReactJS انجام می‌شود.

برای مثال تکه کد زیر تگ ریشه با نام root است.

<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"><div id=\"root\"></div>

وارد مرحله دوم میشویم:

تگ دایو را توسط ReactJS دریافت می کنیم.

ReactDOM.render(<p>I am in webyar.co!</p>, document.getElementById(\'root\'));

ReactDOM یی از کتابخانه های پایه ای ReactJS است که دو پارامتر دریافت مینماید:

• تگ ریشه (root)
• کامپوننت ReactJS که باید درون تگ ریشه قرار گیرد

کامپوننت ReactJS چیست؟

ترکیبی از موارد زیر است که به زبان JSX نوشته شده است.

• HTML
• CSS
• جاوااسکریپت

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

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

ساخت اولین کامپوننت

ReactDOM.render(
<div> 
          <Social /> <Social /> <Social /> 
</div>
, document.getElementById(\'root\'));

برای شروع یک تکه کد را به نمایش گذاشتیم تا هر از گاهی به آن نگاهی بیندازیم. در این کد، فرض می کنیم که بخشی به نام social داریم که شبکه اجتماعی ما است.

در کد بالا ما 3 بار آن را استفاده کردیم. یعنی <Social /> یک تگ جدید است که ما آن را کامپوننت نامیدیم. این تگ جزو تگ های عمومی HTML نیست. در نتیجه، ما تگ جیدیدی خلق کردیم که در جاهای مختلف نرم افزار استفاده میکنیم.

با این کار موفق به حذف دوباره کاری شدیم. همچنین، کد خود را منظم تر نمودیم.

با استفاده از کد بالا ما 3 تگ <Social /> را در تگ ریشه تزریق نمودیم.

الان یک کامپوننت ساختیم.

کامپوننت ReactJS میتواند کاملا مستقل همه چیز را درخودش داشته باشد. مواردی مثل:

• متغیر
• ارتباط با REST API
• آرایه
• لیست
• حلقه
• شرط

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

• محتوا
• attribute
• class
• id
• tabindex
• و…

همچنین میتواند توابعی برای رویدادهای جاوا اسکریپت داشته باشد. مانند:

• کلیک
• mouseup
• mousedown
• و…

مثلا کد زیر یک دکمه که درصورت کلیک بر روی آن ، رویدادی را نمایش میدهد را به تصویر میکشد:

<button onClick={}>Click Me!</button>

یا کد زیر که پیام مورد نظر را بروز رسانی مینماید:

function App() {
  const [message, setMessage] = React.useState(\'ReactJS, is Excelent Framework.\');
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage(\'new message\')}>
        webyar.co asn a message!
      </button>
    </div>
  );
}