Opublikowano 2022-07-10 · Biblioteka React, kurs react, React w 5 minut, tutorial React

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 React i ReactDOM 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:

The <div> o identyfikatorze #root. To jest punkt wejścia do naszej aplikacji. Tutaj będzie mieszkać cała nasza aplikacja.
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:

Składnia HTML, którą właśnie widzieliśmy ( <h1> i <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:

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.

Artykul przygotowal

kemuri

KemuriCodes

X LinkedIn Facebook

Oceń ten artykuł

Powiazane wpisy

Jesli ten temat jest Ci bliski, sprawdz kolejne materialy z podobnego obszaru.

2024-09-28

Ekosystem Roots: Nowoczesne podejście do rozwoju WordPress

Jako doświadczony programista full-stack, często spotykam się z wyzwaniami związanymi z rozwojem i utrzymaniem stron opartych na WordPress. Mimo że WordPress jest niezwykle popularny i łatwy w użyciu dla końcowych użytkowników, deweloperzy często borykają się z przestarzałymi praktykami, niespójnymi środowiskami i trudnościami w zarządzaniu zależnościami. Właśnie dlatego ekosystem Roots przykuł moją uwagę jako potencjalne rozwiązanie … Continued

2024-09-24

Najlepsze biblioteki do scrapingu w PHP: Porównanie i praktyczne zastosowania

W erze big data, umiejętność efektywnego zbierania i analizy informacji staje się kluczowa dla sukcesu wielu projektów online. Jako programista PHP, miałem okazję zgłębić temat scrapingu i wykorzystać go do tworzenia dynamicznych, data-driven aplikacji. W związku z tym, w niniejszym artykule podzielę się moimi doświadczeniami z różnymi bibliotekami do scrapingu, prezentując ich zastosowania w różnych … Continued

2024-09-18

AIO vs SEO: przyszłość optymalizacji treści w erze sztucznej inteligencji

Od jakiegoś czasu obserwuję fascynującą transformację w świecie optymalizacji treści. Tradycyjne SEO, które przez lata stanowiło fundament strategii marketingu cyfrowego, zaczyna ustępować miejsca nowemu graczowi – AIO (Artificial Intelligence Optimization). Czy to oznacza koniec SEO? Niekoniecznie, ale z pewnością jesteśmy świadkami narodzin nowej ery w optymalizacji treści. SEO vs AIO: Ewolucja czy rewolucja? Zanim zagłębimy … Continued