نحوه ایجاد یک برنامه Full Stack React با آموزش MERN Stack

دانلود How to Create a Full Stack React App with the MERN Stack Tutorial

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:

این آموزش متوسط ​​​​React توسعه دهندگان نرم افزار را آماده می کند تا یک برنامه کاربردی تمام پشته در React ایجاد کنند که به طور یکپارچه با بقیه پشته MERN برای کارایی و ثبات بهینه متصل می شود.

حتی اگر تا این لحظه در حرفه خود از آن استفاده نکرده باشید، تقریباً به طور قطع نام React را شنیده اید. این کتابخانه جاوا اسکریپت انعطاف پذیر، آسان، بسیار پشتیبانی شده و رایگان است که ساخت رابط های کاربری را بسیار ساده می کند. این واقعیت که میلیون ها توسعه دهنده از آن استفاده می کنند فقط به اعتبار و جذابیت آن می افزاید.

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

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

آموزش ساخت یک برنامه کامل React: آنچه باید بدانید

برای هر توسعه‌دهنده نرم‌افزاری که به دنبال بهبود مهارت‌های خود با بهترین شیوه‌های برنامه‌نویسی است، این دوره منبع باز موضوعاتی مانند:

  • افزودن پایگاه داده MongoDB
  • ایجاد Backend با Node و Express
  • ایجاد قلاب های سفارشی برای سوکت های وب
  • ایجاد و ارائه برنامه های React
چه کسی باید در آموزش ساخت اپلیکیشن React شرکت کند؟

این آموزش React و MERN Stack به عنوان آموزش متن باز در سطح تخصصی در نظر گرفته می شود، به این معنی که برای توسعه دهندگان نرم افزار طراحی شده است. این دوره مهارت های React برای توسعه دهندگان نرم افزار با سه تا پنج سال تجربه در زمینه بهترین شیوه های برنامه نویسی طراحی شده است.

توسعه‌دهنده‌های نرم‌افزار جدید یا مشتاق. همیشه ایده خوبی برای یک توسعه‌دهنده نرم‌افزار جدید است که به شدت به یک پشته خاص تکیه کند، و شخصی که شروع به توسعه برنامه می‌کند می‌تواند بسیار بدتر از پشته MERN باشد. . این دوره آموزشی به شما نشان می‌دهد که چگونه برنامه‌های کاربردی قوی با رابط‌های کاربری عالی بنویسید که کاملاً با MongoDB، Express.js و Node.js مطابقت دارند.

توسعه‌دهندگان نرم‌افزار با تجربه. اگر چند سالی است که در زمینه توسعه نرم‌افزار کار می‌کنید، اگر می‌خواهید تجربه بیشتری با پشته‌های دیگر کسب کنید، باید این دوره را بگذرانید. شاید شما سال‌ها یک استکر LAMP بوده‌اید یا روی Ruby on Rails تمرکز کرده‌اید. این دوره می تواند به سرعت طناب های MERN را به شما نشان دهد و شما را در پشته بعدی خود شروع کند.


سرفصل ها و درس ها

ایجاد یک برنامه Note-Share: یک Simple React Front-End ایجاد کنید Build a Note-Sharing App: Create a Simple React Front-End

  • بررسی اجمالی Overview

  • معرفی Introduction

  • نقشه از برنامه Map Out the App

  • ایجاد صفحات و تنظیم مسیرها Create Pages and Set Up Routes

  • صفحه و فهرست یادداشت ها را بسازید Build the Notes Page and List

  • صفحه جزئیات یادداشت را بسازید Build the Note Detail Page

  • نتیجه Conclusion

