- 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.
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();