Creating Projects with Vite.js | Movie Application with React #react #reactjs #github #javascript #vite

Vite.js ile Proje Oluşturma | React ile Film Uygulaması

Bu yazımızda, Vite.js kullanarak React ile bir film uygulaması oluşturacağız. Vite.js, hızlı ve esnek bir JavaScript aracıdır ve geliştiricilere hızlı bir şekilde projeler oluşturmak için modern bir altyapı sunar. React ise, kullanıcı arayüzlerini geliştirmek için çok popüler bir JavaScript kütüphanesidir. Bu yazıda, Vite.js ve React’i bir araya getirerek basit bir film uygulaması oluşturacağız.

Adım 1: Vite.js Projesi Oluşturma

İlk adım olarak, Vite.js projesi oluşturmak için aşağıdaki komutu çalıştırın:

npm init @vitejs/app react-film-app

Bu komut, Vite.js ile bir React uygulamasını başlatmanıza yardımcı olacaktır. Komutu çalıştırdıktan sonra, proje adınızı ve istediğiniz şablonu seçebilirsiniz.

Adım 2: Proje Dizinine Geçiş Yapma

Proje dizinine geçmek için aşağıdaki komutu kullanın:

cd react-film-app

Adım 3: Proje Bağımlılıklarının Yüklenmesi

Proje dizininin içine geçtikten sonra, bağımlılıkların yüklenmesi için aşağıdaki komutu çalıştırın:

npm install

Bu komut, projenin gerekli bağımlılıklarını yükleyecektir.

Adım 4: React Uygulamasının Oluşturulması

Şimdi, React uygulamasını projenize eklemek için aşağıdaki komutu kullanın:

npm install react react-dom

Bu komut, React ve ReactDOM kütüphanelerini projenize ekleyecektir.

Adım 5: Film API’sinin Kullanılması

Bu film uygulaması için, bir film API’si kullanacağız. Örnek olarak, IMDb API’sini kullanabilirsiniz. IMDb’den bir API anahtarı alın ve bu anahtarı kullanarak film verilerini çekmek için bir JavaScript dosyası oluşturun.

Adım 6: React Uygulamasının Kodlaması

Şimdi, React uygulamasını kodlamaya başlayabiliriz. src klasörü altında App.js ve diğer bileşen dosyalarını oluşturabilirsiniz. Film verilerini API’den çekip ekranda listeleyen bir React uygulaması oluşturun.

Adım 7: Uygulamanızı Çalıştırma

Uygulamanızı çalıştırmak için aşağıdaki komutu kullanın:

npm run dev

Bu komut, geliştirme sunucusunu başlatacak ve uygulamanızı tarayıcınızda görüntüleyecektir.

Adım 8: Uygulamanızı GitHub’a Yükleme

Son olarak, uygulamanızı GitHub’a yüklemek için aşağıdaki adımları takip edebilirsiniz:

1. GitHub’da bir yeni depo oluşturun.
2. Projenizi GitHub depoya yükleyin:

git init
git add .
git commit -m "Initial commit"
git remote add origin [GitHub depo bağlantısı]
git push -u origin master

Bu adımları takip ettikten sonra, React ile film uygulamasını oluşturduğunuz Vite.js projesi GitHub’da yayınlanmış olacaktır.

Bu yazımızda, Vite.js ile React kullanarak basit bir film uygulaması oluşturma adımlarını detaylı bir şekilde ele aldık. Uygulamanızı oluştururken IMDb API veya başka bir film API’si kullanabilirsiniz ve farklı özellikler ekleyerek uygulamanızı geliştirebilirsiniz. Iyi çalışmalar!