React ile Uygulama Geliştirme

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

Açıklama

    Bu, modern Web geliştirme becerilerini ve standartlarını daha yeni kullanmaya başlayan katılımcılar için tasarlanmış, üç gün süren giriş düzeyi bir eğitimdir. Bu eğitim, katılımcıların React ile durum bilgisiz ve eşzamansız uygulamalar geliştirmek üzere Reactive paradigmasını uygulamak için gerekli uygulamalı becerilere sahip olmalarını sağlar.

     

    Eğitim, katılımcılara ReactJS ve evrimi konusunda ayrıntılı bir şekilde rehberlik eder ve basit bir React bileşeni oluşturmak için gerekli pratik becerileri kazandırır.  Daha sonra katılımcılar, kullanımını daha iyi anlayabilmeleri için aynı React bileşenini JSX sözdizimini kullanarak oluşturacaklardır.  Katılımcılar, Facebook Graph API’yi nasıl yapılandıracaklarını, “beğeni” listelerini nasıl alacaklarını ve bunları React kullanarak nasıl tercüme edeceklerini öğrenecekler.

    Sonrasında, UI’yi bileşenlerine ayıracaklar, bunlar arasında nasıl iletişim kurulacağını görecekler ve UI’nin durumlarını yansıtması için kullanıcıların giriş ve olaylarına nasıl yanıt vermesi gerektiğini öğrenecekler. Katılımcılar ayrıca süreçteki ES6 sözdizimlerini de öğrenecekler.  Daha sonrasında eğitim, istemci tarafı Web uygulamaları geliştirmek için kullanılan ve React’ın oluşturulabilir görünüm bileşenlerini tek yönlü bir veri akışı kullanarak tamamlayan FLUX ve FLUX mimarisiyle devam edecek.

     

    Eğitimin sonuna doğru, katılımcılar bileşenlerini nasıl yeniden kullanılabilir hale getireceklerini ve bunları nasıl test edebileceklerini ve üretim ortamına nasıl dağıtabileceklerini öğrenecekler. Eğitimde son olarak, sunucu tarafında React, Redux ve diğer ilgili, kullanışlı konseptler gibi “ileri düzey” konulara değinilecek.

     

    Bu eğitimde neler öğreneceksiniz?

    • ReactJS ile ilgili genel bilgiler
    • İlk React bileşenini yükleme ve oluşturma
    • JSX kullanarak ReactJS bileşenini yeniden yapılandırma
    • React uygulamanızı Facebook girişi ve Graph API ile entegre etme ve Facebook’ta beğendiğiniz sayfalardaki verileri alarak bunları tarayıcıda gösterme
    • UI element olaylarını React ile yönetme, kullanıcı girişlerine yanıt verme ve durum bilgisi olan bileşenler oluşturma
    • Entegrasyon için bazı temel yaşam döngüsü olaylarını kullanma ve React dünyasındaki ES6 sözdizimleri hakkında bilgiler
    • FLUX mimarisi hakkında bilgiler ve React ile FLUX kullanarak bir uygulama oluşturma
    • Bir bileşeni karışımlar ve doğrulama yardımcılarıyla daha fazla yeniden kullanılabilir hale getirme ve bileşenleri doğru bir şekilde yapılandırma
    • ReactJS kodlarınızı test etmenizi sağlayacak teknikleri keşfedin.
    • Kodlarınızı Webpack ve Gulp kullanarak dağıtın.

     

    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