React Notes

1. Kurulum

Yeni güncelleme ile "create react app" kısmı değişiyor.

Proje açılışları (Vite kullanıldı):

VS Code terminalden Vite'ı yükle:

npm create vite@latest → proje ismi → react → js

Oluşan proje dosyasına cd ile git.
npm i → install sonrasında node_modules klasörü gelir.
npm run dev ile proje çalıştırılır.

Tüm diğer componentler "app" componentinin içinde bulunur.

2. JSX Formatı

HTML kodlarını JavaScript uzantısı olarak yazmak istediğimizde JSX formatı kullanılabilir.

3. JSX yazim kurallari

JSX formatinda bir tane kapsayici element olmali.

function App(
) {
  return (
    <div id='kapsayici'>
      <h1>Isim</h1>
    <div>murat</div>
    </div>
  );}

Html elementi yerine <></> (react fragment) kullanilabilir

function App(
) {
  return (
    <>
      <h1>Isim</h1>
    <div>murat</div>
    </>
  );
}

Degiskenler function ve return arasinda kullanilir. Html icerisinde value degerini almak icin degisken {} icerisine yazilir. null, true, false ve undefined degerleri tarayici da basilmaz.
```
function App(
) {
const students = 43000;
  return (
    <>
      <h1>Isim</h1>
			<p>{students}</p>
    <div>murat</div>
    </>
  );
}
```

true/false kullanimi

function App(
) {
const frag= true;
  return (
    <>
      <h1>Isim</h1>
			<p>{students}</p>
    <div>murat</div>

{frag ? <p>{students}</p>: <></>}
    </>
  );
}

Class tanimlama icin className kullanilir.

function App(
) {
  return (
    <>
    <div className='box'></div>
    </>
  );
}

Inline css olarak verilirken obje olarak verilir. Camel Case kullanilir.

function App(
) {
  return (
    <>
    <div style={
			{
				width:'250px',
				height:'250px',
				backgroundColor:'yellow'
			}
		}></div>
    </>
  );
}

4. Componentler

Simple react snippsetti rafc veya ffc ile temel yapi gelir.

bunu app.jsx icerisinde kullanmak icin

import './App.css'
import { Course } from './Course'

function App(
) {

  return (
    <>
    <Course/>
    </>
  )
}

export default App

ffc ile

import React from 'react'

// export const Course = () => {
//   return (
//     <div>Course</div>
//   )
// };

function Course(
) {
    return ( <div>Course</div> );
}

export default Course;

import './App.css'
import  Course  from './Course'

function App(
) {

  return (
    <>
    <Course/>
    </>
  )
}

export default App

5. Props kullanimi

Ana iskeletleri ayni olan componentlere propmslar gonderilir (degisken olarak).

