Drupal ile React Nasıl Kullanılır?

Bu nedenle kullanıcıların hoşuna gidecek şekilde göze hitap eden, etkileşimli ve hızlı arayüzler oluşturmanıza olanak sağlar. Öteki yandan Drupal ise yine oldukça hızlı ve düzenlenebilir bir CMS'dir.

Bu yazımızda bu iki teknolojinin iki farklı birleşiminden söz edeceğiz.

Headless Drupal - Embedded React Karşılaştırması

Öncelikle React'ı Drupal ile kullanırken iki farklı seçenekten söz edebiliriz. İlki Drupal'ın sadece backend tarafında ve React'ın frontend'in tamamını oluşturduğu seçenektir. Bu durumda frontend için kullanılan tüm yapıların React ile bir uygulamaya çevrilmesi gerekmektedir. İkinci seçenek olarak bir React uygulamasını Drupal'daki herhangi bir yere yerleştirebiliriz. Yazının devamında bu iki seçeneği detaylandırıyor olacağız.

Headless Drupal & React Frontend

Bu senaryoda Drupal backend tarafında kullanılarak kendi arayüzünden bağımsız bir şekilde çalışmaktadır. React ise frontend'in tamamını oluşturur. Sistemler tamamen aynıdır. JSON:API veya GraphQL REST üzerinden haberleşir.

• Mobil cihazlardaki kullanıcılar için Progressive Web App (PWA) oluşturulabilirsiniz.
• Drupal'da veri depolayan tek sayfalık bir uygulama oluşturabilirsiniz.
• Drupal üzerine kurulu büyük bir CRM sisteminiz olduğunu varsayalım ve yerel mağazalarınızı yönetmek isteyen acenteleriniz olsun. Bu acenteler CRM yönetimi için karmaşa yaşamadan kullanabildikleri bir arayüze ihtiyaç duyabilir. Bu durumda sadece ihtiyaçlarına yönelik bir arayüz için Headless Drupal & React Frontend kullanabilirsiniz.
• Bazı verileri büyük bir web sitesinden çeken daha küçük bir web sitesi oluşturabilirsiniz. Örneğin büyük bir haber dergisinin yalnızca belli kategorilerindeki haberleri gösterebilirsiniz.

Headless Drupal Nasıl Oluşturulur?

Headless Drupal'ı seçtiyseniz HTTP istekleriyle iletişime geçen ayrı bir React uygulaması oluşturmanız gerekir. React backend tarafında ne olduğunu umursamadığı için API'nin düzgün şekilde çalışması yeterli olacaktır.

Facebook başlamanıza yardımcı olacak bir React projesi oluşturmuş. (React Başlangıç Projesi)

Aşağıdaki yollardan birini kullanarak Drupal 8 ile React'ı Headless Drupal olacak şekilde haberleştirebilirsiniz.

1. (Önerilen) Özellikle JSON:API modülüne göz atmayı unutmayın. Bu modül sayesinde arayüz üzerinden varlıklar için temiz uç noktalar oluşturabilirsiniz. Ayrıca bu modül Drupal 8.7 ve üzerinde çekirdeğe dahil edilmiş durumda, kullanmak için modülü aktif etmeniz yeterli. (JSON:API Dökümanı)
2. Eğer isterseniz React ile Drupal bağlantısında kullanabileceğiniz halen geliştirilmekte olan bir GraphQL modülüde mevcut. (GraphQL Modülü)

Eğer örnek bir Headless Drupal projesi görmek isterseniz de ContentaCMS'e göz atmayı unutmayın. Ayrıca ContentaCMS React versiyonunu da buradan görüntüleyebilirsiniz.

Drupal'a Gömülü React Uygulaması

Her zaman Headless bir uygulamaya ihtiyaç duymazsınız. Fakat kimi zaman bazı sayfalarda yüksek etkileşimli öğeler isteyebilirsiniz. Bu durumda bunun gibi bir bileşen oluşturmak ve Drupal tarafında oluşturulan bir sayfaya gömülü olarak React.js kullanmak çok daha mantıklıdır.

Drupal'a Gömülü React Uygulaması Nasıl Oluşturulur?

Öncelikle sitenize React kütüphanesini eklemelisiniz. (Tıpkı başka bir js kütüphanesini ekleyeceğiniz gibi) Komut dosyasının her sayfada gerekli olup olmamasına, bir temanın veya modülün bir parçası olmasına bağlı olarak web sitenize bir js kütüphanesi ekleyebileceğiniz yollar var. Detaylara aşağıdaki iki linkten ulaşabilirsiniz.

1. Add JavaScript to Your Theme or Module
2. Adding Stylesheets (CSS) and JavaScript (JS)

Önerilmeyen ancak yukarıdaki yöntemden daha hızlı şekilde test amaçlı çalıştırılabilecek bir yöntem bulunmakta. Aşağıdaki satırları html.html.twig dosyasındaki head etiketleri arasına ekleyebilirsiniz.

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Uygulamanızın dosyasını da alttaki gibi yukarıdaki kodun hemen altına eklemelisiniz.

<script src="/path/to/my/scripts/benim-react-uygulamam.js"></script>

Ardından React uygulamanızın arayüz tarafında işlenebilmesi için herhangi bir Drupal sayfasına html etiketini eklemeniz gerekmektedir.

<div id="benim-react-uygulamam" />

benim-react-uygulamam.js dosyasında ise uygulamanızı oluşturmanız gerekmekte, aşağıdaki kodda bir örneğini bulabilirsiniz.

ReactDOM.render(
React.createElement(MyApp, {title: 'Merhaba Dünya!'}),
  document.getElementById('benim-react-uygulamam');
);

Artık hazırsınız, bir Drupal sayfasına gömülü React uygulamanız var. Bununla beraber ister Headless Drupal örneğindeki gibi REST API'den veri alabilir veya drupalSettings global değişkenini ilk veri kümeniz olarak kullanabilirsiniz.

function Welcome(props) {
 if(props.isfront == true) {
return <h2>Anasayfaya hoşgeldiniz<h2>
}
else{
return <h2>Diğer sayfalardan birine hoşgeldiniz</h2>
}
ReactDOM.render(
React.createElement(Welcome, {isfront: drupalSetting.path.isFront}),
    document.getElementById('benim-react-uygulamam');
);

Drupal'daki herhangi bir veride değişiklik yapmak istiyorsanız, hala bir API kullanmanız gerektiğini ve değişikleri oraya iletmeniz gerektiğini unutmayın.