React JS ile Node JS Bağlantısı

ReactJS, bilindiği üzere kullanıcı arayüzleri oluşturmak için kullanılan açık kaynaklı bir JavaScript kitaplığıdır. SPA (Tek Sayfa Uygulaması) oluşturmak için günümüzde yaygın olarak kullanılmakla birlikte geniş bir geliştirici topluluğuna sahiptir.

NodeJS ise tek iş parçacıklı yapısı nedeniyle öncelikle engelleme yapmayan, olaya dayalı sunucular için kullanılan back-end JavaScript çalışma ortamıdır. Geleneksel web siteleri ve arka uç API hizmetleri için kullanılır, ancak gerçek zamanlı, push tabanlı mimariler düşünülerek tasarlanmıştır.

Backend tarafında Node JS ile Frontend tarafında React JS bağlantısını en basit şekliyle ve en anlaşılabilir ölçüde nasıl sağlarız hep beraber bakalım.

Öncelikle işletim sistemine Node JS kurulmuş olması gerekiyor.

Biz Visual Studio Code kullanarak yazamaya başlıyoruz.

Frontend ve backend adında iki ayrı dizin oluşturalım.

Backend : Node JS

Backend dizin içerisinde npm init ile projeyi başlatalım.
Express framework’ü ve nodemon modülünü yüklüyoruz.

npm init
npm install express nodemon

Dizin içerisinde server.js adında bir dosya oluşturduktan sonra kodlarımızı yazalım ve terminalde npm run dev ile çalıştıralım;

server.js

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.post("/post", (req, res) => {
  console.log("successful connection");
  res.redirect("/");
});
  
const PORT = process.env.PORT || 8080;
  
app.listen(PORT, console.log(`Server started on port ${PORT}`));

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  },

npm run

Tarayıcımızda http://localhost:8080/ adresine gittiğimizde “Hello World” yazısını görmemiz gerkeiyor.

Frontend : React JS

Açmış olduğumuz ana dizinde terminale aşağıdaki komutları yazarak React Js kurulumunu başlatıyoruz.

npx create-react-app frontend
cd frontend
npm start

Karşımıza tarayıca üzerimde varsayılan React Js projesi açılmış olması gerekiyor.

Şimdi sıra Node Js ile React Js arasında bağlantı kurmaya geldi.

Frontend dizini içerisinde yer alan package.json dosyasına aşağıda yer alan satırı ekliyoruz;

"proxy": "http://localhost:8080

Buraya kadar her şey tamam fakat bağlantının gerçekleştiğini anlamak adına React Js dosyası app.js’de bağlan butonu ekleyerek test edelim.

app.js

import logo from "./logo.svg";
import "./App.css";
  
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" 
             alt="logo" />
          
<p>Buton'a tıkladıktan sonra konsola bakın.</p>
  
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <form action="../../post" method="post" 
              className="form">
          <button type="submit">Bağlan</button>
        </form>
      </header>
    </div>
  );
}
  
export default App;

Şimdi bir terminalde npm run ile Node Js’i çalıştırın, aynı anda başka bir terminalde de npm start’ı kullanarak React Js’i başlatın. Tarayıcada çıkan arayüzde bağlan butonuna tıklayarak konsolü kontol ederek bağlantı sağlayıp sağlamadığınızı kontrol edebilirsiniz.