Podstawy React, sprawdź jak działa!

Ten tutorial da tylko podstawowe zrozumienie czym jest React. W ciągu 5 minut postaramy się zrozumieć jak działa React, poprzez zbudowanie prostej aplikacji. To podstawy React, dlatego pominięte zostaną wszystkie zaawansowane zagadnienia związane z tą biblioteką.

Instalacja React

Rozpoczynając pracę z Reactem, używamy najprostszej możliwej konfiguracji. W pliku HTML dodajemy kod, który importuje biblioteki ReactReactDOM za pomocą tagów skryptu.

Przykładowy kod:

<html>
<head>  
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> 
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>  
</head>  
<body>  
    <div id="root"></div>  
    <script type="text/babel">  
      
    /*   
    DODAJ KOD REACT TUTAJ
    */  
      
    </script>  
</body>  
</html>

Zaimportowany został również Babel, ponieważ React wykorzystuje do pisania znaczników, czegoś co nazywa się JSX. Będziemy musieli przekształcić JSX w zwykły JavaScript, aby przeglądarka mogła go zrozumieć.

Są jeszcze dwie ważne rzeczy:

  1. The <div> o identyfikatorze #root. To jest punkt wejścia do naszej aplikacji. Tutaj będzie mieszkać cała nasza aplikacja.
  2. Znacznik <script type="text/babel"> w ciele. Tutaj napiszemy nasz kod React.

Wszystko w React jest komponentem, a te zwykle przybierają formę klas JavaScript. Tworzymy komponent, rozszerzając klasę React-Component. Stwórzmy zatem komponent o nazwie Hello:

class Hello extends React.Component {  
    render() {  
        return <h1>Hello world!</h1>;  
    }  
}

Następnie definiujemy metodę dla komponentu. W tym przykładzie mamy tylko jedną metodę o nazwie render().

Wewnątrz render() zwracamy opis tego, co React ma pokazać na stronie. W powyższym przykładzie zamiarem jest wyświetlenie po prostu tagu h1 z tekstem Hello world!

Aby nasza mała aplikacja renderowała się na ekranie, musimy również użyć ReactDOM.render():

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

W tym miejscu łączymy nasz Hello komponent z punktem wejścia dla aplikacji (<div id="root"></div>).

Więc mówimy po prostu: Hej React! Proszę wyrenderować komponent Hello wewnątrz węzła DOM z identyfikatorem root!

Skutkuje to:

Podstawy React

Składnia HTML, którą właśnie widzieliśmy ( <h1><Hello/>) to kod JSX, o który został wspomniany wcześniej.

Następnym krokiem jest nakłonienie naszej aplikacji do obsługi danych.

React można połączyć z Wordpressem. Sprawdź jak działa headless CMS.

Podstawy React : obsługa danych

W React istnieją dwa typy danych: props i state . Różnica między nimi jest nieco trudna do zrozumienia na początku, więc nie martw się, jeśli uznasz to za nieco zagmatwane. Gdy zaczniemy z nimi pracować, stanie się to łatwiejsze.

Kluczową różnicą jest to, że state jest prywatne i można je zmienić z poziomu samego komponentu. Props-y są zewnętrzne i nie są kontrolowane przez sam komponent. Jest przekazywany z komponentów znajdujących się wyżej w hierarchii, które również kontrolują dane.

Komponent może bezpośrednio zmienić swój stan wewnętrzny. Nie może bezpośrednio zmieniać swoich propsów.

Przyjrzyjmy się najpierw props-om.

Props

Nasz Hello komponent jest całkowicie statyczny. Wyświetla to samo przesłanie bez względu na wszystko. Jednak dużą częścią Reacta jest możliwość ponownego wykorzystania, co oznacza możliwość jednorazowego napisania komponentu, a następnie ponownego użycia go w różnych przypadkach użycia. Na przykład, aby wyświetlić różne komunikaty.

Aby osiągnąć ten rodzaj ponownego wykorzystania, dodamy props. W ten sposób przekazujemy props-y do komponentu:

