React – Önemli Notlar

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;

Posted on

React – Önemli Notlar

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;

Ö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;