یک برنامه اشتراک‌گذاری یادداشت بسازید: مدیریت داده‌های فرانت‌اند Build a Note-Sharing App: Front-end Data Management

  • بررسی اجمالی Overview

  • معرفی Introduction

  • داده‌های یادداشت را در یک ارائه‌دهنده زمینه ذخیره کنید Store Note Data Inside A Context Provider

  • یک مودال ایجاد یادداشت اضافه کنید Add A Create Note Modal

  • ایجاد یادداشت های جدید در زمینه Creating New Notes in Context

  • حذف یادداشت ها در زمینه Deleting Notes in Context

  • به روز رسانی یادداشت ها در زمینه Updating Notes in Context

  • نتیجه Conclusion

یک برنامه اشتراک گذاری یادداشت بسازید: یک استایل اضافه کنید Build a Note-Sharing App: Add Styling

  • بررسی اجمالی Overview

  • معرفی Introduction

  • Styling را به برنامه اضافه کنید Add Styling to the App

  • یک جزء "X" قابل استفاده مجدد ایجاد کنید Create A Reusable "X" Component

  • یک نوار ناوبری ایجاد کنید Create A Navigation Bar

  • Markdown را در React رندر کنید Render Markdown in React

  • نتیجه Conclusion

ایجاد یک برنامه به اشتراک گذاری یادداشت: یک Back-end با Node و Express ایجاد کنید Build a Note-Sharing App: Create a Back-end with Node and Express

  • بررسی اجمالی Overview

  • معرفی Introduction

  • راه اندازی پروژه تمام پشته Full-Stack Project Setup

  • یک نقطه پایانی "خوانده" ایجاد کنید و داده ها را از سمت مشتری بارگیری کنید Create a "Read" Endpoint And Load Data From the Client-Side

  • یک نقطه پایانی "ایجاد" اضافه کنید و از سمت مشتری درخواست کنید Add a "Create" Endpoint And Make Requests From the Client-Side

  • نقاط پایانی "به روز رسانی" و "حذف" را اضافه کنید Add "Update" And "Delete" Endpoints

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: یک پایگاه داده اضافه کنید Build A Note-Sharing App: Add a Database

  • بررسی اجمالی Overview

  • معرفی Introduction

  • MongoDB را به Back-end اضافه کنید Add MongoDB to the Back-end

  • نقاط پایانی را به استفاده از MongoDB تبدیل کنید Convert Endpoints to Use MongoDB

  • سرورهای اکسپرس را به چندین فایل تقسیم کنید Split Express Servers Into Multiple Files

  • MongoDB را در فایل های مختلف در دسترس قرار دهید Make MongoDB Available in Different Files

  • برای افزایش کارایی مسیرها را بازنویسی کنید Rewrite Routes To Increase Performance

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: احراز هویت کاربر را به Front-end اضافه کنید Build A Note-Sharing App: Add User Authentication to the Front-end

  • بررسی اجمالی Overview

  • معرفی Introduction

  • ایجاد ورود و ایجاد فرم های حساب Create Login and Create Account Forms

  • اضافه کردن ورود و ایجاد صفحات حساب Add Login and Create Account Pages

  • طراحی صفحات ورود و ایجاد حساب کاربری Styling the Login and Create Account Pages

  • Firebase Auth را به Front-end اضافه کنید Add Firebase Auth to the Front-end

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: احراز هویت کاربر را به Back-end اضافه کنید Build A Note-Sharing App: Add User Authentication to the Back-end

  • بررسی اجمالی Overview

  • معرفی Introduction

  • Firebase Admin را نصب و راه اندازی کنید Install and Set Up Firebase Admin

  • چگونه باید پایگاه داده خود را سازماندهی کنیم؟ How Should We Organize Our Database?

  • تبدیل نقاط پایانی برای مالکیت Convert Endpoints for Ownership

  • مالکیت داده در ایجاد و حذف نقاط پایانی Data Ownership in Create and Delete Endpoints

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: Refactoring Front-end Build A Note-Sharing App: Front-end Refactoring

  • بررسی اجمالی Overview

  • معرفی Introduction

  • در Auth State Changes مشترک شوید Subscribe to Auth State Changes

  • از مسیرها با معیارهای دلخواه محافظت کنید Protect Routes with Arbitrary Criteria

  • یک userUser Hook ایجاد کنید Create a useUser Hook

  • توکن های کاربران را در درخواست ها لحاظ کنید Include Users' Tokens in Requests

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: از داده های کاربران محافظت کنید Build A Note-Sharing App: Protect Users' Data

  • بررسی اجمالی Overview

  • معرفی Introduction

  • محافظت از داده های کاربران در برابر دسترسی ناخواسته Protect Users' Data from Unwanted Access

  • جلوگیری از حذف اطلاعات سایر کاربران توسط کاربران Prevent Users From Deleting Other Users' Data

  • جلوگیری از تغییر داده های غیرمجاز Prevent Unauthorized Data Modification

  • حفاظت را به نقطه پایانی Create Note اضافه کنید Add Protection to the Create Note Endpoint

  • از میان افزار برای کاهش تکرار استفاده کنید Use Middleware to Reduce Repetition

  • میان افزار بیشتر اضافه کنید Add More Middleware

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: مدیریت حساب کاربری Build A Note-Sharing App: User Account Management

  • بررسی اجمالی Overview

  • معرفی Introduction

  • نمایش تفکیک داده ها Data Segregation Demonstration

  • ایجاد حساب کاربری User Account Creation

  • خطاهای ورود و ایجاد حساب کاربری را مدیریت کنید Handle Login and Create Account Errors

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: اشتراک گذاری یادداشت را به Front-end اضافه کنید Build A Note-Sharing App: Add Note-Sharing to the Front-end

  • بررسی اجمالی Overview

  • معرفی Introduction

  • یک صفحه برای ویرایش تنظیمات اشتراک‌گذاری ایجاد کنید Create a Page for Editing Sharing Settings

  • یک لیست ایمیل های مشترک ایجاد کنید Create a Shared Emails List

  • منطق اشتراک گذاری اولیه Front-end Basic Front-end Sharing Logic

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: اصول تأیید ایمیل Build A Note-Sharing App: Email Verification Basics

  • بررسی اجمالی Overview

  • معرفی Introduction

  • اصول تأیید ایمیل Email Verification Basics

  • یک صفحه «لطفاً تأیید ایمیل» ایجاد کنید Create a "Please Verify Email" Page

  • ایجاد جریان حساب را دوباره فاکتور کنید Refactor the Create Account Flow

  • ارسال ایمیل از یک Node Server Send Emails From A Node Server

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: تأیید ایمیل پیشرفته Build A Note-Sharing App: Advanced Email Verification

  • بررسی اجمالی Overview

  • معرفی Introduction

  • یک صفحه فرود تأیید ایمیل ایجاد کنید Create an Email Verification Landing Page

  • یک مسیر سرور تأیید ایمیل ایجاد کنید Create an Email Verification Server Route

  • از مسیرهای سرور در برابر کاربران تایید نشده محافظت کنید Protect Server Routes from Unverified Users

  • جلوگیری از ورود کاربران تایید نشده Prevent Unverified Users from Logging In

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: اشتراک‌گذاری لینک Build A Note-Sharing App: Link Sharing

  • بررسی اجمالی Overview

  • معرفی Introduction

  • یک بخش فعال/غیرفعال ایجاد کنید Create an Enable/Disable Section

  • یک نقطه پایانی برای فعال کردن اشتراک گذاری لینک ایجاد کنید Create an Endpoint for Enabling Link Sharing

  • یک نقطه پایانی برای غیرفعال کردن اشتراک گذاری لینک ایجاد کنید Create an Endpoint for Disabling Link Sharing

  • بارگیری یادداشت های پیوند مشترک از سرور Load Link-Shared Notes from the Server

  • نتیجه Conclusion

