آموزش ری اکت رایگان : یادگیری React ۲۰۱۹
ری اکت (React) کتابخانه‌ی ، با روش‌های بسیار جدیدی برای ساخت تجربه‌های فرانت-اند (Front-end Experience) مختلف مثل وب‌سایت‌ها، اپلیکیشن‌های موبایل و غیره آشنا می‌شوید. با معرفی ری اکت، تغییرات بسیاری صورت گرفت و حالا زمانی مناسب برای ملحق شدن به ارتش ری اکت است. ری اکت (React) چیست؟ این امکان را برایمان فراهم می‌کند که به صورت منطقی درباره‌ی سایت‌ها و اپلیکیشن‌هایمان فکر کنیم. ری اکت هم‌چنین روشی جالب و سریع برای ساخت پروژه‌هایی است که در خواب می‌بینیم. ری اکت به ما این اجازه را می‌دهد که UIهای تعاملی را به صورت اعلانی (Declarative) بنویسیم. یکی از بزرگ‌ترین توانایی‌های React این است که می‌تواند با هر بار تغییر داده‌هایمان، به صورت خودکار UIمان را نیز به روز‌رسانی کند. در این مقاله‌ی پایه، تمامی ویژگی‌های جذاب و هیجان‌انگیز ری اکت را بررسی می‌کنیم. این مقاله برای هر کسی، که می‌خواهد React را از پایه و به روشی مناسب و آرام یاد بگیرد، مناسب است. به خواندن این مقاله ادامه دهید و به این ترتیب، تمامی دانش لازم را برای استفاده از React به‌دست آورید. دانش پیشنهادی برای یادگیری ری اکت React (چیزهایی که باید بدانید) برای نوشتن برنامه‌های ری اکت به اطلاعات پایه‌ی کمی نیاز دارید. این یکی از بهترین مزایای استفاده از ری اکت است! اگر پس‌زمینه‌ی HTML/CSS/JS دارید، راه‌اندازی و استفاده از React برایتان بسیار آسان می‌شود. در این مقاله‌ی پایه، بیایید فقط ببینیم که چطور می‌توانیم از React استفاده کنیم. بدون معطلی از React استفاده کنید روش‌های بسیاری برای استفاده از ری اکت در پروژه‌مان در اختیار داریم. این نیز یکی از مزایای استفاده از React است که خیلی خود را درگیر چگونگی استفاده از آن نمی‌کند. دو روش اصلی استفاده از ری اکت به صورت زیر است: از ری اکت برای نوشتن یک اپلیکیشن کامل تک صفحه‌ای (Single Page App (SPA)) استفاده کنید. برای اینکه در این مقاله بتوانیم بدون معطلی از ری اکت استفاده کنیم، از مثل یک زمین‌بازی آنلاین برای برنامه‌نویسی است که در آن می‌توانید خیلی ساده و در مرورگر خودتان با کدهای HTML/CSS/JS بازی کنید. در این مقاله به سراغ جزئیات نصب React نمی‌رویم و از همین ابزار آنلاین استفاده می‌کنیم. برای این مقاله ایجاد کرده‌ایم. وقتی این CodePen را باز کنید، صفحه‌ی زیر را می‌بینید: برای درک بیشتر، می‌خواهیم تمام کارهایی را، که برای ساخت این React Starter CodePen انجام دادیم، توضیح دهیم. اسکریپت‌های (script) ری اکت و react-dom را اضافه کنید (روی آیکون تنظیمات در ادیتور JS کلیک کنید) بقیه‌ی چیزهایی، که ری اکت به آنها برای کار در یک مرورگر نیاز دارد، در دلیل جدا شدن این‌ها از هم این است که می‌توانیم از React در فضاهای دیگری به جز یک مررورگر استفاده کنیم. ری اکت نیتیو (React Native) آموزش ری اکت نیتیو برای برنامه نویسی اپلیکیشن iOS با جاوا اسکریپت خب، بیایید ادامه دهیم و کم‌کم از React استفاده کنیم. ری اکت یک HTML div را می‌گیرد و جاوا اسکریپت را در آن قرار می‌دهد. React تمام کدهای جاوا اسکریپت را در همین بخش از سایت قرار می‌دهد. اول باید یک HTML div بسازیم و بعد می‌توانیم از ری اکت استفاده کنیم. در بخش HTML صفحه‌ی CodePen کد زیر را اضافه کنید: این تمام کدی است که در فابل HTML به آن نیاز داریم! المنت HTML که ری اکت در آن چیزهایی را قرار می‌دهد. بیایید کمی داده برداریم و ببنیم چطور می‌توانیم آن را به اپلیکیشن ری اکت‌مان اضافه کنیم. حالا می‌توانیم این متغیر را در تا اینجا یک المنت ری اکت ساختیم و آن را در سایت‌مان نمایش دادیم. کامپوننت‌ها یکی از ابزارهای React هستند که از المنت‌هایی مثل اگر بخواهیم ساده بگوییم، یک کامپوننت از اجزای زیر تشکیل شده است: اگر سایت‌ها و اپلیکیشن‌ها را به کامپوننت‌ها تقسیم کنیم، آن وقت می‌توانیم UIمان را به بخش‌های مختلف تقسیم کنیم و به صورت جداگانه با آنها کار کنیم. با ری اکت ساختن یک کامپوننت به سادگی ساخت یک تابع جاوااسکریپت (Function) است. در ادامه می‌خواهیم با هم یک کامپوننت React بسازیم. این کار خیلی ساده است! اولین کامپوننت React خود را بسازید حالا شاید با خود فکر کنید که مثال آخر به چه دردی می‌خورد؟ حالا یک متغیر داریم و آن را با استفاده از ری اکت نمایش دادیم. خب، چرا این کار را با خود HTML انجام ندهیم؟ مزیت دیگر استفاده از React این است که وقتی داده‌ی موردنظر را از این منابع بگیریم، می‌توانیم UI را بدون نوشتن کد اضافه به صورت خودکار به‌روز رسانی کنیم. اگر بخواهیم UI را در HTML ساده به‌روز رسانی کنیم، باید صفحه را ری‌لود (Reload) کنیم. آموزش ساخت کامپوننت ری اکت ای که قبلا ساختیم را حذف کنیم و با استفاده از یک کلاس جاوا اسکریپت یک کامپوننت React بسازیم. JSX یک syntax extension برای جاوا اسکریپت است، اما در این مقاله، آن را «HTML درون جاوا اسکریپت» در نظر بگیرید. JSX یک زبان templating است که ری اکت از آن استفاده می‌کند. یادگیری آن برای بسیاری از کسانی، که قصد یادگیری React را دارند، کمی مشکل است. اجازه دهید اول چیزهایی را با استفاده از JSX بسازیم و خودتان می‌بینید که آنقدرها هم ترسناک نیست. بیایید به سراغ کامپوننت برویم و یک تمپلت به آن اضافه کنیم. حالا که function یک کامپوننت است، کد جاوا اسکریپت را کجا قرار دهیم و تمپلت را کجا؟ در کامپوننت‌های تابعی ری اکت، تمپلت را از کامپوننت return می‌کنیم: حالا که این کامپوننت را داریم، باید به React بگوییم از آن استفاده کند. در React، با ساخت یک کامپوننت، می‌توانیم از آن مثل یک تگ HTML استفاده کنیم. را ساختیم و حالا می‌توانیم در ری اکت مثل یکی از مزایای طراحی‌های مبتنی بر کامپوننت این است که می‌توانیم کد را DRY (خودت را تکرار نکن (don کامپوننت‌ها ابزارهایی قدرتمند برای ساخت وب سایت و اپلیکیشن هستند. بیایید به بخش بعدی آموزش برویم و با داده‌ها کار کنیم. در مثال قبلی و قبل از اینکه از کامپوننت استفاده کنیم، یک متغیر با نام برای ساخت داده در کامپوننت‌ها گزینه‌های مختلفی داریم: مشکل استفاده از یک متغیر ساده این است که ری اکت با هر بار تغییر دوباره رندر ( استفاده از React State برای نمایش یک متغیر در این صورت با هر بار تغییر دادن متغیر ، ری اکت برای نمایش تغییرات از تمپلت دوباره رندر می‌گیرد. در کد زیر دستوراتی از جاوا اسکریپت می‌بینید که ممکن است برایتان آشنا نباشد. می‌توانید هر نامی که دوست دارید برای متغیر و تابع انتخاب کنید. روشی برای آپدیت کردن متغیر حالا که داده‌هایی را نمایش دادیم، گام بعدی این است که در برنامه منتظر (Listen) ورودی‌های کاربر باشیم و بر اساس آنها کاری انجام دهیم. می‌خواهیم منتظر (Listen) رخدادی (Event) مثل یک Button Click باشیم. بیایید یک کار ساده انجام دهیم. دقت کنید که ری اکت کامپوننت App را به صورت زیر تغییر دهید تا یک button داشته باشد که با کلیک روی آن تابعی را می‌گیرد: ، از {} استفاده می‌کنیم تا به JSX بگوییم که می‌خواهیم هر چیزی را، که در این اضافه کنیم تا مطمئن شویم که با استفاده از که React چیزی را با استفاده از جاوا اسکریپت بررسی کند، از const [message, setMessage] = React. const [message, setMessage] = React. const [message, setMessage] = React. const [message, setMessage] = React. const [message, setMessage] = React. حالا روی دکمه کلیک کنید و ببینید که پیغام به صورت خودکار به‌روز رسانی می‌شود! با استفاده از state ری اکت، به سادگی می‌توانیم متغیرها را آپدیت و کاری کنیم که ری اکت viewها را به‌روز رسانی کند! بیایید مروری داشته باشیم بر تمامی مطالبی که در این مقاله بررسی کردیم: از state ری اکت استفاده کردیم. متغیرها را آپدیت کردیم و ری اکت، UI را برای ما به‌روز رسانی کرد. در این آموزش تنها به مطالب پایه‌ی ری اکت پرداختیم. در صورتی که مطلب یادگیری ری اکت React برای شما مفید بوده است:
متن کامل نوشته در سایت فرانش
نظرات