React.js Kullanarak Web Uygulaması Oluşturma Rehberi

React.js, etkileşimli kullanıcı arayüzleri (UI) oluşturmak için kullanılan popüler bir ön uç geliştirme kütüphanesidir. Facebook tarafından geliştirilen React.js, Instagram, Airbnb ve WhatsApp dahil olmak üzere birçok büyük şirket tarafından kullanılmaktadır. Etkili, hızlı ve duyarlı web uygulamaları oluşturmak istiyorsanız, React.js sizin için doğru seçim olabilir.

giriiş

Başlamadan önce, bilgisayarınızda Node.js ve npm'nin (Node Paket Yöneticisi) kurulu olduğundan emin olun. Node.js ve npm, React.js kullanarak web uygulamaları geliştirmek için gereken ortamı ve araçları sağladıkları için çok önemlidir.

Adım 1: React Projesini Başlatma

Yeni bir React.js uygulaması oluşturmak için, başlangıç ​​yapılandırmasını en aza indiren bir uygulama oluşturma aracı olan Create React App'i kullanabiliriz. Terminalinizde veya komut isteminizde aşağıdaki komutu çalıştırın:

"'bash
npx oluştur-tepki-uygulama uygulamam
uygulamamın cd'si
npm başlangıç
"

Bu komut, `my-app` adında yeni bir dizin oluşturacak, gerekli tüm bağımlılıkları indirip kuracak ve geliştirme sunucusunu başlatacaktır. Artık bir tarayıcı açıp `http://localhost:3000` adresine erişerek varsayılan React.js uygulamasını görebilirsiniz.

Adım 2: Klasör Yapısı

Create React App'in oluşturduğu klasör yapısına bir göz atalım:

"
benim-uygulamam/
├── node_modülleri/
├── halka açık/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
"

– `node_modules/`: Projenizin tüm bağımlılıklarını içerir.
– `public/`: Uygulamanın giriş noktası olan `index.html` dahil olmak üzere statik dosyaları içerir.
– `src/`: Zamanınızın çoğunu burada geçireceksiniz. React bileşenlerini, CSS dosyalarını ve diğer varlıkları içerir.

3. Adım: Gereksiz Dosyaları Silme

Sıfırdan başlamak için, gereksiz bazı dosyaları silelim. `src/` klasöründeki `logo.svg` ve `App.test.js` dosyalarını silin. Ardından, `App.css` ve `index.css` dosyalarını açın ve içlerindeki tüm CSS kodunu silerek temiz bir stil sayfası oluşturun.

4. Adım: İlk Bileşeninizi Oluşturma

React.js bileşen tabanlıdır. Bileşenler, web uygulamanızın yapı taşlarıdır. İlk bileşenimizi oluşturmak için `App.js` dosyasını değiştirelim.

`src/App.js` dosyasını açın ve içindeki kodu aşağıdakiyle değiştirin:

“`jsx
React'i 'react'ten içe aktarın;
'./App.css' içe aktarın;

işlev Uygulaması () {
dönüş (

);
}

varsayılan Uygulamayı dışa aktar;
"

`App.js` dosyasındaki React kodunu JSX (JavaScript XML) kullanarak başlatın; bu, JavaScript içinde HTML benzeri sözdizimi yazmamızı sağlar. Değişikliklerinizi kaydedin ve sonuçları tarayıcınızda görüntüleyin.

Adım 5: Yeni Bileşenler Ekleme

Şimdi yeni bileşenler ekleyelim. `src` klasörünün içine `components` adında yeni bir klasör oluşturun. Ardından `components` klasörünün içine `HelloWorld.js` adında yeni bir dosya oluşturun.

“`jsx
React'i 'react'ten içe aktarın;

fonksiyon HelloWorld() {
dönüş (

);
}

export default HelloWorld;
"

`App.js` dosyasını açın ve az önce oluşturduğumuz `HelloWorld` bileşenini içe aktarın:

“`jsx
React'i 'react'ten içe aktarın;
'./App.css' içe aktarın;
import HelloWorld from './components/HelloWorld';

işlev Uygulaması () {
dönüş (

);
}

varsayılan Uygulamayı dışa aktar;
"

Şimdi, `App.js` dosyası ana sayfada `HelloWorld` bileşenini oluşturuyor.

Adım 6: useState ile Durum Yönetimi Ekleme

React, durum yönetimi için çok güçlü hook'lara sahiptir. Uygulamamıza biraz durum ekleyelim. Örneğin, bir butona her tıklandığında artan bir sayaç ekleyelim.

`HelloWorld.js` dosyasını açın ve `state` ve `useState` kancasını ekleyin:

“`jsx
React'ı içe aktar, { useState } 'react'ten;

fonksiyon HelloWorld() {
const [sayım, setCount] = useState(0);

sabit incrementCount = () => {
setCount(sayı + 1);
}

dönüş (

);
}

export default HelloWorld;
"

`count` durumu 0 değeriyle başlatılır ve düğmeye her tıklandığında `incrementCount` fonksiyonu bu değeri artırır.

Adım 7: Stil Ekleme

Stil eklemek için `App.css` dosyasında CSS kullanabiliriz veya styled-components gibi bir CSS-in-JS kütüphanesi kullanabiliriz. Şimdilik standart CSS ile devam edelim.

`App.css` dosyasını açın ve bazı stillendirmeler ekleyin:

“`css
.Uygulama {
text-align: center;
}

.Uygulama başlığı {
arka plan rengi: 282c34;
min-yükseklik: 100vh;
ekran: esnek;
esnek yön: sütun;
hizalama ögeleri: orta;
haklı içerik: merkez;
yazı tipi boyutu: hesapla(10px + 2vmin);
Beyaz renk;
}

düğme {
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
"

Adım 8: React Router ile Yönlendirme Ekleme

Uygulamamızdaki farklı sayfalar arasında gezinme özelliği eklemek için React Router kullanabiliriz. React Router'ı aşağıdaki komutu çalıştırarak kurabilirsiniz:

"'bash
npm install tepki-yönlendirici-dom
"

Ardından, `components` klasöründe `Home.js` ve `About.js` olmak üzere iki yeni bileşen oluşturun.

`Home.js`:
“`jsx
React'i 'react'ten içe aktarın;

işlev Ana Sayfa() {
dönüş (

);
}

varsayılanı dışa aktar Ana Sayfa;
"

`About.js`:
“`jsx
React'i 'react'ten içe aktarın;

işlev Hakkında() {
dönüş (

);
}

varsayılanı dışa aktar Hakkında;
"

Ardından `App.js` dosyasını açın ve yönlendirme ayarlarını yapın:

“`jsx
React'i 'react'ten içe aktarın;
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
'./App.css' içe aktarın;
import HelloWorld from './components/HelloWorld';
Ana Sayfayı './components/Home'dan içe aktar;
Hakkında'yı './components/About'tan içe aktarın;

işlev Uygulaması () {
dönüş (

);
}

varsayılan Uygulamayı dışa aktar;
"

Bu sayede uygulamamızdaki farklı sayfalar arasında temel bir gezinme sistemi eklemiş olduk.

Kapanış

Bu, React.js kullanarak bir web uygulaması oluşturmaya yönelik temel bir eğitimdir. Proje kurulumu, bileşen oluşturma, durum yönetimi, stillendirme ve yönlendirme konularını ele aldık. React.js, daha karmaşık web uygulamaları oluşturmanıza yardımcı olabilecek çok sayıda kütüphane ve araç içeren zengin bir ekosisteme sahiptir.

Başarılar dilerim ve umarım bu eğitim, React.js ile yolculuğunuza başlamanıza yardımcı olur!