function App(
) {
  return (
    <>
      <Course
        title="Angular" //props
        description="Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Alias animi similique ullam sequi maxime rem corrupti, 
        perspiciatis excepturi facere dolor, voluptate ratione quam vitae accusantium voluptates quidem. 
        Non, atque sequi."
      />
      <Course />
      <Course />
      <Course />
    </>

propslar objede tutulur.

function Course(props) {
    return ( 
		<>
    <div>{props.title}</div>
    <div className='text-center'>{props.description}</div>
    </>
 );
}

daha profesyonel kullanimi

function Course(props) {
  console.log(props);
//   const title = props.title;
//   const description = props.description;
const {title,description} = props;
//title degiskeni olustur ve props.title a esitle,
//description degiskeni olustur ve props.description a esitle
  return (
    <>
      <div>{title}</div>
      <div className="text-center">{description}</div>
    </>
  );
}

veya

function Course({title,description}) {
//   const title = props.title;
//   const description = props.description;
// const {title,description} = props;
  return (
    <>
      <div>{title}</div>
      <div className="text-center">{description}</div>
    </>
  );
}

image ekleme

import Angular from './images/angular.jpg'
<img src={Angular} alt="" /> //kullanimi

⁠props⁠ olarak direkt objenin icerigine erismek icin ust ⁠component⁠ de:

{
            courses.map((course)=>{
                return (<Course key={course.id} {...course}/>)
            })
        }

Alt ⁠component⁠ de:

function Course({id,content,title,price}) {
    console.log(id)
    return ( <div></div> );
}

export default Course;

6. Bulma CSS kütüphanesi

Bulma CSS kütüphanesi, CSS frameworkleri arasında popüler bir seçenektir. İçinde birçok önceden oluşturulmuş stil ve komponentler bulundurur. Bu sayede, web uygulamalarında hızlı ve kolay bir şekilde stil ve düzen oluşturulabilir.
Bulma CSS kütüphanesini kullanarak, web uygulamalarınızı hızlı ve kolay bir şekilde düzenleyebilirsiniz.

7. UseState

UseState fonksiyonu, React'ta state kullanımını sağlar. State, component hakkında bilgi tutar ve bu bilgilerin değişmesine neden olabilir. UseState fonksiyonu, state'i tanımlar ve değiştirir. Örneğin, bir butona tıklandığında component'in rengini değiştirmek için useState kullanılabilir.
Functional component içerisinde hooks olarak state tanımlanır.

useState import et. Eklentiden useStateSnippset i yaz. İlk değer güncelleştirmek istediğimiz, var olan bir değişken. useState içerisinde yazılan değer value'nun başlangıç değeridir. setValue bir fonksiyon, value'yu set etme fonksiyonudur.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App(
) {
  const [first/*value*/, setfirst /*setValue*/] = useState(0)/*value degeri*/

  return (
    <div className="App">
     
    </div>
  )
}

export default App

Fonksiyon kullanımı.

function App(
) {
  const [value, setValue] = useState(0);
  const handleClick = (
) => {
    console.log("murat");
  };
  return (
    <div className="App">
      <button onClick={handleClick}>Kurs Ekle</button>/*birinci yontem*/
			<button onClick={()=>{console.log('murat')}>Kurs Ekle</button>/*ikinciyontem*/
      <div>Kurs Sayisi: {value}</div>
    </div>
  );
}

Genel kullanim.

function App(
) {
  const [value, setValue] = useState(0);

  const handleClick = (
) => {
    setValue(value + 1);/*butona her tiklandiginda deger 1 artar ve 
												value degeri guncellenir*/
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Kurs Ekle</button>
      <div>Kurs Sayisi: {value}</div>
    </div>
  );
}

8. UseEffect

useEffect fonksiyonu, React'ta component'lerin state'lerini ve props'larını dinlemeyi sağlar. Bu fonksiyon, component'teki herhangi bir state ya da prop değiştiğinde çalışır. Bu sayede, component'lerdeki state ve props'larının değişimlerine göre belirli işlemler gerçekleştirilebilir.

import { useState, useEffect } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App(
) {
  const [value, setValue] = useState(0);

	useEffect(() => {
		console.log('Component yüklendi veya value değişti.')
	}, [value]);/*value değiştiğinde useEffect çalışır*/

  const handleClick = (
) => {
    setValue(value + 1);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Kurs Ekle</button>
      <div>Kurs Sayisi: {value}</div>
    </div>
  );
}

useEffect(()=>{
    /* componentler ilk kez render edildiginde calisir ve
    statelerde degisiklik oldugunda calisir, her zaman calisir
    */
  });

  useEffect(()=>{
  /* componentler ilk kez render edildiginde calisir.*/
  },[]);

  useEffect(()=>{
  /* componentler ilk kez render edildiginde calisir ve
    verilen statelerde degisiklik oldugunda calisir.
    */
  },[can]);

9. useContext / Context API Mantigi

Context API ile paylasilmak istenilen fonksiyon,deger, vb. degerleri istenilen yerden cagrilabilir. Propslara gerek kalmaz.

Once ⁠React⁠ import edilir.
bir degiskene ⁠React.createContext({})⁠ ile degerler/metotlar atanir.

Bu degiskene disaridan erisebilmesi icin export edilir.

import React from "react";

const authContext = React.createContext({status:null,login: ()=>{}});

export default authContext;

⁠App.jsx⁠ icerisinde ⁠AuthContext⁠ i import et.
```
import AuthContext from './context/auth-context'
```
⁠Context⁠ in gecerli olacagi komponentleri belirlemek icin, ⁠AuthContext.Provider⁠ etiketleri arasina komponentler yazilir. Bu sayede ⁠context⁠ deki degerlere erisilebilir. Tasinacak degerler ⁠value⁠ icerisine eklenir. Bu sayede props veya data tasima ile ugrasmadan degerlere erisilebilir.
```
<AuthContext.Provider value={{status:false,login:loginAuth}}>
      <Auth/>
    </AuthContext.Provider>
```

⁠Auth⁠ komponenti icerisinde kullanmak icin once ⁠AuthContext⁠ i import et. Daha sonra kullanilacak olan degiskeni ata. ⁠Isimler ayni olmali. ⁠login⁠ fonksiyonu ⁠App.jsx⁠ icerisinde tanimlanir ver calisir.⁠⁠⁠⁠⁠⁠⁠⁠

import { useContext } from "react";
import AuthContext from "./context/auth-context";

function Auth(
) {
    const {status,login} = useContext(AuthContext);//tek bir degisken
    const values = useContext(AuthContext);//obje
    console.log(status)
    return ( <div>

    </div> );
}

export default Auth;

10. learn-english Projesinin Context API ile Yapimi

⁠src⁠ icerisine ⁠context > card.jsx⁠ olusturuldu.

⁠createContext⁠ import edildi ve bir fonksiyon tanimlandi.

import { createContext } from "react";

const CardsContext = createContext();

function Provider({children}){
    return (
        <CardsContext.Provider>
            {children}
        </CardsContext.Provider>
    )  
}

export {Provider};
export default CardContext;

⁠context⁠ e her yerden (⁠App.jsx⁠ dahil) erisebilmek icin ⁠main.jsx⁠ icerisine ⁠Provider⁠ import edildi. ⁠App⁠ component i ⁠Provider⁠ ile sarmalandi.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import {Provider} from './context/card'

ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider>
        <App />
    </Provider>
)

⁠App.jsx⁠ icerisinde bulunan metotlar ve ⁠useState⁠ leri ⁠context⁠ icerisine al.

Bu metotlara ulasmak icin ⁠useContext⁠ ve ⁠CardsContext⁠ i import et.

import "./App.css";
import CardList from "./components/CardList";
import "bootstrap/dist/css/bootstrap.min.css";
import "bulma/css/bulma.min.css";
import { useEffect,useContext } from "react";
import CardsContext from './context/card'

function App(
) {
  const {getAllData} = useContext(CardsContext);
  useEffect(() => {
    getAllData();
  }, []);

  return (
    <div className="App container">
      <CardList/>
    </div>
  );
}

export default App;

⁠context⁠ icerisinde bir obje olustur. Bu obje tum degisken ve metotlari tutacak. Bunu ⁠Provider⁠ e ⁠value⁠ degeri olarak ver.

const sharedValuesAndMethods = {
    card,
    getAllData,
    handleDelete,
    handleUpdate,
    handleAddClick
  };
  return <CardsContext.Provider value={sharedValuesAndMethods}>{children}</CardsContext.Provider>;
}

⁠props⁠ lar yerine kullanilmak istenilen degiskeni veya metodu ilgili component de ⁠useContext⁠ kullanarak cagir.

11. useReducer

useReeducer state⁠ dondurur/gunceller.

import { useState,useReducer } from 'react'
import './App.css'

const initialValue = 0;
const reducer = (state,action) =>{
  switch (action) {
    case value:
      
      break;
  
    default:
      break;
  }
}

function App(
) {
 const [count,dispatch] =  useReducer(reducer, initialValue);

  return (
    <div>
      <button onClick={()=>{dispatch('increment')}}>+</button>
      <button onClick={()=>{dispatch('decrement')}}>-</button>
      <button onClick={()=>{dispatch('reset')}}>C</button>
    </div>
  )
}

export default App⁠

useReducer⁠ icinde bir fonksiyon ve bir baslangic degeri verilir.
⁠reducer⁠ fonksiyonu gelen ⁠action⁠ a gore islem yapar ve ⁠state⁠ i gunceller.
⁠action⁠, ⁠dispatch⁠ in icine verilen degerdir.
⁠count⁠ donen ⁠state⁠ i tutar.
Ilk basta state⁠, ⁠initialValue⁠ degeridir.

12. useMemo

⁠useMemo⁠, ⁠cache⁠ de bulunan degeri kullanmak icin kullanilir. Ornek olarak, yazilimi yavaslatan bir fonksiyon oldugunu dusunelim. Bu fonksiyon, ilgili deger degismese bile calisir ve yazilim yavaslar. Bu durumda ⁠useMemo⁠ kullanilir.

import { useState } from "react";
import "./App.css";

function App(
) {
  const [number, setNumber] = useState(0);
  const [dark, setDark] = useState(false);
  const doubleNumber = slowFunc(number);

  const theme = {
    backgroundColor: dark ? "#333" : "#FFF",
    color: dark ? "#FFF" : "#333",
  };

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
      />
      <button onClick={()=> setDark((prevDark) => !prevDark)}>
        Change Theme!
      </button>
      <div style={theme}>{doubleNumber}</div>
    </div>
  );
}

