Hello World w React

By /

Html React

Zgodnie z tradycją musimy utworzyć najprostszy program wyświetlający Hello World i w przypadku React będzie to naprawdę minimalistyczny projekt, bez paczek z npm czy kompilacji kodu:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <script src="test.js"></script>
    <div id="root"/>
    <script type="text/babel">
      // komponent App zwracający JSX  
      function App() {
        return <div>Hello World!</div>;
      }

      // Komponent App jest renderowany przez React w div #root
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

     Podobny przykład możemy znaleźć w dokumentacji React i warto się z nią zapoznać, gdyż nie raz wrócimy do niej w przyszłości, Odnośnie powyższego kodu omówmy co się tutaj porobiło, gdyż pewne elementy mogą wyglądać egzotycznie dla początkujących z React.

     Pierwsze dwa tagi script ładują oczywiście React, natomiast trzeci script wczytuje bibliotekę Babel dzięki której przeglądarka jest w stanie zrozumieć skrypt typu “text/babel”. Jest nam to niezbędne gdyż w kodzie aplikacji korzystamy z JSX czyli JavaScript XML, który “udaje” nam kod html, a tak naprawdę kompilowany jest przez Babel do zwykłego JavaScript, takie cuda 🙂

Przejdźmy do naszego komponentu App. Istnieje w każdej aplikacji React jako punkt startowy naszego programu, to w tym komponencie dodamy kolejne komponenty. Ok, ale ktoś może się spytać czym jest komponent? Otóż w React komponenty to takie klocki z których budujemy aplikację i to od nas zależy jakie treści będą zawierały. Np jeden komponent może wyświetlać ostatnie artykuły, drugi menu w header na górze strony, a trzeci prawą kolumnę z dodatkowymi opcjami. Zauważmy również że utworzenie komponentu jest banalnie proste, może to być zwykła funkcja zwracająca kod do wyrenderowania.

function App() {
    return <div>Hello World!</div>;
}

Na początku pracy z React może wydawać się dziwne że JavaScript mieszamy z html, ale z czasem przekonamy się, że jest to czysta poezja i wygoda. Jak widać komponent App zwraca kod html z elementem div, a w nim jest tekst “Hello world”. Wygląda jak Html, ale w praktyce jest to kod JSX. Oczywiście przeglądarka nie zrozumie tego zapisu, dlatego Babel przerobi ten JSX na faktyczne odwołania do funkcji JavaScript jak poniżej:

function App() {
    return React.createElement("div", null, "Aplikacja w React");
}

To jest ten sam JSX, ale już skompilowany do JavaScript, gdzie React tworzy element Html, który później będzie mógł być dodany do DOM. No właśnie, ale jak to się dzieje w praktyce? Otóż potrzebujemy wywołać funkcję render React’a:

ReactDOM.render(<App />, document.getElementById("root"));

Ponownie jest to JSX gdzie odwołujemy się do naszego komponentu jak do taga html, ale uwaga z dużej litery czyli App, podobnie jak nazwa komponentu. Następnie taki komponent jest renderowany w div#root. A jakby wyglądał skompilowany JSX do zwykłego kod JavaScript, który przeglądarka zrozumie, tak jak poniżej:

ReactDOM.render(React.createElement(App, null), document.getElementById("root"));

Pamiętajmy, że jest to bardzo uproszczony przykład i w kolejnych przykładach dodamy komponenty do oddzielnych plików oraz skorzystamy z boilerplate create-react-app, który będzie już pełnoprawnym projektem.

 

Powiązane artykuły

Scroll to Top