- React, kullanıcı arayüzü tasarlayabileceğimiz bir Javascript kütüphanesidir.
- Single Page Application yapısını kullanır.
- Tekrar kullanılabilir UI Component’ leri oluşturmamıza olanak sağlar.
- React, Facebook tarafından geliştirilmiştir.
- DOM yerine virtual DOM yapısını kullanır. Virtual DOM: Gerçek DOM’ un bellek deki kopyasıdır. Virtual DOM performans arttırır.
- React, memory de VIRTUAL DOM oluşturur. Browser’ ın yapısına direkt müdahale etmek yerine virtual DOM oluşturur ve gerekli manipülasyonu sağlar. Virtual DOM, react’ ın en güzel özelliğidir.
- React sadece değişmesi gereken alanı değiştirir. Nerede değişiklik yapılması gerekiyorsa sadece orayı bulur ve onu değiştirir.
- React Component tabanlı bir kütüphanedir. Yani web arayüzümüzde bir çok component bulunabilir
React Kurulumu:
İlk olarak node.js kurulumu gerekmektedir.” https://nodejs.org/en”
Ayrıca React NPM aracı gerekmektedir. NPM aracı node.js içinde yer almaktadır.
Projemizin içine girip, vs koda da açabiliriz. Projemizin klasöründeyken “code .” yazarsak projemiz otomatikmen vs code da açılır.
YA da projemizin olduğu klasörü Windows penceresinden açıp, url kısmına cmd yazarak terminal de react projemizin olduğu klasör açılır.
Terminal ekranında “ npx create-react-app my-react-app” yazarak projemizi başlatabiliriz.
my-react-app: projeye verdiğimiz isim, istersek mahmut ismini verebiliriz.
Son olarak vc Code da teminal açıp, projemizin olduğu klasörde “ npm start“ yazarak react projemizi tarayıcıda http://localhost:3000/ da çalıştırırız.
Npm: Javascript kütüphaneleridir.
NOT: Başlattığımız projeden çıkmak için “ Ctrl + C ” tuşuna basabiliriz.
Package.json dosyası: npm paketlerini yönetmek için kullandığımız manifesto dosyasıdır. Projemizin ismi, versiyonları gibi bilgiler içermektedir.
İndex.js dosyası: projemizi oluşturduğumuz zaman otomatikman oluşan kod satırı yani component aşağıdaki gibidir. React da kod yazarken index.js de dedğişiklik yapılmaz. Bu yazılı olmayan kuraldır. Değişiklik App.js de yapılır.
Aşağıdaki kod satırı id’ si root olan div in içine “App” component’ ini render eder.
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render();
Uygulamamızın çalışmasını sağlayan component ler projemizde “src” klasörünün içinde aşağıdaki ilgili yer almaktadır.
NOT: Package.json dosyasında, aşağıdaki satırdaki kod değişikliği ile PORT numarasını değiştirebiliriz.
“start”: ” set PORT= 5005 && react-scripts start”,
UYARI: React da kod yazarken index.js de değişiklik yapılmaz. Bu yazılı olmayan kuraldır. Değişiklik App.js de yapılır.
React’ de Değişken Türleri
– const sabit (değişmeyen ) değişkenler içindir.
– let değiştirilebilir değişkenler içindir.
– const olan bir diziyi başka bir const olan dizi ile EŞİTLEYEMEYİZ.
– let olan bir diziyi başka bir let dizi ile EŞİTLENEBİLİR.
Örnek: değişkenler
import ‘./App.css’;
function App() {
const x = 58e-5; // 0,00058 demektir
const y = 25/0; // sonuç: “infinity”
const z = 25/”ali”; // sonuç: “Nan”
const hes = 0xff; // sonuç: 255
const a = 1.589647; // {a.toFixed(2)} = 1,59
const b = “22”-7;
return (
<div className=’App’>
<h3>{b}</h3>
</div>
);
}
export default App;
FONKSİYONLAR
Array Fonksiyon:
const hello = function(){
return "Hello World"
}yukarıdaki standart fonksiyon aşağıdaki ok fonksiyonu ile yazılabilir:
const hello1 = () => {
return "Hello world with arrow function" ;
}
Örnek: 4 işlem yapan arrow fonksiyon
const merhaba = isim => "Merhaba " + isim;
const dortIslem = (sayi1, sayi2) => {
const top = sayi1 + sayi2;
const cikart = sayi1 - sayi2;
const bol = sayi1 / sayi2;
const carp = sayi1 * sayi2;
return [top,cikart,bol,carp]; //Destructuring
}
function App() {
const [top,cikart,bol,carp]= dortIslem(3,5);
return (
<div className='App'>
<h3> {top} </h3>
<h3>{carp}</h3>
<h4>{merhaba("Alper")}</h4>
</div>
);
}
export default App;
Map(): Orijinal diziyi bozmadan, diziye işlem uygulayarak yeni dizi oluşturur. Yani mevcut diziyi bozmadan dizide değişiklikler yapmamızı sağlar.
NOT: obj leri map() fonksiyonu ile yazamayız !
Örnek: map fonksiyonu
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
const myArray = [1,2,3,4]; // Dizi oluşturduk
const myList = myArray.map((val => val * 2));
console.log(myList);
root.render(
<h3>Merhaba</h3>
);
reportWebVitals();
Filter() Metodu:
React’te filtreleme, adından da anlaşılacağı gibi bir şeydir. Bir dizide döngü oluşturma ve sağladığınız bir koşula göre o dizinin içindeki öğeleri dahil etme veya hariç tutma işlemidir. ‘Filter’ metodu dizi elemanlarını şartlı bir duruma tabi tutarak şartı sağlayan elemanları tamamen yeni bir dizi içinde tutarak şartı sağlamayanları filtrelemeye tabi tutmamızı sağlar.
‘Map’ metoduna benzer bir söz dizimine sahiptir ancak koşulun doğru ya da yanlış olarak değerlendirmesine göre işlemleri yürütür.
Örnek: Filter() kullanımı – İsminde J harfi olanları filtrele
import React from 'react';
const names = ['James', 'John', 'Paul', 'Ringo', 'George'];
function App() {
return (
<div>
{names.filter(name => name.includes('J')).map(filteredName => (
<li>
{filteredName}
</li>
))}
</div>
);
}
export default App;
Örnek: Filter() kullanımı ve Mantıksal Opreratör
--- App.js –
mport './App.css';
import Liste from './components/Liste';
import Liste2 from './components/Liste2';
function App() {
const meyveler = [ "elma","armut","erik"];
const ilaclar =[
{ id:1, adı:"aferin", stok:5 },
{ id:2, adı:"parol", stok:3 },
{ id:3, adı:"voltaren", stok:8 },
{ id:4, adı:"illadin", stok:1 }
];
// const meyveler= [];
return (
<div className="App">
{/* <Liste meyveler={meyveler} /> */}
<Liste2 ilaclar={ilaclar}/>
</div>
);
}
export default App;
--- Liste2.js ----
import React from 'react'
const Liste2 = ({ilaclar}) => {
return (
<div>
<h2>Eczannedeki ilaçlarımız </h2>
<ul>
{ilaclar.map((ilac) => <li key={ilac.id}> {ilac.adı}, stok seviyesi:{ilac.stok} </li> ) }
</ul>
</div>
)
}export default Liste2
--- Liste.jsx ---
import React from "react";
const Liste = ({ meyveler }) => {
return (
<div>
<h3>Sepetimde {meyveler.length} tane meyve var </h3>
{meyveler.length > 0 && ( // Mantıksal operatör
<ul>
{
meyveler
.filter((meyve) => meyve === "elma")
.map((meyve) => (
<li>{meyve}</li>
))
}
</ul>
)}
</div>
);
};
export default Liste;
çıktı:
Spread Operatörü: Spread operatörü olarak bilinen üç nokta ( … ), uygulamalarınızdaki durum, özellikler ve dizileri yönetmek için güçlü bir araçtır. Spread sözdizimi, nesneleri birleştirme, dizileri kopyalama ve bileşenlere özellikler aktarma gibi birçok yaygın görevi basitleştirir.
Örnek: Map() ve Destructuring
import './App.css';
function App() {
const dizi= [1,2,3,4,5];
const obj = {
isim:"Alper",
soyad:"Ergün",
yas : 41,
sehir:"Ankara",
aile : ["Arslan","Nevin","Mehtap","Mayıs"]
};
const mymap = dizi.map((i) => i = i*2+ "," );
function yazdir({isim,soyad,yas,sehir,aile}){ //Destructing
return <p>Merhaba {isim} {soyad}, yaşın:{yas}, yaşadığın şehir: {sehir} </p>;
}
return (
<div className="App">
<h4>Merhaba</h4>
{yazdir(obj)}
</div>
);
}
export default App;
Örnek: Spread operatörü
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
const users = [
{
name: "Muammer",
lastname: "Karataş"
},
{
name: "Alper",
lastname: "Ergün"
}
]
const users2 = [ ...users];
const user = {...users[0]};
root.render(
<h3>Merhaba</h3>
);
reportWebVitals();
PROPS
Props’un temel amacı, componentler arasında veri akışını sağlamak ve componentlerin tekrar kullanılabilmesini kolaylaştırmaktır. Props, componentlere veri gönderirken, component içerisinde değiştirilmesini engellemektedir. Böylece, her component tek bir görev üstlenir ve sadece o görevle ilgili işlemleri yapar.
Props kullanmak, componentler arasında daha esnek ve kolay bir veri akışı yapmanızı sağlar. Ayrıca, componentlerin tekrar kullanılabilmesini kolaylaştırır ve componentlere verilen verilerin component içerisinde değiştirilmesini engelleyerek uygulamanın daha güvenli hale gelmesine yardımcı olur.
Aşağıdaki diyagramda Students adında bi alt componentimiz var. Bu alt componente ana componentten gelen “studentName” props’ u geçilmiştir. Böylelikle students componentinde studentName props değeri “Tom” olarak atanmıştır.
Sonuç Props’lar;
- Properties kelimesinden üretilmiş ve sadece React ortamında kullanılan özel bir kelimedir.
- React bileşenlerinde fonksiyon değişkenleri gibi verilirler.
- Kullanımı, HTML ‘deki attribute kullanımı ile aynıdır.
- Sadece tek bir yönde yani Ana Bileşenden — Alt Bileşene akarlar.
- Alt bileşen içinde sadece okunabilirler (read-only, immutable), değiştirilemezler.
Örnek: Props – Props.jsx deki ürün bilgileri dinamik hale getiriyoruz.
— Props1.jsx —-
import React from "react";
const Props1 = (props) => { //props tüm parametreleri kapsar
// props yerine mahmut yazsak da olur, istediğimiz ismi verebiliriz.
return(
<div>
<div>Ürün Bilgileri</div>
<div>
<div>İsim: {props.Urun_adı} </div>
<div>Fiyat: {props.fiyatı} </div>
</div>
</div>
)};
export default Props1;
— App.js —
import logo from './logo.svg';
import './App.css';
import Props1 from './components/Props1';
function App() {
return (
<div className="App">
<Props1 Urun_adı="Ayakkabı" fiyatı={3200} />
</div>
);
}export default App;
Örnek: Props – obje
— User.js —
import React from 'react'
const User = (props) => {
return (
<div>
<h3>{props.ad} </h3>
<h3>{props.yas} </h3>
<h3>{props.memleket} </h3>
</div>
)
}export default User;
— App.js —-
import logo from './logo.svg';
import './App.css';
import User from './components/User';
function App() {
const data =
{
name:"Alper",
age:41,
city:"Ordu"
};
return (
<div className="App">
<User ad={data.name} yas={data.age} memleket={data.city} />
</div>
);
}
export default App;
Örnek: Props – obje kullanımı
— Product.jsx —
import React from 'react';
import Sepet from './Sepet'
const Product = (props) => {
return (
<div>
<li>{props.isim} - {props.adet} adet - {props.fiyat} tl</li>
</div>
);
};
export default Product;
--- Sepet.jsx ---
import React from 'react'
import Product from './Product';
const Sepet = () => {
const urunler =
{
isim: 'Klavye',
adet: 1,
fiyat: 235
};
return (
<div>
<h3> Ürün Bilgileri </h3>
<Product isim={urunler.isim} adet={urunler.adet} fiyat={urunler.fiyat}/>
</div>
)
}
export default Sepet;
— App.js —
import logo from './logo.svg';
import './App.css';
import Sepet from './components/Sepet';
import Product from './components/Product';
function App() {
const data =
{
name:"Alper",
age:41,
city:"Ordu"
};
return (
<div className="App">
{/* <User ad={data.name} yas={data.age} memleket={data.city} />
<User2 name="ahmet" age={21} city=" chicago" />
<User2 name="umoş" age={35} city=" samsun" /> */}
<Sepet />
</div>
);
}
export default App;
Örnek: Props – Dizi içinde obje kullanımı
—- Personel.jsx —
import React from 'react'
const Personel = (props) => {
return (
<div>
<h3>Personel Listesi</h3>
<li>ad-soyad: {props.insanKaynaklari[0].isim} ,
ünvan: {props.insanKaynaklari[0].unvan} ,
maas: {props.insanKaynaklari[0].maas} tl ,
departman: {props.insanKaynaklari[0].departman}
</li>
<li>ad-soyad: {props.insanKaynaklari[1].isim} ,
ünvan: {props.insanKaynaklari[1].unvan} ,
maas: {props.insanKaynaklari[1].maas} tl ,
departman: {props.insanKaynaklari[1].departman}
</li>
<li>ad-soyad: {props.insanKaynaklari[2].isim} ,
ünvan: {props.insanKaynaklari[2].unvan} ,
maas: {props.insanKaynaklari[2].maas} tl ,
departman: {props.insanKaynaklari[2].departman}
</li>
</div>
)
}
export default Personel;
— VeriTabani.jsx —
import React from 'react'
import Personel from './Personel';
const VeriTabani = () => {
const insanKaynaklari = [
{
isim:"Alper Ergün",
unvan:"Programcı",
maas: 40000,
departman:"Sigorta Yazılımları"
},
{
isim:"İmran gökçe",
unvan:"VHKİ",
maas: 39000,
departman:"Emeklililk YAzılımları"
},
{
isim:"Mahir Haluk Üstündağ",
unvan:"Bilişim Uzmanı",
maas: 72000,
departman:"Musahebe Yazılımları"
}
];
return (
<div>
<Personel insanKaynaklari={insanKaynaklari}/>
</div>
)
}
export default VeriTabani;
— App.js —
import logo from './logo.svg';
import './App.css';
import VeriTabani from './components/VeriTabani';
function App() {
return (
<div className="App">
<VeriTabani />
</div>
);
}
export default App;
STATE KAVRAMI
React’ta state, bir bileşenin (component) içinde depolanan ve zaman içinde değişebilen verilerdir. Bu veriler, bileşenin render edilmesinde kullanılır ve bileşenin durumunu (state) temsil eder. State, bileşenin dinamik olarak değişen verilerini saklamak ve bu verilere göre bileşenin görünümünü güncellemek için kullanılır.
State ve Props Farkı:
- State: Bileşenin içindeki veri, bileşenin kendisinde yönetilir ve değiştirilebilir.
- Props: Diğer bileşenlere veri aktarmak için kullanılır ve props’taki veri değiştirilmez (readonly).
Özetle, React’ta state, bileşenin mevcut durumunu depolayan ve bu duruma göre bileşenin render edilmesini sağlayan dinamik bir yapıdır.
Örnek: state’siz ve state’li veri güncelleme
— App.js —
import logo from './logo.svg';
import './App.css';
function App() {
let name = "alp"; // alp olan name değişkeni tanımladık.
name = "alfonzo"; // name değişkeninin içeriğini "alfonzo" olarak güncelledik.
// bu iş için STATE kullanmak gerekli
return (
<div className="App">
<h3> {name} </h3>
</div>
);
}
export default App;
yukarı daki işlemi STATE ile yaparsak;
--App.js --
import logo from './logo.svg';
import './App.css';
import {useState} from "react";
function App() {
//let name = "alp"; // alp olan name değişkeni tanımladık.
//name = "alfpnzo";
const [name,setName] = useState("alp");
const nameDegistir = () => {
setName("alfonzo");
}
return (
<div className="App" onClick={nameDegistir}>
{name}
</div>
);
}
export default App;
yukarı daki kodda STATE tanımı:
Bu örnekte name olan state in içeriği yani başlangıç değeri “alp” in üzerine tıkladığımızda (onClick yaptığımızda) içerik “alfonzo” olarak değişiyor.
Örnek: state oluşturma
import React, { useState } from 'react';
function Counter() {
// State değişkeni tanımlanıyor
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
Bu örnekte:
- count, state değişkenini temsil eder.
- setCount, state’i güncellemeye yarayan fonksiyondur.
- useState(0), başlangıç değerini 0 olarak ayarlamaktadır.
State: bir component’ ın o anki durumunu gösteren ve değişik property lerden oluşan bir javascript objesidir. Her Component kendi içinde state lere sahip olabilir. Örneğin bir web sayfasında bir çok component vardır. Yani web sayfamız componentlerden oluşmaktadır.
Özetlersek JavaScript’te bir değer saklayacağımız zaman nasıl ki değişken oluşturmak için var-let-const tanımlamalarından yararlanıyorsak, React componentlerinde de değer saklamak için state’ten yararlanırız.
Bir butona tıkladıktan sonra bir değeri güncellemek için, kullanıcı tarafından girilmiş bir input değerini saklamak için veya bir servisten dönen sonucu depolamak/kaydetmek gibi birçok farklı durumda state’i kullanılabiliriz.
Bir component deki state i , props yardımıyla başka bir component’ e gönderebiliriz.
NOT: state sadece o anki durumu temsil eder ve her component’da farklılık gösterir. Props ise component’lar arası iletişim sağlar.
Örnek: state kullanımı
import logo from './logo.svg';
import './App.css';
import {useState} from "react";
function App() {
const [state, setState] = useState("Merhaba, bur bir state");
return (
<div className="App">
{state}
</div>
);
}
export default App;
Örnek: state kullanımı
import logo from './logo.svg';
import './App.css';
import React from 'react';
import {useState} from 'react';
import { ReactDOM }from "react-dom/client";
function App() {
const [mahmut, setMahmut] = useState('MErhaba ');
return (
<div className="App" onClick={ ()=>setMahmut("Hoşgeldin state") }>
{mahmut}
</div>
);
}
export default App;
Örnek: state ve handle fonksiyonu ile input dan veri alan program
import logo from './logo.svg';
import './App.css';
import React from 'react';
import {useState} from 'react';
import { ReactDOM }from "react-dom/client";
function App() {
const [dogum, setDogum] = useState('');
const handleChange = event => { // handleChange metotu ile gelen her bir input içerisindeki eventi yakalıyoruz.
setDogum(event.target.value);
};
return (
<div className="App">
<input type="text" id="dogum"
name="dogum" placeholder=""
onChange={handleChange}
value={dogum} />
<p>{dogum}</p>
</div>
);
}
export default App;
Örnek: State kullanımı – kullanıcıdan input değeri alma
--- App.js ---
import { useState } from "react";
import "./App.css";
function State() {
const [user, setUser] = useState("");
const [password, setPassword] = useState("");
// e.target.value = ad'ı güncelle demektir
const submit = () => {
user === "Alper" && password === "1234"
? alert("Giriş Başarılı")
: alert("Giriş Başarısız !!!");
};
return (
<div className="App">
<header className="App-header">
<form>
<label>Kullanıcı Adı:</label>
<input
type="text"
value={user}
onChange={(e) => setUser(e.target.value)}
/>
<br /> <br />
<label>Şifre:</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<br /> <br />
<button onClick={submit}> Login </button>
</form>
</header>
</div>
);
}
export default App;
Örnek: state
--- App.js ---
import { useState } from "react";
import "./App.css";
function App() {
const [araba, setAraba] = useState("Cherry");
// e.target.value = araba' yı güncelle demektir
const submit = (e) => {
setAraba(e.target.value)
};
// Bu örneğin radio button nunu yap
return (
<div className="Effect">
<header className="App-header">
<form>
<select value={araba} onChange={submit}>
<option value="Opel" >Opel</option>
<option value="VW" >VW</option>
<option value="Cherry" >Cherry</option>
<option value="BMW" >BMW</option>
</select>
</form>
</header>
</div>
);
}
export default App;
Örnek: state ve handle fonksiyonu ile input dan veri alan
import logo from './logo.svg';
import './App.css';
import React from 'react';
import {useState} from 'react';
import { ReactDOM }from "react-dom/client";
function App() {
const [dogum, setDogum] = useState('');
const handleChange = event => { // handleChange metotu ile gelen her bir input içerisindeki eventi yakalıyoruz.
setDogum(event.target.value);
};
return (
<div className="App">
<input type="text" id="dogum"
name="dogum" placeholder=""
onChange={handleChange}
value={dogum} />
<p>{dogum}</p>
</div>
);
}
export default App;
Örnek: state ile input dan veri alan, yaş hesaplayan program
--- App.js ----
import logo from './logo.svg';
import './App.css';
import React from 'react';
import {useState} from 'react';
import { ReactDOM }from "react-dom/client";
function App() {
const [dogum, setDogum] = useState('');
const handleChange = event => { // handleChange metotu ile gelen her bir input içerisindeki eventi yakalıyoruz.
setDogum(event.target.value);
};
return (
<div className="App">
<input type="text" id="dogum"
name="dogum" placeholder="Doğum Yılınız:"
onChange={handleChange}
value={dogum} />
<p>Yaşınız: {2024-dogum}</p>
</div>
);
}
export default App;
