Reaguj renderowanie HTML
Celem Reacta jest na wiele sposobów renderowanie kodu HTML na stronie internetowej.
React renderuje kod HTML na stronie internetowej za pomocą funkcji o nazwie
ReactDOM.render().
Funkcja renderowania
Funkcja ReactDOM.render()przyjmuje dwa argumenty, kod HTML i element HTML.
Celem funkcji jest wyświetlenie określonego kodu HTML wewnątrz określonego elementu HTML.
Ale renderuj gdzie?
W katalogu głównym projektu React znajduje się inny folder o nazwie „public”. W tym folderze znajduje się index.htmlplik.
Zauważysz jedno <div>
w treści tego pliku. To tutaj zostanie wyrenderowana nasza aplikacja React.
Przykład
Wyświetl akapit wewnątrz elementu o identyfikatorze „root”:
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Wynik jest wyświetlany w <div id="root">elemencie:
<body>
<div id="root"></div>
</body>
Zauważ, że identyfikator elementu nie musi być nazywany „root”, ale jest to standardowa konwencja.
Zostać certyfikowanym!
95 $ ZAPISZ
Kod HTML
Kod HTML w tym samouczku używa JSX, który umożliwia pisanie znaczników HTML w kodzie JavaScript:
Nie martw się, jeśli składnia jest nieznana, więcej o JSX dowiesz się w następnym rozdziale.
Przykład
Utwórz zmienną zawierającą kod HTML i wyświetl ją w węźle „root”:
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Węzeł główny
Węzeł główny to element HTML, w którym chcesz wyświetlić wynik.
Jest jak kontener na treści, którym zarządza React.
NIE musi to być <div>element i NIE musi mieć id='root':
Przykład
Węzeł główny można nazwać jak chcesz:
<body>
<header id="sandy"></header>
</body>
Wyświetl wynik w <header id="sandy">elemencie:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));