React İpuçları

React Hooks Rehberi

React ve React Router ile ilgili hook'ların kısa ve yalın örneklerle anlatıldığı bir rehber hazırladım. Bu rehber, React'in en temel kullanımından başlayarak, tüm önemli hook'ları içeren örnekler sunmaktadır.

1. useState Hook

Durum yönetimi için kullanılır.

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
};

export default Counter;

2. useEffect Hook

Yan etkileri yönetmek için kullanılır.

import React, { useState, useEffect } from 'react';

const Timer = () => {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prev => prev + 1);
        }, 1000);

        return () => clearInterval(interval); // Cleanup on unmount
    }, []);

    return <p>Seconds: {seconds}</p>;
};

export default Timer;

3. useContext Hook

Context API ile global durum yönetimi sağlar.

import React, { useContext } from 'react';

const MyContext = React.createContext();

const Display = () => {
    const value = useContext(MyContext);
    return <p>{value}</p>;
};

const App = () => {
    return (
        <MyContext.Provider value="Hello World!">
            <Display />
        </MyContext.Provider>
    );
};

export default App;

4. useReducer Hook

Daha karmaşık durum yönetimi için kullanılır.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}

const Counter = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
        </div>
    );
};

export default Counter;

5. useRef Hook

DOM elemanlarına veya durum değişimlerinden etkilenmeyen değişkenlere referans sağlar.

import React, { useRef } from 'react';

const TextInput = () => {
    const inputRef = useRef(null);

    const focusInput = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={focusInput}>Focus Input</button>
        </div>
    );
};

export default TextInput;

React Router

1. useHistory Hook

Yönlendirme yapmak için kullanılır.

import React from 'react';
import { useHistory } from 'react-router-dom';

const NavigateButton = () => {
    const history = useHistory();

    const handleClick = () => {
        history.push('/next-page');
    };

    return (
        <button onClick={handleClick}>Go to Next Page</button>
    );
};

export default NavigateButton;

2. useParams Hook

URL parametrelerini almak için kullanılır.

import React from 'react';
import { useParams } from 'react-router-dom';

const UserDetail = () => {
    const { id } = useParams();

    return <p>User ID: {id}</p>;
};

export default UserDetail;

3. useLocation Hook

Mevcut konum bilgisini almak için kullanılır.

import React from 'react';
import { useLocation } from 'react-router-dom';

const LocationDisplay = () => {
    const location = useLocation();

    return <p>Current URL: {location.pathname}</p>;
};

export default LocationDisplay;

4. useRouteMatch Hook

URL eşleşmelerini almak için kullanılır.

import React from 'react';
import { useRouteMatch } from 'react-router-dom';

const MatchDisplay = () => {
    const match = useRouteMatch('/path/:id');

    return (
        <div>
            {match ? <p>Matched ID: {match.params.id}</p> : <p>No match</p>}
        </div>
    );
};

export default MatchDisplay;

Bu rehber, React ve React Router'da sık kullanılan hook'ların kısa ve anlaşılır örneklerini içerir. Bu örnekler, uygulamanızda bu hook'ları kullanmaya başlamak için temel bir referans noktası sağlar.