|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/derinlemesine-react/
课程评论:没有评论
**深入 React:一份全面的课程总结** 本课程深入探讨了 React 库/框架的开发,从基础知识到中高级概念。本课程专注于 React 本身的核心功能,不涉及外部工具。目标是为专家级开发奠定基础,并通过真实世界的例子解释实际应用中的主题。 **核心概念与组件:** * **组件定义:** 学习如何使用类(class)和函数(function)定义组件。 * **属性(Props):** 理解如何将属性从父组件传递到子组件。 * **条件渲染:** 掌握使用 `if` 等语句进行条件渲染。 * **列表渲染:** 通过 `map()` 方法处理对象数组,实现表格等列表结构。 * **状态(State)与事件(Event):** 学习如何管理组件内部状态(类组件中的 `state` 和函数组件中的 `useState()` Hook)以及响应用户交互(事件)。 * **Context API:** 了解 Context API 如何在组件树中共享数据。 **表单处理:** * **受控与非受控组件:** 学习在类组件和函数组件中实现表单的受控与非受控方法。 * **输入类型:** 详细演示 `select`、`radio` 和 `checkbox` 等多选项输入与状态的结合使用。 * **FormData:** 学习使用 `FormData` 对象处理表单数据。 * **表单验证:** 掌握全局和局部表单验证,以及错误消息(error messages)和触碰(touch)状态的处理。 **高级主题:** * **高阶组件(Higher-Order Components):** 学习如何创建和使用 HOC 来复用组件逻辑。 * **Portals:** 理解 Portals 的作用,用于将组件渲染到 DOM 树的不同位置。 * **生命周期:** * **类组件:** 学习装载(mount)等生命周期方法。 * **函数组件:** 学习 `useEffect` Hook,以及如何处理副作用和回调。 * **副作用示例:** 通过存储(storage)示例解释 `useEffect` 的使用。 * **性能优化:** * **`memo()`:** 学习使用 `memo()` 优化函数组件的性能。 * **`useMemo()`:** 理解 `useMemo()` 如何缓存计算结果,避免不必要的重算。 * **`useReducer()`:** 学习 React 的状态管理钩子 `useReducer()`,为理解 Redux 等工具奠定基础。 * **错误边界(Error Boundaries):** 了解错误边界如何捕获和处理组件渲染中的错误。 **TypeScript 与 React:** * **类型安全:** 学习使用 TypeScript 为 React 应用实现类型安全。 * **类型定义:** 演示如何为变量、函数、对象,以及组件的属性(props)和状态(state)定义类型。 **JSX 之外的 React:** * **无 JSX 开发:** 学习如何在不使用 JSX 的情况下进行 React 开发,这有助于理解旧版本 React 的工作原理以及新版本背后的机制,并为调试和与其他框架集成提供帮助。
Bu eğitim, React adlı betiklik (libary) ya da çatımlama (framework) ile geliştirmeyi derinlemesine anlatmaktadır. En temelinden başlanarak orta ve ileri düzey konulara girilmektedir. React ile kullanılan onun bir parçası olmayan araçlar, başka eğitimlere bırakılarak kapsam dışında tutulmuştur. Bu eğitimde amaç uzman geliştirme için gerekli altyapıyı oluşturmak ve gerçek uygulamalarda kullanılan konuların örneklerle açıklanmasını sağlamaktır.Eğitimde önce sınıf (class) ve işlev(function) olarak bileşen (component) tanımaması gösterilmektedir. Dışarıdan özellikler (properties - props) aktarılması anlatılmaktadır. Koşulla geliştirme için if (ise) gibi yapılar tüm seçenekleriyle anlatılamkta; nesneler dizisi üzerinde map() (eşlemle) yöntemiyle tablo benzeri yapıların işlenmesi gösterilmektedir.Veri üzerinde işlem yapmak için olay (event) ve verileri tutmak için durum (state) konuları açıklanmaktadır. Gerek sınıftaki state gerekse işlevler için useState() konuları gösterilmektedir. Bunun dışında bağlam (context) konusu anlatılmaktadır.Bir form yapmak için denetimsiz (uncontrolled) ve denetimli (contolled) yöntemleri hem sınıf hem de işlev bileşenleri için açıklanmaktadır. Çoktan seçmeli girdi sağlayan select, radio ve checkbox öğelerin durumlarla birlikte kullanımı ayrıntılı olarak gösterilmektedir.Veriler için FormData nesnesi gösterilmektedir. Sonrasında geçerleme (validation) konusu hem bütüncül hem de parçalı olarak anlatılmaktadır. Bunlarla birlikte yanlışlık iletileri (error messages) ve dokunma (touch) konuları işlenmektedir.İçerikte yüksek dizgeli bileşenler (higher-order components), anakapı (portal) gibi göreli olarak ileri konular da yer almaktadır.Ugulamanın yaşam döngüsü (lifecycle) konusu hem sınıflar için bindirme (mount) konusuyla hem de işlevler için effect (etki) ve geriçağrı (callback) ile gösterilmektedir. Bir saklatım (storage) örneği üzerinden etki kullanımı açıklanmaktadır.Başarımı artırmak için memo() işlevinin kullanımı ve useMemo() işleviyle veriler değişmedikçe çıktını aynen kullanılması ve herhangi bir işlem yapılmaması gibi konular açıklanmaktadır.React çatımlamasının indirgeme (reduction) aracı olan useReducer() anlatılmaktadır. Bununla Redux gibi araçların araçların temel çalışma ilkelerinin anlaşılması için giriş yapılmaktadır. Ancak Redux gibi araçlar başka bir eğitimde anlatılmak üzere dışarda tutulmuştur.Uygulamada oluşan yanlışlık (error) durumların kotarmak için kullanılan yanlışlık sınırı (error boundry) konusu kapsama alınmıştır.TypeScript dili kullanılarak React ile geliştirmenün tür güvenli (type-safe) gerçekleştirilmesi anlatılmaktadır. Bir değişken, işlev ve nesne için kullanımı dışında bileşen (component) tanımlamasında özellikler (properties) ve durum (state) için kullanımları da gösterilmektedir.Son bölümde JSX kullanmadan React ile geliştirme gösterilmektedir. Bu konu, hem eski sürümlerin öğrenilmesi hem de yeni sürümlerde de arkada çalışan yapının anlaşılması için içerilmiştir. Daha iyi böceksizleme (debugging) yapma ve başka çatımlamalarla JavaScript üzerinden iletişim kurma gibi konularda da yararlı olabileceği için eklenmiştir.