|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/full-stack-react-baslangctan-ileri-seviyeye/
课程评论：没有评论
**课程名称：** Full-Stack React: 从入门到精通 **课程概述：** 本课程是一门全面深入的 React 全栈开发课程，涵盖从基础知识到高级特性。学员将学习如何构建和管理 React 组件，并掌握 Hooks (useId, useRef, useEffect, useReducer)、React Context、useQuery 的数据获取、Suspense、Lazy Loading、CSR、SSR 以及 Streaming SSR 等高级概念。课程的最后部分将重点介绍如何使用 Next.js App Router 构建全栈应用。 **主要学习内容：** * **React 基础与组件管理：** * React 核心概念与组件化开发 * JSX 语法与组件间通信 * State 管理与 Props 使用 * 条件渲染、Pure Components、Lists * 事件处理 (Event Handlers) * React State (useState Hook)、多状态管理、对象与数组状态管理 * Immer、State 结构最佳实践 * 状态提升 (Lifting State Up) * **Hooks：** * 常用 Hooks (useId, useRef, useEffect, useReducer) 的使用 * 自定义 Hooks 的创建与使用 * useEffect 与副作用处理、清理函数 * Memoization (React.memo(), useMemo(), useCallback()) * **React Context：** * Context 解决的问题 * Context 的使用与适用场景 * Provider 模式 * **性能优化：** * 第三方组件库（Antd, Material UI 等） * 无样式组件库 (Radix UI) * 使用 Radix UI 创建自定义 Modal * 自定义 Video Player 应用（实践项目） * **全栈 React - Next.js 14 (App Router)：** * Next.js 框架介绍 * Client Components 与 Server Components * Client / Server Side Rendering * Hydration 与 Hydration Mismatch 错误排查 * Params & Query Params * Dynamic Segments (路由动态分段) * Metadata API * React Cache * Suspense 与 Selective Hydrate * Next.js Loading Page * Streaming SSR * Lazy Loading
Bu kapsamlı kurs, React'in temel kavramlarından başlayarak full-stack geliştirme yetkinliklerine kadar geniş bir yelpazeyi kapsar. Kurs boyunca, katılımcılar React'in temel bileşenlerini nasıl oluşturacaklarını ve yöneteceklerini öğrenirken, Hooks, Event Handlers, React Context, useQuery ile data-fetching , Suspense, Lazy Loading CSR, SSR ve Straming SSR gibi ileri düzey özelliklerle nasıl etkili bir şekilde çalışacaklarını keşfedecekler. Kursun son bölümü NextJS App router ile fullstack uygulamalar geliştirmeye ayrılmıştır.React Temelleri ve Bileşen Yönetimi:React'in temel kavramları ve bileşen tabanlı geliştirme anlayışıJSX kullanımı ve componentlar arası iletişimState yönetimi ve props kullanımıConditional(Şartlı) RenderingPure ComponentsListsEvent HandlersEvent Handlers Event Handler fonksiyonlarını prop olarak aktarmaEvent PropagationDefault BehaviourReact StateReact State ( useState Hook )Multiple StatesRenderingObject StatesArray StatesImmerState Structure Best PracticesLifting State UpHooksHooks kavramı: useId, useRef, useEffect, useReducer gibi temel Hooks'ların kullanımıCustom Hook'lar oluşturma ve kullanmauseEffect ile side-effectleruseEffect cleanup functionMemoizationMemoizationReact.memo() KullanımıuseMemo() hookuseCallback() hookReact ContextContext hangi problemi çözüyor?React Context kullanımıReact Context ne zaman kullanılmalı?Provider PatternPerformans3rd Party Component LibrariesComponent Kütüphaneleri ( Antd, Material UI vs.. )Stilsiz Component Kütüphaneleri ( Radix UI )Radix UI ile custom modal oluşturmaCustom VideoPlayer Uygulaması ( ÖRNEK PROJE)Öğrendiklerimizi kullanarak custom videoplayer oluşturalım!Fullstack React - NextJS 14 (APP ROUTER)NextJS FrameworküClient - Server ComponentsClient / Server Side RenderingHydrationRouting Hydration Mismatch Hatalarını Çözelim!Params & Query ParamsDynamic Segments In RouteMetadata APIReact CacheSuspenseSelective HydrateNextJS Loading PageStreaming SSRLazy Loading