یک برنامه اشتراک گذاری یادداشت بسازید: ارتباطات بلادرنگ Build A Note-Sharing App: Real-Time Communication

  • بررسی اجمالی Overview

  • معرفی Introduction

  • Web-Sockets را به Express اضافه کنید Add Web-Sockets to Express

  • Web-Sockets را به React اضافه کنید Add Web-Sockets to React

  • ارسال داده از طریق سوکت وب Send Data Through a Web-Socket

  • درخواست های "بار" را به سوکت های وب تبدیل کنید Convert "Load" Requests to Web-Sockets

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: محافظت از سوکت‌های وب Build A Note-Sharing App: Web-Socket Protection

  • بررسی اجمالی Overview

  • معرفی Introduction

  • میان افزار "User Can Edit Note" را ایجاد کنید Create "User Can Edit Note" Middleware

  • تبدیل Express Middleware به Socket.io Convert Express Middleware to Socket.io

  • میان افزار برای رویدادهای فردی Middleware for Individual Events

  • خطاهای سوکت در قسمت جلویی را مدیریت کنید Handle Socket Errors on the Front-end

  • یک هوک سفارشی برای سوکت های وب ایجاد کنید Create a Custom Hook for Web-Sockets

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: استراتژی های سازمان وب سوکت Build A Note-Sharing App: Web-Socket Organization Strategies

  • بررسی اجمالی Overview

  • معرفی Introduction

  • منطق وب سوکت را به طور موثر سازماندهی کنید Organize Web-Socket Logic Effectively

  • کنترل کننده رویداد را در فایل های جداگانه تعریف کنید Define Event Handlers in Separate Files

  • منطق اتصال اولیه را تعریف کنید Define Initial Connection Logic

  • Socket Middleware را اضافه کنید Add Socket Middleware

  • نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: سوکت‌های وب در عمق Build A Note-Sharing App: Web-Sockets In-Depth

  • بررسی اجمالی Overview

  • معرفی Introduction

  • داده های مشتری را همزمان نگه دارید Keep Client Data In Sync

  • جلوگیری از حلقه های سوکت بی نهایت Prevent Infinite Socket Loops

  • نقش ها را به داده های وب سوکت اضافه کنید Add Roles to Web-Socket Data

  • از اتاق های وب سوکت استفاده کنید Use Web-Socket Rooms

  • نتیجه Conclusion

