sanal pos'un react ile bir baglantisi yok, genelde bir form submit etmekle ilgili entegrasyon tarafi react'de dolayisi ile react'e ozgu bir konu degil pos alacagin yerle alakali bilgin olmasi lazim

webStorm'un yeni ui'ini aktif ederek kullandim, ayarlardan sen de aktif edebilirsin :) ancak bu kadar bireysel sorulari dogrudan burada sormayi dogru bulmuyorum, videonun altina yazsaydin da soylerdim, bir dahakine daha duyarli olursan canini yerim <3

oncelikle iyi ogrenmeler, uzun bir surec, keyifli bir surec, bazen sancili bir surec olsada, basta kodu yazip calistigindan emin olursun, sonra kodunu refactor eder daha iyi nasil yazarim diye dusunursun, sonra daha performansli nasil yazarim diye dusunursun, kod tekrari nasil yapmam diye dusunursun vs. vs. bunlar zamanla oturur.

senin koduna ufak bir yorumum olacak, isimlendirmede TodoForm demissin en ust component'ine ama form ile ilgili bir sey olmadigi icin belki Todos olsa component'in adi daha iyi olur.

ayrica muhtemelen yeni basladigin icin state'i useState ile tutuyorsun ve parent'dan child component'lere kullanmak icin prop geciyorsun, bunun yerine react'in kendi icinde bulunan context yapisini deneyebilirsin.

TodoHeader component'i yerine AddTodo diye isimlendirip icinde form kullanarak islemlerini onSubmit'de handle edebilirsin.

Todos ve Todo componentlerin teorida ayni isi yapiyor, mantik olarak Todos icinde map'leyip Todo icinde todo'yu gostermen daha dogru olurdu.

Simdi tum bu yazdiklarima gore kodunu yeniden yazacak olsam soyle yazardim:

context/todo.js

import { createContext, useContext, useState } from "react";

export const TodoContext = createContext();
export const useTodos = () => useContext(TodoContext);

export const TodoProvider = ({ children }) => {
  const [todos, setTodos] = useState([]);

  const addTodo = (data) => {
    setTodos((todos) => [...todos, data]);
  };

  const removeTodo = (key) => {
    setTodos((todos) => todos.filter((todo, i) => i !== key));
  };

  const removeAllTodos = () => {
    setTodos([]);
  };

  // child componentlerin ulasacagi datalar
  const contextData = {
    todos,
    addTodo,
    removeTodo,
    removeAllTodos
  };

  return (
    <TodoContext.Provider value={contextData}>{children}</TodoContext.Provider>
  );
};

burada react'in context yapisi ile state'lerimizi child componentlerde kullanabilmek icin global olarak yonetiyoruz. Ayrica todo ekleme, silme, tumunu silme gibi metodlarida burada yazip context'in icine atiyorum, boylece useTodos() cagirdigimiz her yerde contextData icindekilere erisebiliyoruz.

components/add-todo.jsx

import { useState } from "react";
import { useTodos } from "../context/todo";

export default function AddTodo() {
  const { addTodo } = useTodos();
  const [todo, setTodo] = useState("");

  const handleChange = (e) => {
    e.preventDefault();
    addTodo({
      title: todo
    });
    setTodo("");
  };

  return (
    <form onSubmit={handleChange}>
      <input value={todo} onChange={(e) => setTodo(e.target.value)} />
      <button disabled={!todo} type="submit">
        Ekle
      </button>
    </form>
  );
}

gordugun gibi, todo ekleme component'inde eklenecek todo'yu context icindeki addTodo metodunu cagirip kullaniyoruz.

components/todos.jsx

import { useTodos } from "../context/todo";
import Todo from "./todo";

export default function Todos() {
  const { todos, removeAllTodos } = useTodos();

  const deleteHandle = () => {
    removeAllTodos();
  };

  if (todos.length === 0) {
    return <div>hic todo eklenmemis :(</div>;
  }

  return (
    <>
      {todos.map((todo, key) => (
        <Todo data={todo} id={key} key={key} />
      ))}
      <button onClick={deleteHandle}>Tumunu sil</button>
    </>
  );
}

burada da ayni mantikta todos dizisini ve removeAllTodos metodunu context'en aliyoruz.

components/todo.jsx

import { useTodos } from "../context/todo";

export default function Todo({ data, id }) {
  const { removeTodo } = useTodos();
  const deleteHandle = () => {
    removeTodo(id);
  };

  return (
    <div>
      {data.title}
      <button onClick={deleteHandle}>Sil</button>
    </div>
  );
}

silme isleminde ise dizideki index numarasina gore yaptim, bu elbette rastgele bir id uretilip todo icinde tutulsaydi ona gorede eslestirme yapip kullanabilirsin, basit bir todo uygulamasi oldugu icin bunu yapmadim simdilik.

app.jsx

import { TodoProvider } from "./context/todo";
import AddTodo from "./components/add-todo";
import Todos from "./components/todos";
export default function App() {
  return (
    <TodoProvider>
      <AddTodo />
      <Todos />
    </TodoProvider>
  );
}

Son olarak TodoProvider i context dosyamizdan alip diger component'leri bunun icine yaziyoruz, bu sayede diger componentlerde context icindeki degerlere erisip islem yapabiliyoruz.

calisan ornegine suradan bakabilirsin:
https://codesandbox.io/s/sleepy-volhard-rz7645

anlamadigin ya da merak ettigin bir sey olursa sormaktan cekinme :)

bu uzun zamandir problem olmayan bir konu, biz sirket olarak butun projelerimizi react ile yaziyoruz on yuzlerini ve bu projelerin %90'i kurumsal firmalar, sok, arcelik vb.

dolayisi ile bu endise cok makul degil, ancak elbette semantik etiketleri kullanabilirsin, bu her zaman onerilen bir sey, kaynakta olmamasi arama motorlarinin bunu yorumlamayacagi anlamina gelmiyor, ozellikle google tarafinda sen siteye girince ne giriyorsan o da onu goruyor ve ona gore yorumluyor, bunu defalarca react ile site gelistirmis ve seo konusunda calismis birisi olarak gonul rahatligiyla soyleyebilirim ki ssr seo icin bir zorunluluk degildir :)

index.html'in oldugu dizine yani ana dizine .htaccess dosyasi olusturup icine sunu yazman yeterli:

RewriteEngine On
RewriteRule ^([0-9a-zA-Z-_/]+)$ index.html [QSA]

orta olcekli projede mysql'de yeterli, gunluk milyonluk veriyi isleyebilecek kapasitede

mongodb ve postgre'ye gelecek olursak, birisi nosql bir veritabani, digeri relational, yani birisi key-value ile islem yaparke digeri tablolar arasi iliskisel bir yonetim sagliyor.

sonuc olarak, eger iliskisi fazla bir sistem yaziyorsan mongo ile yazmak bana mantikli gelmiyor, iliski kurmanin yollari var ancak yapi geregi daha ugrastirici ve seni daha cok yoracaktir