ReactDOM.render(  
    <Hello message="my friend" />,   
    document.getElementById("root")  
);

Ten props nazywa się message i ma wartość „my friend”. Możemy uzyskać dostęp do tej właściwości wewnątrz komponentu Hello, odwołując się do this.props.message, w ten sposób:

class Hello extends React.Component {  
    render() {  
        return <h1>Hello {this.props.message}!</h1>;  
    }  
}

W rezultacie na ekranie jest to renderowane:

Szybki tutorial ReactJs

Powodem, dla którego piszemy {this.props.message} z nawiasami klamrowymi, jest to, że musimy poinformować JSX, że chcemy dodać wyrażenie JavaScript. Nazywa się to escaping.

Więc teraz mamy komponent wielokrotnego użytku, który może renderować dowolną wiadomość na stronie. Hurra!

Co jednak, jeśli chcemy, aby komponent mógł zmieniać własne dane? Wtedy zamiast tego musimy użyć state!

State

Innym sposobem przechowywania danych w React jest state. I w przeciwieństwie do props-ów — których nie można zmienić bezpośrednio przez komponent, state można.

Jeśli więc chcesz, aby dane w Twojej aplikacji uległy zmianie — na przykład na podstawie interakcji użytkownika — muszą być przechowywane w stanie składnika gdzieś w aplikacji.

Inicjowanie state

Aby zainicjować state, po prostu ustawiamy this.state  metodę klasy constructor(). Nasz state to obiekt, który w naszym przypadku posiada tylko jeden klucz o nazwie message.

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
    }  
      
    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}

Zanim ustawimy state, musimy wywołać super() konstruktora. Dzieje się tak, ponieważ this jest niezainicjowany, zanim super() został wywołany.

Zmiana stanu

Aby zmodyfikować state, po prostu wywołamy this.setState(), przekazując nowy obiekt stanu jako argument. Zrobimy to wewnątrz metody, którą wywołamy updateMessage.

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
        this.updateMessage = this.updateMessage.bind(this);   
   }

   updateMessage() {  
        this.setState({  
            message: "my friend (from changed state)!"  
        });  
    }

    render() {  
        return <h1>Hello {this.state.message}!</h1>;  
    }  
}

Uwaga: Aby to zadziałało, musimy powiązać this słowo kluczowe z updateMessage metodą. W przeciwnym razie nie moglibyśmy uzyskać dostępu do this w tej metodzie.

Obsługa zdarzeń

Następnym krokiem jest utworzenie przycisku do kliknięcia, abyśmy mogli wywołać metodę updateMessage().

Dodajmy więc przycisk do metody render():

render() {  
  return (  
     <div>  
       <h1>Hello {this.state.message}!</h1>  
       <button onClick={this.updateMessage}>Click me!</button>  
     </div>     
  )  
}

Tutaj podłączamy detektor zdarzeń do przycisku, nasłuchując zdarzenia onClick . Gdy to zostanie wywołane, wywołujemy metodę updateMessage .

Oto cały komponent:

class Hello extends React.Component {  
      
    constructor(){  
        super();  
        this.state = {  
            message: "my friend (from state)!"  
        };  
        this.updateMessage = this.updateMessage.bind(this);  
    }

    updateMessage() {  
        this.setState({  
            message: "my friend (from changed state)!"  
        });  
    }

    render() {  
         return (  
           <div>  
             <h1>Hello {this.state.message}!</h1>  
             <button onClick={this.updateMessage}/>Click me!</button>  
           </div>     
        )  
    }  
}

Następnie metoda updateMessage wywołuje this.setState() , która zmienia wartość this.state.message.

React podstawy : Podsumowanie

Gratulacje! Masz teraz bardzo podstawową wiedzę na temat najważniejszych pojęć w React.

Tworzę strony internetowe zachowując przy tym najwyższe standardy UI&UX. Aktualnie pracuję jako Full Stack Dev w BrainBox (Gdynia). W czasie wolnym prowadzę również działalność jako Freelancer o pseudonimie 'Kemuri'.

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *