React Notları ve İpuçları

İçindekiler

1. JSX Temelleri
2. Bileşenler
3. Props
4. State
5. Yaşam Döngüsü Yöntemleri
6. Hooks
7. Olay Yönetimi
8. Koşullu Render
9. Listeler ve Anahtarlar
10. Formlar
11. Context API
12. Refs
13. Yüksek Düzey Bileşenler (HOCs)
14. Render Props
15. Portallar
16. Hata Sınırları
17. Kod Bölme
18. React'te Stil Verme
19. Performans Optimizasyonu
20. Test Etme

JSX Temelleri

Temel Sözdizimi

const element = <h1>Merhaba, dünya!</h1>;

İfade Gömmek

const name = 'John';
const element = <h1>Merhaba, {name}</h1>;

Özellikler

const element = <div className="container">İçerik</div>;

Çocuklar

const element = (
  <div>
    <h1>Başlık</h1>
    <p>Paragraf</p>
  </div>
);

Bileşenler

Fonksiyonel Bileşen

function Welcome(props) {
  return <h1>Merhaba, {props.name}</h1>;
}

Sınıf Bileşeni

class Welcome extends React.Component {
  render() {
    return <h1>Merhaba, {this.props.name}</h1>;
  }
}

Bileşenleri Birleştirme

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

Props

Props Geçirme

<Welcome name="Alice" age={25} />

Props Erişimi

function Welcome(props) {
  return <h1>Merhaba, {props.name}</h1>;
}

Varsayılan Props

Welcome.defaultProps = {
  name: 'Misafir'
};

PropTypes

import PropTypes from 'prop-types';

Welcome.propTypes = {
  name: PropTypes.string.isRequired
};

State

Sınıf Bileşeni State'i

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <div>Sayım: {this.state.count}</div>;
  }
}

State Güncelleme

this.setState({ count: this.state.count + 1 });

Fonksiyonel Güncellemeler

this.setState((prevState) => ({
  count: prevState.count + 1
}));

Yaşam Döngüsü Yöntemleri

Montaj

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // State'i başlat
  }

  static getDerivedStateFromProps(props, state) {
    // Props'a göre yeni state döndür
  }

  render() {
    // Bileşeni render et
  }

  componentDidMount() {
    // Bileşen monte edildi
  }
}

Güncelleme

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Yeniden render edip etmeyeceğine karar ver
  }

  render() {
    // Bileşeni render et
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // DOM'dan bilgi yakala
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Bileşen güncellendi
  }
}

Montajı Kaldırma

class MyComponent extends React.Component {
  componentWillUnmount() {
    // Temizlik yap
  }
}

Hooks

useState

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Sayım: {count}</p>
      <button onClick={() => setCount(count + 1)}>Arttır</button>
    </div>
  );
}

useEffect

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Tıkladınız: ${count} kez`;
  }, [count]);

  return (
    <div>
      <p>{count} kez tıkladınız</p>
      <button onClick={() => setCount(count + 1)}>Bana Tıkla</button>
    </div>
  );
}

useContext

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Temalı Buton</button>;
}

useReducer

import React, { useReducer } from 'react';

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      Sayım: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

useCallback

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

function ParentComponent() {
  const [count, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return <ChildComponent onIncrement={incrementCount} />;
}

useMemo

import React, { useMemo } from 'react';

function ExpensiveComponent({ a, b }) {
  const result = useMemo(() => {
    // Zorlu hesaplama
    return a + b;
  }, [a, b]);

  return <div>{result}</div>;
}

useRef

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Girdiyi Odakla</button>
    </>
  );
}

Olay Yönetimi

Olayları Yönetme

function handleClick() {
  console.log('Butona tıklandı!');
}

return <button onClick={handleClick}>Bana Tıkla</button>;

Olay Yöneticilerine Argüman Geçirme

function handleClick(id) {
  console.log('Tıklanan öğe ID'si:', id);
}

return <button onClick={() => handleClick(42)}>Bana Tıkla</button>;

Koşullu Render

If İfadesi

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

Üçlü Operatör

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
    </div>
  );
}

Koşullu İçerik

function Mailbox({ unreadMessages }) {
  return (
    <div>
      {unreadMessages.length > 0 && (
        <h2>Okunmamış mesajlar: {unreadMessages.length}</h2>
      )}
    </div>
  );
}

Listeler ve Anahtarlar

Liste Render

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

return <ul>{listItems}</ul>;

Anahtarların Kullanımı

Anahtarlar, her öğenin benzersiz bir kimliğe sahip olduğunu belirtir. Bu, React'in öğeleri yeniden sıralamasına veya güncellemesine yardımcı olur.

Formlar

Basit Form

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Bir isim gönderildi: ' + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        İsim:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="submit">Gönder</button>
    </form>
  );
}

Kontrol Edilen Bileşen

Form öğeleri, bileşenin state'i ile kontrol edilir.

Context API

Context Oluşturma

const ThemeContext = React.createContext('light');

Context Sağlama

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Context Tüketimi

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Temalı Buton</button>;
}

Refs

Ref Oluşturma

const inputRef = useRef(null);

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

return (
  <>
    <input ref={inputRef} type="text" />
    <button onClick={focusInput}>Girdiyi Odakla</button>
  </>
);

Yüksek Düzey Bileşenler (HOCs)

HOC Tanımı

HOC'ler, bileşenlere ekstra özellikler ekleyen fonksiyonlardır.

HOC Örneği

function withExtraInfo(WrappedComponent) {
  return function EnhancedComponent(props) {
    return <WrappedComponent extra="ekstra bilgi" {...props} />;
  };
}

Render Props

Render Props Kullanımı

Render props, bir bileşeni dinamik olarak oluşturmak için kullanılan bir tekniktir.

Render Props Örneği

function DataProvider({ render }) {
  const data = fetchData();
  return render(data);
}

function App() {
  return (
    <DataProvider render={(data) => <div>{data}</div>} />
  );
}

Portallar

Portal Kullanımı

Portallar, bileşenlerin DOM ağacının farklı bir noktasına render edilmesini sağlar.

Portal Örneği

function MyModal({ children }) {
  return ReactDOM.createPortal(
    children,
    document.getElementById('modal-root')
  );
}

Hata Sınırları

Hata Sınırı Tanımı

Hata sınırları, JavaScript hatalarını yakalar ve bir yedek UI sunar.

Hata Sınırı Örneği

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Bir şeyler ters gitti.</h1>;
    }

    return this.props.children;
  }
}

Kod Bölme

Kod Bölme Kullanımı

Kod bölme, büyük uygulamaları daha yönetilebilir hale getirir.

Kod Bölme Örneği

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Yükleniyor...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

React'te Stil Verme

Inline Stiller

const style = { color: 'blue', fontSize: '20px' };

function StyledComponent() {
  return <div style={style}>Stil Uygulanmış Metin</div>;
}

CSS Modülleri

import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.container}>CSS Modülü Örneği</div>;
}

Styled Components

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: blue;
  font-size: 20px;
`;

function App() {
  return <StyledDiv>Styled Components Örneği</StyledDiv>;
}

Performans Optimizasyonu

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  // Bileşen kodu
});

useMemo ve useCallback

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { /* callback */ }, [dependencies]);

Test Etme

Bileşen Testi

Bileşenleri test etmek için React Testing Library veya Enzyme kullanılabilir.

Test Örneği

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the correct text', () => {
  render(<MyComponent />);
  const linkElement = screen.getByText(/text to be rendered/i);
  expect(linkElement).toBeInTheDocument();
});