JSX İçinde Fonksiyon Çağırma

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 9 / 42.

Süslü parantezler her türlü ifadeyi kabul ettiğinden, fonksiyon çağrılarını da kabul eder. Bileşenin üstünde bir yardımcı fonksiyon tanımlayın ve bunu doğrudan biçimlendirme içinde çağırın:

function shout(text) {
    return text.toUpperCase() + '!';
}

export default function App() {
    return <h1>{shout('hello')}</h1>;
    // render eder: HELLO!
}

Bu, bileşenlerin okunabilir kalmasını sağlar: işaretleme neğin göründüğünü söyler, yardımcılar nasıl hesaplandığını söyler. Dize metotları da doğrudan çalışır:

<p>{name.toUpperCase()}</p>

Görev

Kolay

fullName yardımcısı iki parçadan bir ekran adı oluşturur, ancak kimse onu çağırmaz.

id="author" olan paragrafın fullName('Grace', 'Hopper') çağrısının sonucunu işlemesini sağlayın: Grace Hopper göstermelidir.

Kendin dene

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>