function slowFunc(num){
  for (let i = 0; i <= 100000000; i++) {
    return num * 2;
  }
}

export default App;

⁠number⁠ degeri degismedikce ⁠useMemo⁠ ⁠cache⁠ deki degeri kullanir.

13. useCallback

⁠useMemo⁠ benzer. Farki, geriye fonksiyon dondurur.

import { useState,useCallback } from "react";
import "./App.css";
import NumberList from "./NumberList";

function App(
) {
  const [number, setNumber] = useState(1);
  const [dark, setDark] = useState(false);
  const getItems =useCallback(()=>{
    return [number,number + 1, number + 2];
  },[number]);

  const theme = {
    backgroundColor: dark ? "#333" : "#FFF",
    color: dark ? "#FFF" : "#333",
  };

  return (
    <div style={theme}>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value))}
      />
      <button onClick={()=> setDark((prevDark) => !prevDark)}>
        Change Theme!
      </button>
      <NumberList getItems={getItems}/>
    </div>
  );
}

export default App;

⁠number⁠ degistiginde ⁠getItems⁠ fonksiyonunu calistiemayi saglar.
Normalde sayfa her render edildiginde ⁠getItems⁠ da calisir. Fakat ⁠useCallback⁠ ile sadece ⁠number⁠ degistigi zaman fonksiyon calisir.

