Visual Studio'da React uygulaması oluşturma

2025-06-12

Bu öğreticide JavaScript ve Visual Studio 2022 kullanarak bir to-do listesi web uygulaması için React ön ucu oluşturacaksınız. Bu uygulamanın kodu ToDoJSWebAppadresinde bulunabilir.

Önkoşullar

Aşağıdakileri yüklediğinizden emin olun:

Visual Studio 2022 veya üzeri. Visual Studio'yu ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin.
npm (https://www.npmjs.com/), which is included with Node.js.

React ToDo List uygulamasını oluşturma

Visual Studio'da, Dosya > Yeni > Proje'yi seçerek Yeni Bir Proje Oluştur iletişim kutusunu açın, React App JavaScript şablonunu seçin ve ardından İleri tuşuna basın.
Proje'yi TodoWebApp adlandırın ve 'i seçerek'yi oluşturun.

This creates the JavaScript project using the vite command line tool.
Çözüm Gezgini'nde src klasörüne sağ tıklayın ve Yeni Klasör > Ekleseçeneğini seçin. ve componentsadlı yeni bir klasör oluşturun.

Bileşenleri bileşenler klasörüne yerleştirmek yaygın bir kuraldır, ancak bu gerekli değildir.
Right-click the new folder, select Add > New Item, then choose React JSX Component File in the dialog box, name it TodoList, and click Add.

Bu, bileşenler klasöründe yeni bir JSX dosyası oluşturur.
TodoList bileşenini açın ve varsayılan içeriği aşağıdakilerle değiştirin:
```
function TodoList() {
  return (
    <h2>TODO app contents</h2>
  );
}
```
Bu bileşen, ileride değiştireceğiniz bir başlık görüntüler.

Ardından, bu bileşeni uygulamaya bağla. App.jsx, to-do listesi uygulamasını temsil eden yüklenen ana bileşendir. Bu bileşen main.jsx dosyasında kullanılır.
Çözüm Gezgini'nde App.jsx'ı açın, en üstteki tüm içeri aktarmaları kaldırın ve return ifadesinin içeriğini temizleyin. Dosya aşağıdaki gibi görünmelidir.
```
function App() {
  return (
    <>
      <TodoList />
    </>
  );
}
export default App;
```
TodoList bileşenini eklemek için, imlecinizi parçanın içine getirin ve <TodoL RETURNyazın. Bu, bileşeni ve içeri aktarma ifadesini ekler.

Ardından CSS dosyalarını temizleyin.
App.css açın ve tüm içeriği silin.

Index.css açın ve :rootstilleri dışındaki tüm içeriği kaldırın:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
}

Uygulamayı çalıştırma

Araç çubuğundan Hata Ayıklamayı Başlat düğmesini seçin veya F5 klavye kısayolunu basın.

Uygulama bir tarayıcı penceresinde açılır.

Tarayıcıda çalışan uygulamayı gösteren ekran görüntüsü.

Uygulamaya to-do liste işlevleri ekleme

Uygulamayı çalışır durumda bırakabilirsiniz. Siz değişiklik yaparken uygulama Vite'in sık erişimli modül değiştirme desteğini kullanarak en son içerikle otomatik olarak yenilenir. Klasör ekleme veya dosyaları yeniden adlandırma gibi bazı eylemler, hata ayıklamayı durdurmanızı ve ardından uygulamayı yeniden başlatmanızı gerektirir, ancak genel olarak uygulamanızı geliştirirken arka planda çalışır durumda bırakabilirsiniz. tanımlamaya başlayabilmemiz için TodoList.jsx bileşenini açın.

Çözüm Gezgini'nde TodoList.jsx açın ve to-do liste girdilerini göstermek ve yönetmek için gereken kullanıcı arabirimini ekleyin. İçeriği aşağıdaki kodla değiştirin:
```
function TodoList() {
  return (
    <div>
      <h1>TODO</h1>
      <div>
        <input type="text" placeholder="Enter a task" required aria-label="Task text" />
        <button className="add-button" aria-label="Add task">Add</button>
      </div>
      <ol id="todo-list">
        <p>existing tasks will be shown here</p>
      </ol>
    </div>
  );
}
export default TodoList;
```
Yukarıdaki kod, yeni to-do görevi için bir giriş kutusu ve girişi göndermek için bir düğme ekler. Ardından Ekle düğmesini bağlamış olursunuz. useState React kancasını kullanarak biri eklenen görev için, diğeri de mevcut görevleri depolamak üzere iki durum değişkeni ekleyin. Bu öğreticide görevler kalıcı depolama alanında değil bellekte depolanır.
TodoList.jsx'i içe aktarmak için aşağıdaki içe aktarma deyimini useState'a ekleyin.
```
import { useState } from 'react'
```
Ardından, durum değişkenlerini oluşturmak için bu kancayı kullanın. aşağıdaki kodu return deyiminin üzerine TodoList işlevine ekleyin.
```
const [tasks, setTasks] = useState(["Drink some coffee", "Create a TODO app", "Drink some more coffee"]);
const [newTaskText, setNewTaskText] = useState("");
```
Bu, veriler ve bu değişkenleri güncelleştirmek için çağırabileceğiniz iki işlev için tasks ve newTaskTextolmak üzere iki değişken ayarlar, setTasks ve setNewTasks. Durum değişkeninin değeri değiştirildiğinde React, bileşeni otomatik olarak yeniden işler.

to-do öğeleri liste olarak göstermek için TodoList.jsx güncelleştirmeye neredeyse hazırsınız, ancak önce öğrenmeniz gereken önemli bir React kavramı var.

React'te bir öğe listesi görüntülendiğinde, listedeki her öğeyi benzersiz olarak tanımlamak için bir anahtar eklemeniz gerekir. Bu özellik, İşleme Listelerireact belgelerinde ayrıntılı olarak açıklanmıştır, ancak burada temel bilgileri öğreneceksiniz. Görüntülenecek to-do öğelerinin bir listesi var ve her öğe için benzersiz bir anahtarı ilişkilendirmeniz gerekiyor. Her öğenin anahtarı değişmemelidir ve bu nedenle dizideki öğenin dizinini anahtar olarak kullanamazsınız. Bu değerlerin ömrü boyunca değişmeyecek bir kimlik gerekir. Her to-do öğesi için benzersiz bir kimlik oluşturmak için randomUUID() kullanacaksınız.

Her to-do öğesinin anahtarı olarak UUID kullanarak TodoList.jsx oluşturun. TodoList.jsx aşağıdaki kodla güncelleştirin.

import React, { useState } from 'react';

const initialTasks = [
    { id: self.crypto.randomUUID(), text: 'Drink some coffee' },
    { id: self.crypto.randomUUID(), text: 'Create a TODO app' },
    { id: self.crypto.randomUUID(), text: 'Drink some more coffee' }
];

function TodoList() {
    const [tasks, setTasks] = useState(initialTasks);
    const [newTaskText, setNewTaskText] = useState("");

    return (
        <article
            className="todo-list"
            aria-label="task list manager">
            <header>
                <h1>TODO</h1>
                <form className="todo-input" aria-controls="todo-list">
                    <input
                        type="text"
                        placeholder="Enter a task"
                        value={newTaskText} />
                    <button
                        className="add-button">
                        Add
                    </button>
                </form>
            </header>
            <ol id="todo-list" aria-live="polite" aria-label="task list">
                {tasks.map((task, index) =>
                    <li key={task.id}>
                        <span className="text">{task.text}</span>
                    </li>
                )}
            </ol>
        </article>
    );
}
export default TodoList;

Kimlik değerleri TodoList işlevinin dışında atandığından, sayfa yeniden işlenirse değerlerin değişmeyeceğinden emin olabilirsiniz. When you try the app in this state, you'll notice that you can't type into the todo input element. Bunun nedeni, giriş öğesinin boş bir dize olarak başlatılmış olan newTaskText'e bağlı olmasıdır. Kullanıcıların yeni görevler eklemesine izin vermek için bu denetimdeki onChange olayını işlemeniz gerekir. Ayrıca Ekle düğmesi desteğini de uygulamanız gerekir.