یک برنامه اشتراک‌گذاری یادداشت بسازید: سوکت‌های وب و نقاط پایانی را ترکیب کنید Build A Note-Sharing App: Combine Web-Sockets and Endpoints

  • بررسی اجمالی Overview

  • معرفی Introduction

  • چند نوع اتصال وب سوکت Multiple Web-Socket Connection Types

  • اتصالات جدید سوکت وب را مدیریت کنید Handle New Web-Socket Connections

  • بارگیری داده ها از طریق سوکت های وب Loading Data Via Web-Sockets

  • داده های سمت مشتری را فوراً به روز کنید Update Client-Side Data Immediately

  • نتیجه Conclusion

نمایش نظرات

نحوه ایجاد یک برنامه Full Stack React با آموزش MERN Stack
جزییات دوره
15h
100
CBTNuggets CBTNuggets
(آخرین آپدیت)
-
- از 5
ندارد
دارد
دارد
Shaun Wassell
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Shaun Wassell Shaun Wassell

توسعه دهنده نرم افزار Full-Stack Shaun Wassell یک توسعه دهنده نرم افزار کاملاً پشته ای است که در زمینه برنامه نویسی و اتوماسیون صنعتی تخصص دارد.

Shaun با امید به ساخت بازی های ویدیویی عالی برنامه نویسی را در دوره راهنمایی شروع کرد. وی در ادامه به دریافت مدرک علوم کامپیوتر و ادامه کار حرفه ای نرم افزار توسعه یافت. او از پیشرفت کامل و موبایل لذت می برد. علاوه بر رایانه ، شاون به موسیقی ، معماری ، باغبانی و آبجو دستی نیز علاقه دارد.