Yönetici
Takvim uygulamaları, günlük hayatımızda oldukça önemli bir yere sahiptir. Hem kişisel hem de iş yaşamında randevuları, toplantıları, doğum günlerini ve diğer önemli etkinlikleri takip etmek için kullanılır. Günümüzde birçok takvim uygulaması mevcut olsa da, React JS kullanarak kendi takvim uygulamanızı oluşturmak oldukça kolaydır. Bu yazıda, React JS ile nasıl takvim uygulaması oluşturabileceğinizi öğreneceksiniz.
Bileşenler, diğer bileşenler içerebilir. Örneğin, takvim bileşeni, gün bileşenlerini içerir ve gün bileşeni, etkinlik bileşenlerini içerir. Bu şekilde, bileşenler hiyerarşik olarak birbirine bağlanabilir ve karmaşık uygulamalar oluşturulabilir.
Örneğin, aşağıdaki işlevler, takvim bileşenlerinin tarihleri ve etkinlikleri görüntülemesine yardımcı olabilir:
Bunun için, React JS'in özelliklerinden yararlanabilirsiniz. Örneğin, takvim bileşenleri, React JS'in state özelliğini kullanarak verileri saklayabilir ve bu verileri değiştirmek için setState() işlevini kullanabilir. Ayrıca, React JS'in useMemo() ve useCallback() işlevlerini kullanarak, bileşenlerin gereksiz yeniden render işlemlerini önleyebilirsiniz.
1. React JS Nedir?
React JS, Facebook tarafından geliştirilen açık kaynak kodlu bir JavaScript kütüphanesidir. Web uygulamaları geliştirmek için kullanılan bir araçtır. React, bileşen tabanlı bir yapıya sahip olduğu için, bir uygulama geliştirmek için birden çok bileşen oluşturmak ve bu bileşenleri birleştirmek gerekmektedir.2. Takvim Uygulaması Nasıl Çalışır?
Bir takvim uygulaması oluşturmak için, takvimin tarihlerini ve etkinliklerini tutan bir veri yapısı oluşturmak gerekmektedir. Bu veri yapısı, takvim bileşenlerine aktarılır ve takvim bileşenleri verileri kullanarak takvim görünümünü oluşturur.3. Gereksinimler
React JS ile takvim uygulaması oluşturmak için, birkaç önemli gereksinim vardır:- Node.js kurulu olması
- React JS kurulu olması
- Yarn veya npm paket yöneticisinin yüklü olması
4. Projenin Oluşturulması
React JS ile takvim uygulaması oluşturmak için öncelikle bir React projesi oluşturulması gerekmektedir. Bunun için, terminalde aşağıdaki komutlar kullanılabilir:
Kod:
npx create-react-app takvim-uygulamasi
cd takvim-uygulamasi5. Bileşenlerin Oluşturulması
React JS, bileşenlerin oluşturulmasına olanak tanır. Bileşenler, tekrar kullanılabilir ve kendi özelliklerine sahip olan kod parçalarıdır. Bir bileşen, bir fonksiyon veya bir sınıf olarak oluşturulabilir.5.1. Takvim Bileşeni
Takvim bileşeni, tarihleri görüntüleyen ana bileşendir. Bu bileşen, gün bileşenlerini içerir.
Kod:
function Calendar() {
return (
<div className="calendar">
<Day />
<Day />
<Day />
<Day />
<Day />
<Day />
<Day />
</div>
);
}5.2. Gün Bileşeni
Gün bileşeni, takvimin bir gününü temsil eden bileşendir. Bu bileşen, günün tarihini ve etkinlikleri gösterir.
Kod:
function Day() {
return (
<div className="day">
<div className="date">1</div>
<Event />
</div>
);
}5.3. Etkinlik Bileşeni
Etkinlik bileşeni, takvimdeki bir etkinliği temsil eden bileşendir. Bu bileşen, etkinlik adını, saatini ve diğer ayrıntıları gösterir.
Kod:
function Event() {
return (
<div className="event">
<div className="time">10:00 AM</div>
<div className="title">Meeting with John</div>
</div>
);
}Bileşenler, diğer bileşenler içerebilir. Örneğin, takvim bileşeni, gün bileşenlerini içerir ve gün bileşeni, etkinlik bileşenlerini içerir. Bu şekilde, bileşenler hiyerarşik olarak birbirine bağlanabilir ve karmaşık uygulamalar oluşturulabilir.
6. Veri Yapısı
Takvim uygulaması için bir veri yapısı oluşturmak gerekmektedir. Bu veri yapısı, tarihler ve etkinlikler gibi bilgileri tutacaktır. Bu veri yapısı, takvim bileşenlerine aktarılır ve takvim bileşenleri verileri kullanarak takvim görünümünü oluşturur.
Kod:
const events = [
{
id: 1,
title: "Meeting with John",
date: new Date(2022, 3, 10, 10),
},
{
id: 2,
title: "Lunch with Mary",
date: new Date(2022, 3, 11, 12),
},
{
id: 3,
title: "Movie Night",
date: new Date(2022, 3, 12, 19),
},
];
const days = [
{ id: 1, date: new Date(2022, 3, 10) },
{ id: 2, date: new Date(2022, 3, 11) },
{ id: 3, date: new Date(2022, 3, 12) },
{ id: 4, date: new Date(2022, 3, 13) },
{ id: 5, date: new Date(2022, 3, 14) },
{ id: 6, date: new Date(2022, 3, 15) },
{ id: 7, date: new Date(2022, 3, 16) },
];7. Veri Yapısının Uygulanması
Veri yapısı, bir JSON dosyasında veya bir API'de saklanabilir. Veriler, bileşenlerin özellikleri olarak aktarılabilir ve bileşenler, verileri görüntülemek için kullanılabilir. Örneğin, takvim bileşenleri, tarihleri ve etkinlikleri görüntülemek için veri yapısındaki bilgileri kullanabilir.
Kod:
function Calendar() {
return (
<div className="calendar">
{days.map((day) => (
<Day key={day.id} date={day.date} events={events} />
))}
</div>
);
}
function Day({ date, events }) {
const dayEvents = events.filter(
(event) => event.date.getFullYear() === date.getFullYear() && event.date.getMonth() === date.getMonth() && event.date.getDate() === date.getDate()
);
return (
<div className="day">
<div className="date">{date.getDate()}</div>
{dayEvents.map((event) => (
<Event key={event.id} title={event.title} time={event.date.toLocaleTimeString()} />
))}
</div>
);
}
function Event({ title, time }) {
return (
<div className="event">
<div className="time">{time}</div>
<div className="title">{title}</div>
</div>
);
}8. Takvim Fonksiyonları
Takvim uygulaması, tarihleri görüntülemek ve etkinlikleri yönetmek için bir dizi işlev içermelidir. Bunlar, takvim bileşenleri tarafından kullanılarak takvim görünümünü oluşturmak için kullanılır.Örneğin, aşağıdaki işlevler, takvim bileşenlerinin tarihleri ve etkinlikleri görüntülemesine yardımcı olabilir:
Kod:
function getDaysInMonth(date) {
const days = [];
const year = date.getFullYear();
const month = date.getMonth();
const daysInMonth = new Date(year, month + 1, 0).getDate();
for (let i = 1; i <= daysInMonth; i++) {
days.push(new Date(year, month, i));
}
return days;
}
function getCurrentMonth() {
return new Date().getMonth();
}
function getCurrentYear() {
return new Date().getFullYear();
}9. Takvim Stilleri
Takvim bileşenleri, CSS ile özelleştirilebilir. Bu, takvimin renklerini, yazı tipini ve diğer özelliklerini değiştirmek için kullanılabilir.
Kod:
.calendar {
display: flex;
flex-wrap: wrap;
}
.day {
width: calc(100% / 7);
height: 100px;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
align-items: center;
}
.date {
font-weight: bold;
margin-top: 10px;
}
.event {
padding: 5px;
margin-top: 5px;
background-color: #f4f4f4;
border-radius: 5px;
}
.time {
font-weight: bold;
}
.title {
margin-top: 5px;
}10. Takvim Optimizasyonu
Takvim uygulaması, büyük miktarda veri içerebilir ve yavaş çalışabilir. Bu nedenle, uygulamayı optimize etmek önemlidir.Bunun için, React JS'in özelliklerinden yararlanabilirsiniz. Örneğin, takvim bileşenleri, React JS'in state özelliğini kullanarak verileri saklayabilir ve bu verileri değiştirmek için setState() işlevini kullanabilir. Ayrıca, React JS'in useMemo() ve useCallback() işlevlerini kullanarak, bileşenlerin gereksiz yeniden render işlemlerini önleyebilirsiniz.
Kod:
function Calendar() {
const [month, setMonth] = useState(getCurrentMonth());
const [year, setYear] = useState(getCurrentYear());
const days = useMemo(() => getDaysInMonth(new Date(year, month)), [year, month]);
const nextMonth = useCallback(() => {
setMonth((prevMonth) => (prevMonth === 11 ? 0 : prevMonth + 1));
setYear((prevYear) => (month === 11 ? prevYear + 1 : prevYear));
}, [month]);
const prevMonth = useCallback(() => {
setMonth((prevMonth) => (prevMonth === 0 ? 11 : prevMonth - 1));
setYear((prevYear) => (month === 0 ? prevYear - 1 : prevYear));
}, [month]);
return (
<div className="calendar">
<div className="calendar-header">
<button onClick={prevMonth}>Prev</button>
<div>{`${year} / ${month + 1}`}</div>
<button onClick={nextMonth}>Next</button>
</div>
{days.map((day) => (
<Day key={day.getTime()} date={day} events={events} />
))}
</div>
);
}