TodoList işlevindeki return deyiminden hemen önce gerekli işlevleri ekleyin.
```
function handleInputChange(event) {
    setNewTaskText(event.target.value);
}

function addTask() {
    if (newTaskText.trim() !== "") {
        setTasks(t => [...t, { id: self.crypto.randomUUID(), text: newTaskText }]);
        setNewTaskText("");
    }
    event.preventDefault();
}
```
handleInputChanged işlevinde, giriş alanındaki yeni değer event.target.valuearacılığıyla geçirilir ve bu değer newTaskText değişkeninin değerini setNewTaskTextile güncelleştirmek için kullanılır. addTask işlevinde, setTasks kullanarak yeni görevi mevcut görevler listesine ekleyin ve öğenin kimliğini yeni bir UUID değeri olarak ayarlayın. giriş öğesini onChange={handleInputChange} içerecek şekilde güncelleştirin ve Ekle düğmesini onClick={addTask}içerecek şekilde güncelleştirin. Bu kod, olayı bu olayı işleyen işleve aktarır. Bunu takiben, görev listesine yeni bir görev ekleyebilmeniz gerekir. Listenin en altına yeni görevler eklenir. Bu uygulamayı daha kullanışlı hale getirmek için görevleri silme ve bir görevi yukarı veya aşağı taşıma desteği eklemeniz gerekir.
Silmeyi, yukarı ve aşağı taşımayı destekleyecek işlevleri ekleyin ve her eylem için bir düğme göstermek üzere işaretlemeyi güncelleştirin. Aşağıdaki kodu TodoList işlevine return deyiminin üzerine ekleyin.
```
function deleteTask(id) {
    const updatedTasks = tasks.filter(task => task.id != id);
    setTasks(updatedTasks);
}

function moveTaskUp(index) {
    if (index > 0) {
        const updatedTasks = [...tasks];
        [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
        setTasks(updatedTasks);
    }
}

function moveTaskDown(index) {
    if (index < tasks.length) {
        const updatedTasks = [...tasks];
        [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
        setTasks(updatedTasks);
    }
}
```
delete işlevi görev kimliğini alır ve bu kimliği listeden siler ve seçilen öğe hariç yeni bir dizi oluşturmak için Array filter() yöntemini kullanarak setTasks()çağırır. Diğer iki işlev öğenin dizinini alır çünkü bu iş öğe sıralamaya özgüdür. Hem moveTaskUp() hem de moveTaskDown(), seçilen görevi komşusuyla değiştirmek için dizi çözümleme ataması'ü kullanır.

Ardından görünümü bu üç düğmeyi içerecek şekilde güncelleştirin. Update the return statement to contain the following.

return (
    <article
        className="todo-list"
        aria-label="task list manager">
        <header>
            <h1>TODO</h1>
            <form className="todo-input" onSubmit={addTask} aria-controls="todo-list">
                <input
                    type="text"
                    required
                    autoFocus
                    placeholder="Enter a task"
                    value={newTaskText}
                    aria-label="Task text"
                    onChange={handleInputChange} />
                <button
                    className="add-button"
                    aria-label="Add task">
                    Add
                </button>
            </form>
        </header>
        <ol id="todo-list" aria-live="polite">
            {tasks.map((task, index) =>
                <li key={task.id}>
                    <span className="text">{task.text}</span>
                    <button className="delete-button" onClick={() => deleteTask(task.id)}>
                        🗑️
                    </button>
                    <button className="up-button" onClick={() => moveTaskUp(index)}>
                        ⇧
                    </button>
                    <button className="down-button" onClick={() => moveTaskDown(index)}>
                        ⇩
                    </button>
                </li>
            )}
        </ol>
    </article>
);

Daha önce ele aldığımız görevleri gerçekleştirmek için gereken düğmeleri eklediniz. Düğmelerde simge olarak Unicode karakterler kullanıyorsunuz. İşaretlemeye, ileride CSS eklemeyi desteklemek için bazı öznitelikler eklenmiştir. You might also notice the use of aria attributes to improve accessibility, which are optional but highly recommended. Uygulamayı çalıştırırsanız aşağıdaki çizim gibi görünmelidir.

Çalışan uygulamayı ve listeyi gösteren ekran görüntüsü

Artık TODO web uygulamasında aşağıdakileri gerçekleştirebilmeniz gerekir.

Görev ekle
Görevi sil
Görevi yukarı taşı
Görevi aşağı taşı

Bu işlevler çalışır, ancak to-do öğelerini görüntülemek üzere yeniden kullanılabilir bir bileşen oluşturmak için yeniden düzenleyebilirsiniz. to-do öğesinin işaretlemesi, yeni bir bileşen olan TodoItem içine aktarılır. Listenin yönetimi Todo bileşeninde kaldığından, geri çağırmaları Sil ve Taşı düğmelerine geçirebilirsiniz.

