آموزش GraphQL با React: راهنمای کامل توسعه دهندگان

GraphQL with React: The Complete Developers Guide

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: با ساختن برنامه های وب واقعی با React و Node، GraphQL را بیاموزید و به آن تسلط پیدا کنید. با React JS و GraphQL برنامه های تک صفحه ای شگفت انگیز بسازید. زیرا شما اصول اولیه را به خوبی می دانید در اکوسیستم پشتیبانی کننده GraphQL مسلط شوید، از جمله تفاوت بین Apollo و Relay پیش نیازها:آشنایی با React

توجه: این دوره فرض می کند که شما با React آشنا هستید!

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

احراز هویت؟ آن را یاد خواهید گرفت. آپولو دیتا؟ مشمول. ادغام با React؟ البته!

این دوره شما را سریعاً با GraphQL راه‌اندازی می‌کند و دانش اصلی مورد نیاز برای درک عمیق و ساخت سریع برنامه‌های React را به شما می‌آموزد.

هر دو OSX و Windows پشتیبانی می شوند.

ما با تسلط بر اصول GraphQL، از جمله انواع داده‌ها، طرح‌واره‌ها و ادغام با Express و React، شروع می‌کنیم. کد منبع برای هر سخنرانی ارائه شده است، بنابراین شما همیشه با سرعت دوره به روز خواهید بود. توجه ویژه ای به ایجاد کدی شده است که بتوانید از آن در پروژه های خارق العاده خود استفاده کنید.

اگر با GraphQL تازه کار هستید، یا اگر برای یادگیری آن کار می‌کردید، اما گاهی اوقات احساس می‌کنید هنوز کاملاً «آن را دریافت نکرده‌اید»، این دوره آموزشی GraphQL برای شماست! برای یادگیری GraphQL باید آن را درک کنید.

  • نحوه استفاده از طرحواره GraphQL برای تعریف روابط بین اشیاء داده خود را بیاموزید
  • فرآیند ترکیب یک سرور باطن با یک فرانت اند React را بیاموزید
  • بر فرآیند تفکر در مورد داده های برنامه های کاربردی خود از نظر ساختار نمودار مسلط شوید
  • تفاوت بین GraphQL، Apollo و Relay و زمان استفاده از هر کدام را درک کنید
  • برنامه هایی را ایجاد کنید که منحصر به فرد، سرگرم کننده و پاسخگو هستند.
  • سرورهایی بسازید که می توانند با برنامه های React و React Native استفاده شوند
  • مدیریت اصلی احراز هویت با GraphQL
  • اصول اصلی ناوبری را با React Router و GraphQL بیاموزید

من دوره‌ای را ساخته‌ام که می‌خواستم زمانی که GraphQL یاد می‌گرفتم بگذرانم. دوره ای که مفاهیم و نحوه اجرای آنها را به بهترین نحو توضیح می دهد تا شما آنها را یاد بگیرید و عمیقاً درک کنید.


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

چرا GraphQL؟ Why GraphQL?

  • معرفی Introduction

  • منابع دوره Course Resources

  • به انجمن ما بپیوندید! Join Our Community!

پرایمر مسیریابی REST-ful A REST-ful Routing Primer

  • بررسی مسیریابی REST-ful Review of REST-ful Routing

  • کاستی های RESTful Routing Shortcomings of RESTful Routing

در GraphQL On To GraphQL

  • GraphQL چیست؟ What is GraphQL?

  • کار با GraphQL Working with GraphQL

  • ثبت GraphQL با Express Registering GraphQL with Express

  • طرحواره های GraphQL GraphQL Schemas

  • نوشتن طرحواره GraphQL Writing a GraphQL Schema

  • پرس و جوهای ریشه Root Queries

  • حل با داده ها Resolving with Data

  • ابزار GraphiQL The GraphiQL Tool

  • منبع داده واقعی A Realistic Data Source

  • توابع حل همگام Async Resolve Functions

  • Nodemon Hookup Nodemon Hookup

  • تعاریف شرکت Company Definitions

واکشی داده ها با کوئری ها Fetching Data with Queries

  • پرس و جوهای تودرتو Nested Queries

  • بیشتر در مورد جستجوهای تودرتو More on Nested Queries

  • یک نفس سریع A Quick Breather

  • چندین نقطه ورودی RootQuery Multiple RootQuery Entry Points

  • روابط دو طرفه Bidirectional Relations

  • اطلاعات بیشتر در مورد روابط دو طرفه More on Bidirectional Relations

  • حل و فصل مراجع دایره ای Resolving Circular References

  • قطعات پرس و جو Query Fragments

  • مقدمه ای بر جهش ها Introduction to Mutations

  • فیلدهای NonNull و جهش NonNull Fields and Mutations

  • این کار را خودتان انجام دهید - جهش را حذف کنید! Do It Yourself - Delete Mutation!

  • این کار را خودتان انجام دهید - جهش را ویرایش کنید! Do It Yourself - Edit Mutation!

اکوسیستم GraphQL The GraphQL Ecosystem

  • مشتریان GraphQL - آپولو در مقابل رله GraphQL Clients - Apollo vs Relay

  • Sidenote - سرور آپولو در مقابل سرور GraphQL Sidenote - Apollo Server vs GraphQL Server

Clientside GraphQL Clientside GraphQL

  • برنامه بعدی The Next App

  • راه اندازی بسته شروع Starter Pack Walkthrough

  • راه اندازی و پیکربندی MongoDB Atlas MongoDB Atlas Setup and Configuration

  • راه اندازی MongoLab MongoLab Setup

  • کار از طریق طرحواره Working Through the Schema

  • راه اندازی آپولو کلاینت Apollo Client Setup

  • React Component Design React Component Design

  • جستارهای GQL در React GQL Queries in React

  • پیوند کوئری ها با کامپوننت ها Bonding Queries with Components

