REACT.JS İLE PHP KULLANIMI | Cevap #5199

Web geliştirme konusunda yeniyim. Belli bir seviye javascript öğrendim.
Ve şu anda react.js öğrenmek istiyorum. Php sevdasını TAYFUN abi sen içimize saldığın için react ile birlikte backend işlemlerini php ile yapmak istiyorum. Yaptığım araştırmalara göre bu mümkün. Fakat kaynakların tamamına yakını yabancı kaynak olduğu için çok bir verim alamadım. Sizden rica etsem benim gibi react dünyasına yeni başlamayı düşünenler için react ile php nasıl kullanılır bu şekilde bir video ve ya makale hazırlaya bilirmisin?

Teşekkürler :)

Not: Edindiğim bilgilerde localde yapıyorlardı bu işlemi. Ben dosyalarımı hostinge geçirdiğimde orda işler nasıl olucak. Çünkü localde react'ın bulundugu portan apachenin bulundugu porta istek atarak yapılıyor anladığım kadarıyla. Hosting üzerinde bu işlem nasıl olucak isteği nereye atıcaz tam olarak anlayamadım.
@tayfunerbilen

React kullanırken kullanacağın back-end dilinin hiçbir önemi yok. İster PHP kullan ister Python ister Nodejs.
Burada önemli olan react tarafından bu back-end'e nasıl istek atacağım.

Bunun için native fetch() kullanılabilir ya da alternatif olarak SWR, React Query ya da axios paketleri kullanılabilir.

Back-end tarafında ise json formatında bir veri dönmen gerekiyor. Dolayısı ile api.php dosyan olsun ve içinde şöyle basit bir şey olsun.

<?php

$name = $_POST['name'];

echo json_encode([
    'text' => 'Yazdığınız cevap = ' . $name
]);

Ve react'de bu php dosyasına istek atıp sonucu göstermek istersen;

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [name, setName] = useState();
  const [data, setData] = useState();

  const getName = () => {
    const data = new FormData();
    data.append('name', name);
    fetch(`https://localhost/api.php`, {
      method: 'POST',
      body: data
    })
      .then(res => res.json())
      .then(data => setData(data.text));
  };

  return (
    <>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <button onClick={getName}>İstek At</button>

      {data && <div className="result">API'den dönen istek = {data}</div>}
    </>
  );
}

Not: eğer CORS hatası alırsan php dosyanın başına şunu eklemeyi unutma

header("Access-Control-Allow-Origin: *");

Örnek demo: https://stackblitz.com/edit/react-php-ornek?file=src/App.js

Bir diğer konuda bunu nasıl yayınlacağın? Önce react projeni build ediyorsun.

yarn build

Ve build klasöründe aslında html, css ve javascript dosyaların var. Bunu sunucuna atacaksın, herhangi bir sunucuda hiçbir ayar yapmadan çalıştırabilirsin sonuçta javascript projesi çıkartıyorsun.