Başlamak için Çözüm Gezgini'nde bileşenleri klasörüne sağ tıklayın ve > ekle'yi seçin.
Açılan iletişim kutusunda React JSX Bileşen Dosyası'i seçin, TodoItem adını verin ve Ekleöğesini seçin.

Aşağıdaki kodu TodoItem'e ekleyin.

Bu kodda, görevi ve geri çağırmaları bu yeni bileşene özellik olarak geçirirsiniz.

import PropTypes from 'prop-types';

function TodoItem({ task, deleteTaskCallback, moveTaskUpCallback, moveTaskDownCallback }) {
    return (
        <li aria-label="task" >
            <span className="text">{task}</span>
            <button
                type="button"
                aria-label="Delete task"
                className="delete-button"
                onClick={() => deleteTaskCallback()}>
                🗑️
            </button>
            <button
                type="button"
                aria-label="Move task up"
                className="up-button"
                onClick={() => moveTaskUpCallback()}>
                ⇧
            </button>
            <button
                type="button"
                aria-label="Move task down"
                className="down-button"
                onClick={() => moveTaskDownCallback()}>
                ⇩
            </button>
        </li>
    );
}

TodoItem.propTypes = {
    task: PropTypes.string.isRequired,
    deleteTaskCallback: PropTypes.func.isRequired,
    moveTaskUpCallback: PropTypes.func.isRequired,
    moveTaskDownCallback: PropTypes.func.isRequired,
};

export default TodoItem;

Yukarıdaki kod Todo bileşeninden gelen işaretlemeyi içerir ve sonunda PropTypesbildirirsiniz. Prop'lar, bir üst bileşenden alt bileşenlere veri geçirmek için kullanılır. Props hakkında daha fazla bilgi için bkz. Props'ı Bir Bileşene Geçirme – React. Silme ve taşıma işlevleri geri çağırma olarak geçirildiğinden, onClick işleyicisinin bu geri çağırmalara çağrı yapmak için güncelleştirilmesi gerekir.

Gerekli kodu ekleyin. TodoItem bileşenini kullanan TodoList için tam kod burada gösterilmiştir.

import React, { useState } from 'react'
import TodoItem from './TodoItem'

const initialTasks = [
    { id: self.crypto.randomUUID(), text: 'Drink some coffee' },
    { id: self.crypto.randomUUID(), text: 'Create a TODO app' },
    { id: self.crypto.randomUUID(), text: 'Drink some more coffee' }
];

