React ile Uygulama Geliştirme Eğitimi

Eğitim Tipi : Sanal Sınıf / Online
Süre : 4 Gün
PDF İndir
  1. Anasayfa
  2. /
  3. React ile Uygulama Geliştirme Eğitimi

Açıklama

    React, Facebook (şimdi Meta) tarafından geliştirilmiş, açık kaynaklı bir JavaScript kütüphanesi olup modern web ve mobil uygulamalar için hızlı, dinamik ve ölçeklenebilir kullanıcı arayüzleri (UI) oluşturmayı sağlar.

    React, özellikle tek sayfa uygulamaları (SPA – Single Page Applications) ve mobil uygulamalar geliştirmek için kullanılır.

     

    Kimler Katılmalı?

    Bu, modern web geliştirme alanındaki becerilerini geliştirme ihtiyacı duyan temel düzeydeki Web geliştiricileri için tasarlanmış giriş niteliğinde bir React geliştirme eğitimidir. HTML5, CSS3 ve JavaScript ile en azından temel düzeyde deneyime sahip olan alanda yeni Web geliştiricilerine yöneliktir.

Eğitim İçeriği

Giriş

  • React nedir?
  • Real DOM/Virtual DOM nedir?
  • One Way/Two Way binding nedir?
  • React’i kullanmak ne zaman mantıklı?
  • IDE/Text editor seçimi
  • VSCode React Snippets

Temel Node.JS

  • JS kurulumu
  • NPM/Yarn
  • Bir JavaScript dosyasını çalıştırmak
  • Bir modül indirip kullanmak
  • Bağımlılık yönetimi
  • Scriptler

ES6 Modül Sistemi

  • ES nedir? ES5/6 farkları nelerdir?
  • Sucrase
  • Modül oluşturmak
  • Varsayılan modül belirlemek
  • ‘as’ ile yeniden isimlendirme
  • Çok fonksiyonlu modüllerde as operatörü
  • Temiz modül yazmak

Merhaba React

  • create-react-app kurulumu
  • React Dev Tools kurulumu
  • Merhaba Dünya uygulaması
  • JSX ve Kuralları

Component’ler ile Çalışmak

  • Component nedir?
  • Component oluşturmak/kullanmak
  • Özel tanımlı keywordler
  • Componentlerde değişken render etmek
  • Koşullu render etmek
  • children

Props’lar ile Çalışmak • Props nedir? Nasıl kullanılır?

  • Döngülerde “key” prop’u.
  • propTypes: isRequired
  • propTypes: oneOfType
  • propTypes: shape
  • defaultProps

State’ler ile Çalışmak

  • State nedir? Nasıl oluşturulur?
  • useState :: Array
  • useState :: Object
  • Counter uygulaması
  • Re-Render mantığını anlamak (jQuery vs React)

Component Yaşam Döngüsü

  • useEffect
  • Dependency array / component did mount
  • Spesifik bir state’in değiştiğini anlamak
  • Component unmount

Fetching

  • Native Fetch
  • Axios

React Router

  • Kurulum
  • Strict
  • Component
  • Route’a data göndermek
  • Link
  • NavLink
  • Redirect
  • Hata yakalama

Form Yönetimi ve Validasyonlar

  • Formik Yup

Memoization

  • memo
  • useMemo
  • useCallback

Context API ile State Yönetimi

  • createContext hook
  • Context Provider
  • useContext hook

Real-Time Çalışan Uygulamalar Geliştirmek

  • Real-time Colors App
  • Chat App

Npmjs Üzerinde Component Paylaşmak

Localization

  • React-intl

Unit Testing (Jest)

  • Neden test yazarız?
  • Test ortamı
  • Component unit testleri nasıl yazılır?

Deploying

  • sh
  • Netlify
  • Custom server

Ön Koşullar

Javascript Programlama bilgisine sahip olmak