React İle Temel Bir Web Uygulaması Geliştirme

React, Facebook tarafından geliştirilen ve kullanıcı arayüzü oluşturmak için kullanılan bir JavaScript kütüphanesidir. React, özellikle tek sayfa uygulamaları (SPA) geliştirmek için popülerdir ve bileşen tabanlı bir yaklaşım sunar. Bu makalede, React kullanarak basit bir not defteri uygulaması oluşturmayı öğreneceğiz.

Adım 1: React Projesi Oluşturma

Öncelikle, bir React projesi oluşturmak için Node.js ve npm'in yüklü olması gerekiyor. Terminal veya komut istemcisine şu komutu yazarak yeni bir React projesi başlatabilirsiniz

npx create-react-app not-defteri

Bu komut, "not-defteri" adında yeni bir React projesi oluşturacaktır.

Adım 2: Bileşenleri Oluşturma

Proje oluşturulduktan sonra, src klasörü içinde NoteApp.js adında yeni bir dosya oluşturun. Bu dosyada, basit bir not defteri uygulaması için ana bileşenimizi tanımlayalım

import React, { useState } from 'react';

const NoteApp = () => {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState('');

  const addNote = () => {
    if (newNote.trim() !== '') {
      setNotes([...notes, newNote]);
      setNewNote('');
    }
  };

  return (
    <div>
      <h1>Not Defteri</h1>
      <ul>
        {notes.map((note, index) => (
          <li key={index}>{note}</li>
        ))}
      </ul>
      <div>
        <input
          type="text"
          value={newNote}
          onChange={(e) => setNewNote(e.target.value)}
        />
        <button onClick={addNote}>Not Ekle</button>
      </div>
    </div>
  );
};

export default NoteApp;

Bu bileşen, basit bir not defteri uygulaması oluşturmak için gerekli temel işlevselliği içerir. Her not eklendiğinde, notlar listesi güncellenir ve kullanıcıya yeni bir not eklemek için bir giriş alanı sağlanır.

Adım 3: Ana Uygulama

Ana uygulama bileşenini src/index.js dosyasında kullanarak uygulamayı başlatın.

import React from 'react';
import ReactDOM from 'react-dom';
import NoteApp from './NoteApp';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <NoteApp />
  </React.StrictMode>,
  document.getElementById('root')
);

Bu adımları takip ettikten sonra, npm start komutunu kullanarak React uygulamanızı başlatabilir ve tarayıcınızda http://localhost:3000 adresinde çalışan basit bir not defteri uygulamasını görebilirsiniz.

Bu temel örnek, React'in nasıl kullanılacağını anlamanıza yardımcı olacak. Daha sonra, bu uygulamayı genişletebilir ve geliştirebilirsiniz. İyi kodlamalar