Gotchas با Queries در React Gotchas with Queries in React

  • رسیدگی به پرس و جوهای معلق Handling Pending Queries

  • رفع اخطارهای کلیدی Fixing Key Warnings

  • بررسی معماری Architecture Review

  • اضافه شدن React Router Adding React Router

  • ایجاد یک آهنگ Creating a Song

جهش های پیشانی Frontend Mutations

  • جهش در React Mutations in React

  • پارامترهای پرس و جو Query Params

  • تعریف متغیرهای کوئری در React Defining Query Variables in React

  • پیمایش در جهش موفق Navigating on Successful Mutation

  • عیب یابی واکشی لیست Troubleshooting List Fetching

  • واکشی مجدد پرس و جوها Refetching Queries

  • حذف توسط جهش Deletion by Mutation

  • ارتباط جهش با یک جزء Associating Mutations with a Component

  • فراخوانی جهش های حذف Invoking Delete Mutations

ذخیره خودکار داده ها Automatic Data Caching

  • واکشی مجدد یک پرس و جو Refetching a Query

  • یک تنفس سریع CSS A Quick CSS Breather

  • نمایش یک آهنگ خاص Showing a Particular Song

  • واکشی سوابق فردی Fetching Individual Records

React Router + GraphQL React Router + GraphQL

  • ادغام React Router با GraphQL Integrating React Router with GraphQL

  • در حال تماشای داده ها Watching for Data

  • پیمایش بین صفحه نمایش Navigating Between Screens

  • فرم ایجاد غزل Lyric Creation Form

  • جهش CreateLyric The CreateLyric Mutation

  • ارسال جهش Submitting Mutations

  • نمایش فهرستی از اشعار Showing a List of Lyrics

  • تقویت کوئری ها Enhancing Queries

  • شناسایی سوابق Identifying Records

  • ذخیره سازی با DataIdFromObject Caching with DataIdFromObject

  • نماد شست بالا Thumbs Up Icon

اطلاعات بیشتر در مورد جهش های سمت مشتری More on Client Side Mutations

  • جهش شبیه The Like Mutation

  • نمایش لایک با متن ترانه Showing Likes with Lyrics

  • واکشی لایک Fetching Likes

  • به‌روزرسانی‌های خوش‌بینانه رابط کاربری Optimistic UI Updates

  • رسیدگی به پاسخ های خوش بینانه Handling Optimistic Responses

  • رفع اشکال سریع A Quick Bugfix

  • جمع بندی برنامه Application Wrapup

ساختن از صفر (بیشتر). Building From (Mostly) Scratch

  • نمای کلی برنامه App Overview

  • چالش های برنامه App Challenges

  • راه اندازی دیگ بخار Boilerplate Setup

  • رویکرد احراز هویت Authentication Approach

  • راه اندازی MLab MLab Setup

  • نوع کاربر The User Type

  • جهش ثبت نام The Signup Mutation

  • تفویض اختیار به سرویس Auth Delegating to the Auth Service

  • تست ثبت نام Testing Signup

  • جهش خروج The Logout Mutation

  • جهش ورود The Login Mutation

  • بررسی وضعیت احراز هویت Checking Authentication Status

سمت مشتری متحرک Moving Client Side

  • راه اندازی سمت مشتری Client Side Setup

  • Root Route با React Router Root Routes with React Router

  • تعیین کاربر فعلی Figuring Out the Current User

  • از جمله کوکی ها با درخواست های GraphQL Including Cookies with GraphQL Requests

  • وضعیت احراز هویت Authentication State

  • دکمه های ورود و خروج Login and Logout Buttons

  • مدیریت جهش خروج Handling the Logout Mutation

  • رندرهای خودکار اجزا Automatic Component Rerenders

  • طراحی فرم ورود Login Form Design

  • فرم احراز هویت The Auth Form

  • وارد کردن جهش ورود Importing the Login Mutation

  • ارسال فرم احراز هویت Submitting the Auth Form

  • تازه کردن کاربر فعلی Refreshing the Current User

  • مدیریت خطا با GraphQL Error Handling with GraphQL

  • اطلاعات بیشتر در مورد مدیریت خطا More on Error Handling

  • جهش ثبت نام The Signup Mutation

  • اطلاعات بیشتر در مورد جهش ثبت نام More on the Signup Mutation

رسیدگی به خطاها با ظرافت Handling Errors Gracefully

  • رسیدگی به خطاهای مربوط به ثبت نام Handling Errors Around Signup

  • شرایط مسابقه - یک گوچای بزرگ Race Conditions - A Big Gotcha

  • جریان تأیید نهایی Finalized Auth Flow

  • اصلاح فرآیند ورود Fixing the Login Process

  • ثبت نام را نیز رفع کنید! Fix Signup Too!

  • مسیر داشبورد The Dashboard Route

  • نیاز به HOC The Need for a HOC

  • شروع به کار با RequireAuth Getting Started with RequireAuth

  • درخواست RequireAuth Applying RequireAuth

  • رفع RequireAuth Fixing RequireAuth

موارد اضافی Extras

  • جایزه! Bonus!

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

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

آموزش GraphQL با React: راهنمای کامل توسعه دهندگان
جزییات دوره
13 hours
116
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
60,558
4.4 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Stephen Grider Stephen Grider

معمار مهندسی