function TodoList() {
    const [tasks, setTasks] = useState(initialTasks);
    const [newTaskText, setNewTaskText] = useState("");
    function handleInputChange(event) {
        setNewTaskText(event.target.value);
    }
    function addTask() {
        if (newTaskText.trim() !== "") {
            setTasks(t => [...t, { id: self.crypto.randomUUID(), text: newTaskText }]);
            setNewTaskText("");
        }
        event.preventDefault();
    }
    function deleteTask(id) {
        const updatedTasks = tasks.filter(task => task.id !== id);
        setTasks(updatedTasks);
    }
    function moveTaskUp(index) {
        if (index > 0) {
            const updatedTasks = [...tasks];
            [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
            setTasks(updatedTasks);
        }
    }
    function moveTaskDown(index) {
        if (index < tasks.length) {
            const updatedTasks = [...tasks];
            [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
            setTasks(updatedTasks);
        }
    }
    return (
        <article
            className="todo-list"
            aria-label="task list manager">
            <header>
                <h1>TODO</h1>
                <form onSubmit={addTask} aria-controls="todo-list">
                    <input
                        type="text"
                        required
                        placeholder="Enter a task"
                        value={newTaskText}
                        aria-label="Task text"
                        onChange={handleInputChange} />
                    <button
                        className="add-button"
                        aria-label="Add task">
                        Add
                    </button>
                </form>
            </header>
            <ol id="todo-list" aria-live="polite">
                {tasks.map((task, index) =>
                    <TodoItem
                        key={task.id}
                        task={task.text}
                        deleteTaskCallback={() => deleteTask(task.id)}
                        moveTaskUpCallback={() => moveTaskUp(index)}
                        moveTaskDownCallback={() => moveTaskDown(index)}
                    />
                )}
            </ol>
        </article>
    );
}

export default TodoList;

Artık her to-do öğesini işlemek için TodoItem bileşeni kullanılır. Anahtarın, o görevin UUID değerini içeren task.idolarak ayarlandığına dikkat edin. Uygulamayı çalıştırdığınızda, TodoItem kullanmak üzere yeniden düzenlediğiniz için uygulamanın görünümünde veya davranışında herhangi bir değişiklik görmemeniz gerekir.

Artık desteklenen tüm temel işlevlere sahip olduğunuz için, güzel görünmesini sağlamak için buna stil eklemeye başlamanın zamanı geldi. Bu uygulama için kullanacağınız inter yazı tipi ailesi için Index.html bir bağlantı ekleyerek başlayın. Index.htmliçinde temizlenmesi gereken başka öğeler de vardır. Özellikle başlık güncelleştirilmelidir ve şu anda simge olarak kullanılan vite.svg dosyasını değiştirmek istiyorsunuz.

Index.html aşağıdaki içerikle güncelleştirin.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/checkmark-square.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TODO app</title>
        <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
        <script type="module" defer src="/src/main.jsx"></script>
    </head>
    <body>
    </body>
</html>

main.jsx dosyasını düzenleyerek rootmainçağırırken createRoot ile değiştirin.

main.jsx için tam kod burada gösterilmiştir.
```
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.querySelector('main')).render(
    <StrictMode>
        <App />
    </StrictMode>,
)
```
Bu değişikliklere ek olarak, dosya checkmark-square.svg ortak klasöre eklendi. Bu, FluentUI onay işareti kare görüntüsünden doğrudan indirebileceğiniz bir SVG'dir. (Daha tümleşik bir deneyim için kullanabileceğiniz bir paket vardır, ancak bu paket bu makalenin kapsamı dışındadır.)

Ardından, TodoList bileşeninin stillerini güncelleştirin.
Bileşenler klasörüne TodoList.cssadlı yeni bir CSS dosyası ekleyin. Projeye sağ tıklayıp Yeni Öğe Ekle > seçeneğini belirleyebilir ve ardından Stil Sayfasıseçebilirsiniz. dosyaya TodoList.cssadını verin.

aşağıdaki kodu TodoList.cssekleyin.

.todo-list {
    background-color: #1e1e1e;
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 25rem;
}

.todo-list h1 {
    text-align: center;
    color: #e0e0e0;
}

.todo-input {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.todo-input input {
    flex: 1;
    padding: 0.625rem;
    border: 0.0625rem solid #333;
    border-radius: 0.25rem;
    margin-right: 0.625rem;
    background-color: #2c2c2c;
    color: #e0e0e0;
}

.todo-input .add-button {
    padding: 0.625rem 1.25rem;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

.todo-input .add-button:hover {
    background-color: #0056b3;
}

.todo-list ol {
    list-style-type: none;
    padding: 0;
}

.todo-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem;
    border-bottom: 0.0625rem solid #333;
}

.todo-list li:last-child {
    border-bottom: none;
}

.todo-list .text {
    flex: 1;
}

.todo-list li button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.625rem;
    color: #e0e0e0;
}

.todo-list li button:hover {
    color: #007bff;
}

.todo-list li button.delete-button {
    color: #ff4d4d;
}

.todo-list li button.up-button,
.todo-list li button.down-button {
    color: #4caf50;
}

Next, edit TodoList.jsx to add the following import at the top of the file.
```
import './TodoList.css';
```
Değişiklikleri kaydettikten sonra tarayıcıyı yenileyin. Bu, uygulamanın stilini iyileştirecektir. Uygulama aşağıdaki gibi görünmelidir.

Artık to-do öğelerini bellekte depolayan çalışan bir to-do listesi uygulaması oluşturdunuz. Bu noktadan itibaren, to-do öğelerini localStorage/IndexedDbiçinde depolamak için uygulamayı güncelleştirebilir veya daha kalıcı depolama için bunu sunucu tarafı veritabanı veya başka bir arka uçla tümleştirebilirsiniz.

Özet

Bu öğreticide Visual Studio kullanarak yeni bir React uygulaması oluşturdunuz. Uygulama, görev ekleme, görevleri silme ve yeniden sıralama desteği içeren bir to-do listesinden oluşur. İki yeni React bileşeni oluşturdunuz ve bu bileşenleri bu öğretici boyunca kullandınız.

Kaynaklar

ToDoJSWebApp'da bu örneğin kodu
Visual Studio JavaScript and TypeScript projects

Aracılığıyla paylaş