Twój pierwszy komponent

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 2 z 42.

Czas napisać pierwszy komponent. Spójrz na App.jsx. To funkcja, która zwraca JSX:

export default function App() {
    return (
        <div>

        </div>
    );
}

W tej chwili zwraca pusty element <div>, więc podgląd jest pusty. Cokolwiek umieścisz w środku w JSX, zostanie wyrenderowane (nagłówki, akapity, przyciski, cokolwiek):

<h1 id="title">Hello, React!</h1>

Zwróć uwagę na atrybut id: działa tak samo jak w HTML, a nasze testy używają identyfikatorów, aby znaleźć Twoje elementy. Dwa pozostałe pliki stanowią zaplecze aplikacji: index.html zawiera aplikację, a main.jsx umieszcza App na stronie. Są zablokowane. Pracujesz w pliku App.jsx.

Wyzwanie

Początkujący

Spraw, by Twoja aplikacja przywitała świat.

Wewnątrz elementu <div> w pliku App.jsx dodaj element <h1> z atrybutem id="title".
Jego tekst musi być dokładnie taki: Hello, React!

Spróbuj swoich sił

<!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>