⁠useMemo⁠ deger dondurur, ⁠useCallback⁠ fonksiyon dondurur. Aradaki en buyuk fark budur.

14. useRef

⁠component⁠ i render olmadan degistirmeyi saglar.

import { useState,useEffect,useRef } from "react";
import "./App.css";

function App(
) {
  const [name, setName] = useState("");
  //const [renderCount, setRenderCount] = useState(0)
  const renderCount = useRef(0);
  //{current:0}
  useEffect(() => {
   //setRenderCount((prev)=>prev + 1); //infinite loop
   renderCount.current = renderCount.current + 1; 
  })
  
  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <div>
        My Name is {name}
      </div>
      <div>{renderCount.current} times rendered</div>
    </div>
  );
}

export default App;

⁠useRef⁠ istenilen HTML elemntini degistirmek icinde kullanilabilir.

import { useState,useEffect,useRef } from "react";
import "./App.css";

function App(
) {
  const [name, setName] = useState("");
  //const [renderCount, setRenderCount] = useState(0)
  const renderCount = useRef(0);
  //{current:0}
  const inputRef = useRef();
  useEffect(() => {
   //setRenderCount((prev)=>prev + 1); //infinite loop
   renderCount.current = renderCount.current + 1; 
  });

  const focusInput = (
)=>{
    console.log(inputRef.current) //input html element
    inputRef.current.focus();
    inputRef.current.value = 'murat';
    setName(inputRef.current.value);
  }
  
  return (
    <div>
      <input
      ref={inputRef}
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <div>
        My Name is {name}
      </div>
      <div>{renderCount.current} times rendered</div>
      <button onClick={focusInput}>Focus</button>
    </div>
  );
}

export default App;

15. useTransition

Oncelik belirlemek icin kullanilir. Cok gerekli olmayan kod parcalarini sonradan calistirir. Cift render islemi yapar.

import { useState, useTransition } from "react";
import "./App.css";

function App(
) {
  const [input, setInput] = useState("");
  const [myList, setMylist] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    setInput(e.target.value);

    startTransition(() => {
      const myArray = [];
      for (let i = 0; i < 2000; i++) {
        myArray.push(e.target.value);
      }
      setMylist(myArray);
    });
  };
  return (
    <div>
      <input type="text" value={input} onChange={handleChange} />

      {isPending ? 'Loading...' : myList.map((item, index) => {
        return <div key={index}>{item}</div>;
      })}
    </div>
  );
}

export default App;

⁠useTransition⁠ ilk degisken ⁠boolean⁠ turunde, ⁠true⁠ olarak atanir. ⁠startTransition⁠ fonksiyonu tamamlandiginde deger ⁠false⁠ a doner.

16. useDeferredValue

⁠useTransition⁠ ile benzer islemi yapar. Burada, ⁠useDeferredValue⁠ import edildikten sonra bir degere atamasi yapilir. Atanan deger sonradan islem gorur (Cift render).

⁠App.jsx⁠

import { useState } from "react";
import "./App.css";
import Characters from "./Characters";

function App(
) {
  const [input, setInput] = useState("");

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleChange} />
      <Characters input={input} />
    </div>
  );
}

export default App;

⁠Characters.jsx⁠

import { useMemo,useDeferredValue } from "react";

function Characters({input}) {
    const deferredValue = useDeferredValue(input);
    const myList = useMemo(()=>{
        const myArray = [];
        for (let i = 0; i < 3000; i++) {
            myArray.push(<div key={i}>{deferredValue}</div>)
        }
        return myArray;
    },[deferredValue]);
    return myList;
}

export default Characters;

17. Custom Hooks

Hooks ⁠use⁠ keyword u ile baslamali. Derleme islemi sirasinda hooks kontrolleri yapilir.