آموزش واکنش با ساختن یک بازی (نسخه 2024)
Learn React by Making a Game (2024 edition)
آیا می خواهید ReactJs را به شیوه ای سرگرم کننده و بازیگوش یاد بگیرید؟ در این دوره، React را در حین ساخت یک بازی کامل Rock-Paper-Scissors مطالعه خواهیم کرد.
من یاد گرفتم که چگونه با ساختن بازی های ویدیویی خودم، کدنویسی کنم. سرگرم کننده بود و من آن را دوست داشتم. فکر می‌کنم یادگیری باید سرگرم‌کننده و نزدیک به احساسی باشد که زمانی در دوران کودکی و کشف چیزهای جدید داشتیم.
این دوره همراه با کتابچه راهنمای قابل چاپ
ارائه می شوداین دوره همراه با یک کتابچه راهنمای قابل چاپ خوب است که می توانید آن را دانلود کرده و بعداً برای مرجع آسان از آن استفاده کنید. پس از محتوای ویدیوها، بیش از 35 صفحه مملو از نمونه‌های کد، منابع یا نمودارها وجود دارد تا بتوانید بازنمایی بصری بهتری از آنچه در جریان است دریافت کنید.
در حین ساخت این بازی، ویژگی‌های React، بهترین روش‌ها و نحوه اجتناب از دام‌های رایج را بررسی خواهیم کرد.
راه اندازی آسان - React را بدون همه حواس پرتی یاد بگیرید
بسیاری از تازه‌واردهای React تمایل دارند به وابستگی‌های خارجی و محیط‌های توسعه پیچیده وابسته شوند. مواردی مانند ساخت فایل ها، ماژول های NPM برای نصب، Webpack، Redux و موارد دیگر. در حالی که این ابزارها در برنامه های پیچیده عالی هستند، اما هنگام شروع کار وزن بیشتری اضافه می کنند.
این دلیلی است که ما از تنظیمات پیکربندی صفر استفاده خواهیم کرد. فقط ویرایشگر کد، یک فایل HTML اولیه و مرورگر وب. این دوره فقط در مورد React و React است!
چه چیزی یاد خواهید گرفت؟
در حین ساختن یک برنامه کاملاً کارآمد، به مفاهیم اساسی در React می پردازیم مانند:
- کار با JSX، React DOM و Babel
- با استفاده از اجزای عملکردی
- سبک های CSS و سبک های درون خطی
- اصول اولیه React hook (useState، useEffect، userRef)
- راه اندازی React Context API برای اشتراک داده
- بهترین شیوه‌ها
... و موارد دیگر
شما را در کلاس می بینیم!
درس ها Lessons
-
تنظیم سبک های درون خطی Setting inline styles
-
داربست اجزای اصلی Scaffolding the main components
-
انیمیشن ها و setInterval Animations and setInterval
-
قبل از اینکه شروع کنیم Before we commence
-
افزودن useRef() و پاکسازی useEffect() Adding useRef() and cleanup useEffect()
-
برنامه را با ReactDom createRoot رندر کنید Render the app with ReactDom createRoot
-
سبک های CSS در React CSS styles in React
-
اضافه کردن وسایل Adding props
-
قلاب useState(). The useState() hook
-
برنده بازی را تعیین کنید Decide the game winner
-
قلاب useContext(). The useContext() hook
-
پروژه کلاس Class project
-
تریلر کلاس Class Trailer
-
رویدادهای ماشه در پاک کردن اجزای فرزند Trigger events in child components wip
-
نتیجه Conclusion
-
ارائه دهندگان زمینه در React Context Providers in React
-
علائم تصادفی Random signs
https://donyad.com/d/4d4cec
Daniel Nastase
توسعه دهنده نرم افزار
سلام، متشکرم که سر زدید! من دانیل هستم، یک مهندس نرم افزار با علاقه زیادی به جاوا اسکریپت و CSS.
من از طرفداران این ایده هستم که آموزش کلید ساختن دنیایی بهتر، پایدار و غنی‌تر است.
نمایش نظرات