آموزش تیک تاک پا: معرفی بازیگوش برای واکنش
Tic Tac Toe: A Playful Intro to React
آیا می خواهید React را به روش سرگرم کننده یاد بگیرید؟ در این کلاس، مفاهیم کلیدی React را در حین ساخت یک بازی تیک تاک یاد خواهید گرفت.
در حین ساختن یک بازی کاملاً کارآمد، به چند مفهوم اساسی در React می پردازیم مانند:
- چگونه برنامه یا بازی خود را به قطعات کوچکتر، به اجزاء تقسیم کنیم
- چگونه منطق خود را ساختار دهید و چگونه این مؤلفه ها را با ابزارها و فراخوان ها به هم متصل کنید
- چگونه با تغییر برخورد کنیم، وضعیت چیست، چه چیزی در آن ذخیره شود و کجا آن را تعریف کنیم
- نحوه افزودن تعامل و نحوه رندرینگ مجدد در React
- و در حالی که ربطی به React ندارد، می‌خواهیم با کدنویسی SVG چند تصویر اساسی ترسیم کنیم
این یک دوره مقدماتی است، نیازی به دانش قبلی React نیست، اما برخی مهارت‌های HTML، CSS و جاوا اسکریپت ضروری هستند.
.
این یک کلاس عملی است، بنابراین در حالی که بسیاری از نظریه‌ها را در امتداد خطوط پوشش می‌دهیم، تمرکز اصلی ما ساختن یک بازی کاملاً کارآمد تیک تاک با React خواهد بود. ما قصد داریم نحوه تنظیم طرح شبکه، نحوه تعاملی کردن آن، برخی منطق اولیه برای شناسایی برنده و یک صفحه نمایش نتیجه را پوشش دهیم که هم برنده را اعلام می کند و هم می تواند برای تنظیم مجدد بازی استفاده شود.
حتماً پیوند بازی کامل شده خود را در گالری پروژه به اشتراک بگذارید. اگر گیر کردید، در بخش بحث ها پست کنید - ما همه با هم در این موضوع هستیم!
همچنین می‌توانید نتیجه هر درس را مرحله به مرحله در CodePen بررسی کنید:
و در اینجا نسخه پیشرفته‌تر این بازی با انیمیشن‌ها و منطق کامپیوتری وجود دارد:
اطلاعات بیشتر درباره شبکه CSS:
اطلاعات بیشتر درباره CSS flexbox:
توجه: اگر با تنظیمات مشکل دارید: نسخه‌های جدید React و React DOM با هم منتشر می‌شوند، اما ممکن است وب‌سایتی که این کتابخانه‌ها را برای CodePen ارائه می‌کند، با هر دوی آنها به‌روز نباشد. اگر به دلایلی شماره نسخه React و شماره نسخه React DOM مطابقت نداشتند، باید نسخه ای را که دارای شماره نسخه بالاتر است، با تغییر شماره در آدرس اینترنتی کتابخانه اضافه شده برای مطابقت، تنزل دهید.
درس ها Lessons
-
شبکه The Grid
-
نتیجه Conclusion
-
کدام مربع کدام است؟ Which Square is Which?
-
اولین تلاش برای افزودن یک ایالت First Attempt to Add a State
-
دایره ها و صلیب ها Circles and Crosses
-
تشخیص برنده Detecting the Winner
-
نوشتن اولین اجزای ما Writing Our First Components
-
حالتی که می تواند تغییر کند A State That Can Change
-
تقسیم کردن بازی به اجزا Breaking Down the Game Into Components
-
اثر متقابل Interaction
-
و برنده است... And the Winner Is...
-
مقدمه Introduction
-
قطعات در حال تغییر The Changing Parts
https://donyad.com/d/dea7
Hunor Borbély
توسعه دهنده وب
از کودکی عاشق ساختن وسایل بودم. ابتدا فقط با لگو بازی کردم و اکنون در حال ایجاد وب سایت هستم. به نظر من وقتی کمی عمیق تر در توسعه وب فرو رفتید، ساختن چیزهای شگفت انگیز در وب فقط با یک رایانه معمولی آسان است. با این حال، رسیدن به آنجا بسیار زیاد است، محتوای بیش از حد زیادی وجود دارد. برای غلبه بر مشکلات اولیه، من به شما کمک خواهم کرد تا موضوعات پیچیده را به روشی ساده و کاربردی توضیح دهید.
نمایش نظرات