Czym jest React?

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

React to najpopularniejsza na świecie biblioteka do tworzenia interfejsów użytkownika. Facebook, Netflix, Airbnb: interaktywne części stron internetowych, z których korzystasz na co dzień, są zbudowane przy jej użyciu.

Główna idea jest prosta: zamiast tworzyć jedną ogromną stronę, budujesz małe, wielokrotnego użytku elementy zwane komponentami. Przycisk to komponent. Karta profilu to komponent. Cała strona to po prostu komponenty wewnątrz komponentów.

Komponent to nic strasznego: to funkcja JavaScript, która zwraca to, co powinno pojawić się na ekranie:

function App() {
    return <h1>Hello, React!</h1>;
}

Ten element wyglądający jak HTML wewnątrz JavaScript nazywa się JSX. Pozwala opisać ekran tam, gdzie znajduje się logika. React bierze to, co zwracają twoje komponenty, i dba o synchronizację z rzeczywistą stroną. Opisujesz, co chcesz uzyskać, a React ustala, jak zaktualizować przeglądarkę.

W tym kursie będziesz edytować plik App.jsx, główny komponent małej aplikacji React. Podgląd po prawej stronie pokazuje Twoją aplikację na żywo podczas pisania. Zbudujmy coś.

Wyzwanie

Początkujący

Oto Twój pierwszy komponent React, już dla Ciebie napisany.

Co zrobić:

Przeczytaj App.jsx: to funkcja, która zwraca JSX.
Naciśnij przycisk Uruchom.
Obserwuj podgląd po prawej stronie, w którym wyświetli się to, co zwrócił komponent.

Na tym polega cała pętla React: komponent zwraca JSX, a React umieszcza go na ekranie. Począwszy od następnej lekcji, będziesz samodzielnie pisać JSX.

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>