https://github.com/kadirkarabacak/render-props

https://github.com/kadirkarabacak/render-props

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kadirkarabacak/render-props
• Owner: KadirKarabacak
• Created: 2024-01-23T11:35:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-01-27T20:34:37.000Z (12 months ago)
• Last Synced: 2024-01-27T21:42:42.224Z (12 months ago)
• Language: JavaScript
• Size: 250 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **Render Props**

Bir componenti yeniden kullanabilmek için oluşturulan yapıdır. Örneğin bir "List" componentimiz var 👉 


-   **function List ( { render } ) { }** propunu alıyoruz ve bu component içerisinde 👉 **
{displayItems.map(render)}
** şeklinde kullanabiliriz. Daha sonra List componentini her kullandığımızda render propuna verdiğimiz component map methodundan sonra gelen yere yerleşir.

-   render propumuz her zaman bir **fonksiyon** olmalıdır.


# **Higher Order Components**

-   Higher order component basitçe bir fonksiyondur ve bir component döndürür. 3. taraf bir kütüphaneden gelen hazır componentler üzerinde değişiklik yapabilmek için kullanışlıdır.

-   Fonksiyonumuza componentimizi parametre olarak veririz ve fonksiyon içerisinden yeni bir component döndürüp parametre olarak verdiğimiz componentimizi yeni dönecek component içerisinde istediğimiz şekilde kullanabiliriz.

# **Compound Component Pattern**

-   Bu linke göz atabilirsin.

-   Compound Component ( Bileşik Bileşen ) bizleri bir component üzerinden çok fazla prop geçirmekten kurtarır ve component içerisindeki değerleri istediğimiz şekilde düzenlememize olanak verir.

-   Aynı componenti bazı kısımları olmadan veya daha fazlasını dahil ederek, tamamen farklı bir stilde kullanabiliriz.

-   State farklı instance'larda tamamen encapsulated (kapsüllenmiştir), birbirinden bağımsız şekilde hareket edebilirler.

-   **Örneğin** 👇

-   <"Counter

    iconIncrease="+"

    iconDecrease="-"

    label="My NOT so flexible counter"

    hideLabel={false}

    hideIncrease={false}

    hideDecrease={false}

    />

-   **Yerine** 👇

-   <"Counter>

    <"Counter.Decrease icon="-" />

    <"Counter.Count />

    <"Counter.Label>My super flexible counter"Counter.Label>

    <"Counter.Increase icon="+" />

    <"/Counter>

-   İlk olarak bir context oluşturmamız lazım. **const CounterContext = createContext()**

-   İkinci adımımızda bir **parent** component oluşturmalıyız.

-   Üçüncü olarak **child** componentleri oluşturmamız lazım. [ Decrease, Increase ... ]

-   Dördüncü adımda ise **Child componentleri Parent componente** properties olarak eklemeliyiz.