React (ReactJS olarak da bilinir), işlevsellik ve özellikler açısından AngularJS'e oldukça benzer; ön uç uygulamaları tasarlamak için kullanılır. JavaScript kitaplığı ve önceden tanımlanmış bir dizi API ve işlev, geliştiricilerin etkileşimli kullanıcı arabirimi tasarımları tasarlamasına olanak tanır. ReactJS ve AngularJS arasındaki temel fark, AngularJS'nin ağırlıklı olarak web uygulamalarını tasarlamak ve uygulamak için kullanılırken; ReactJS, tek sayfalı uygulamalar ve hatta mobil uygulamalar için tercih edilebilir ve belirli amaca uygun özel kitaplıklara sahiptir.

ReactJS aksine, NodeJS sunucu tarafı işlevselliği üzerinde odaklanır ve o yürütür dışında internet tarayıcısının kod JavaScript kütüphaneleri için kullanılır.

NodeJS ve ReactJS entegrasyonunun arkasındaki sebep

Daha önce yukarıdaki bölümde ima ettiğimiz gibi; NodeJS, işlevsellik veya kullanılabilirlik açısından ReactJS'den tamamen farklıdır - biri istemci tarafında çalışırken, diğeri sunucu tarafında çalışır.

Artık tüm kodlar ve iş mantığı istemci tarafında (yani tarayıcıda) çalışmıyor. Sunucu tarafında belirli doğrulamaların veya iş mantığının yürütülmesi gereken belirli gereksinimler vardır. Bu tür durumlarda, ReactJS, NodeJS ile entegre edilmiştir, böylece ReactJS tarafından gönderilen istek sunucu ucunda NodeJS tarafından yakalanır; ve gerekli doğrulama işlemleri gerçekleştirilir.

React API'yi NodeJS sunucusuna kurma

Bir React uygulaması kurmanın ilk adımı, ön uç geliştirme sürecine yardımcı olabilecek 'React Uygulaması Oluştur' aracını kurmaktır. Ancak bu uygulama, sunucu tarafında yürütmeleri desteklemez. Bunun için sonraki adımlar, bir 'Express Node sunucusunun' React API'ye dinamik olarak nasıl bağlanabileceğini gösterecektir.

Yukarıdaki kod çalıştırıldığında; React uygulaması konuşlandırılmaya hazırdır. Bir sonraki adım, bunu bir Node sunucusuyla entegre etmeye odaklanacaktır. Sunucu bağımlılıkları aşağıdaki kod parçacığı kullanılarak entegre edilebilir.

Şekilde gösterildiği gibi, Node ortamı kodda oluşturulmuştur. Dikkat edilmesi gereken dört temel faktör vardır:

1. 'Node-env-run' - Bu işlev, daha fazla referans için NodeJS kitaplıkları ile ilgili tüm ortam değişkenlerinin yüklenmesine yardımcı olur
2. 'Nodemon' - Bu işlev, NodeJS sunucusunu mevcut sistemde herhangi bir değişiklik yapıldığında otomatik olarak yeniden başlatır.
3. 'Npm-run-all' - Bu işlev, geliştiricilerin sunucuda aynı anda birden fazla NodeJS komut dosyası yürütmesine olanak tanır
4. Bu işlevlerin dışında, uygun sunucu günlüğü kaydını sağlamak için başvurulan birkaç kaydedici özelliği de vardır.

Bu nedenle, bu aşamada sunucu çalışmaya başlar. Ancak istenilen sonucu alabilmek için; hem Node sunucusunun hem de ReactJS istemci komut dosyasının aynı anda yürütülmesi gerekir; makalenin son bölümünde ele alınacaktır.

React uygulamasını ve Node sunucusunu aynı anda çalıştırma

Her ikisini de ayrı ayrı çalıştırırken veya başlatırken oldukça basit olabilir; her ikisini de birbiriyle senkronize olarak yürütmek birkaç adım daha gerektirir. İlk adım, bir 'vekil' yaratılmasıyla ilgilidir; bu da sunucunun çalıştığı aynı IP ve bağlantı noktasına yönlendirilmelidir.

Sunucu proxy'si belirtilen bağlantı noktasına yönlendirildiğinde; bir sonraki adım, iki işlevi kullanmaktır - 'npm-run-all' (geliştiricilerin sunucuda birden fazla işlevi çalıştırmasını sağlar) ve işlemlerin birbirine paralel olarak yürütülmesini sağlayacak 'run-p'. Bunu yürütmek için kullanılan komut dosyası, referans için aşağıda belirtilmiştir -

Yukarıdaki betiği çalıştırmak, hem Node sunucusunun hem de React uygulamasının aynı anda çalışmasını sağlar.