React
React

React temel mantığını anlayarak devam edersek, sonrasında öğreneceklerimiz daha mantıklı gelecektir ve daha sağlam bir alt yapı oluşturmuş olacağız. Burada React’ın en temel mantığından başlayacağız ve sonrasında daha pratik araçları yavaş yavaş dahil edeceğiz.

Düz Mantık React Projesi

Burada nasıl index.html, style.css ve script.js oluşturarak projelerimize başlıyorsak aynı şekilde ilk React projemizi de aynı şekilde oluşturarak başlıyoruz.

NOT: ReactDOM.render() react 18 öncesinde kullanılıyordu ve 18 ve sonrası bunu artık desteklemiyor. 

//index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
    <link rel="stylesheet" href="./index.css">
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
//script.js 

ReactDOM.render(<h1>React öğreniyorum!</h1>, document.getElementById('root'))

render kısmında istediğimiz HTML yapısını dönebiliyoruz. Başka bir örnek;

render(
      <ul>
       <li>one</li>
       <li>one</li>
      </ul>
)

Standartta yaptığımız isimlendirmeler React’ta index.html, index.js, index.css veya App şeklinde yapılıyor. Yukarıdaki kodu biraz incelerseniz React’ı CDN üzerinden projeye dahil ettik ve ReactDOM kullanarak id=”root” olan div’e ulaşarak içerisine <h1> etiketleri içinde “React öğreniyorum!” yazdırdık. Bu işlem bildiğimiz JS işlemi ile aynı. id seçiyoruz ve içeriğini değiştiriyoruz.

React 18 ve sonrası

React 18 ve sonrası sürümlerinde artık ReactDOM.render() fonksiyonu kullanımdan kaldırıldı ve artık createElement(type, props, …children) yapısını kullanıyor olacağız. Aşağıda bu kullanıma bir örnek bulacaksınız.

const element = createElement("h1", null, "Hello React!");

Daha önceden bu reactDOM.createroot() olan root oluşturma kodu 18’den sonra createRoot(domNode, options?) olarak güncellendi. Aşağıdaki örnekte daha net görebilirsiniz.

const root = createRoot(document.getElementById('root'), options?)

root.render(element); //Bu şekilde değişiklikleri ekrana basıyoruz.

Buraya kadar işlediğimiz konular tamamen React’in temel konularıydı. Temel mantığı anladıysak şimdi JSX’e geçiş yapalım ve kalabalık kodlardan biraz daha kurtulalım.

JSX

JSX yazdığımızda babel aracılığı ile içeriklerimiz tekrar JS’e dönüştürülüyor. Bizim yapmamız gereken şey projemize babel kütüphanesini dahil etmek kodlarımızı ve JSX’e çevirmek.

JSX için buradaki JS ile JSX arasındaki farklar adlı yazıma göz atabilirsiniz.

//index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
    <link rel="stylesheet" href="./index.css">
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script src="./script.js" type="text/babel">
       const template = <h1>Hello React</h1>;
       const root = createRoot(document.getElementById("root"));
       root.render(template);    
    </script>
</body>

</html>

Yukarıdaki kod yapısı ben bu blog yazısını yazarken en güncel kod yukarıdakidir. Güncel kullanımlarına React.dev sayfasından ulaşabilirsiniz.

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.