Udostępnij przez

Samouczek: React w systemie Windows dla początkujących

Jeśli dopiero zaczynasz korzystać z platformy React, ten przewodnik pomoże Ci rozpocząć pracę z niektórymi podstawami.

Wymagania wstępne

Kilka podstawowych terminów i pojęć

React to biblioteka języka JavaScript do tworzenia interfejsów użytkownika.

  • Jest to oprogramowanietypu open source, co oznacza, że można je współtworzyć, zgłaszając problemy lub żądania ściągnięcia zmian. (podobnie jak te dokumenty!)

  • Jest to deklaratywne, co oznacza, że piszesz żądany kod, a platforma React przyjmuje zadeklarowany kod i wykonuje wszystkie kroki języka JavaScript/DOM w celu uzyskania żądanego wyniku.

  • Jest to oparte na składnikach, co oznacza, że aplikacje są tworzone przy użyciu prefabrykowanych i niezależnych modułów kodu wielokrotnego użytku, które zarządzają własnym stanem i mogą być połączone ze sobą za pomocą frameworka React, co umożliwia przekazywanie danych przez aplikację przy zachowaniu stanu poza DOM.

  • Motto React to "Learn once, write anywhere". Intencją jest ponowne użycie kodu i nie podejmowania założeń dotyczących sposobu używania interfejsu użytkownika React z innymi technologiami, ale w celu ponownego użycia składników bez konieczności ponownego zapisywania istniejącego kodu.

  • JSX to rozszerzenie składni języka JavaScript napisane do użycia z platformą React, które wygląda jak HTML, ale jest w rzeczywistości plikiem JavaScript, który musi zostać skompilowany lub przetłumaczony na zwykły kod JavaScript.

  • Virtual DOM: DOM oznacza Model Obiektów Dokumentów i reprezentuje interfejs użytkownika aplikacji. Za każdym razem, gdy stan interfejsu użytkownika aplikacji zmienia się, DOM jest aktualizowany, aby odzwierciedlić tę zmianę. Gdy DOM jest często aktualizowany, wydajność spada. Wirtualny DOM jest tylko wizualną reprezentacją modelu DOM, więc po zmianie stanu aplikacji wirtualny dom jest aktualizowany, a nie rzeczywisty dom, co zmniejsza koszt wydajności. Jest to reprezentacja obiektu DOM, podobna do lekkiej kopii.

  • Widoki: to, co użytkownik widzi wyrenderowane w przeglądarce. W rozwiązaniu React widok jest związany z koncepcją elementów renderowania, które mają być widoczne na ekranie użytkownika.

  • State: odwołuje się do danych przechowywanych przez różne widoki. Stan zazwyczaj zależy od tego, kim jest użytkownik i co robi użytkownik. Na przykład zalogowanie się do witryny internetowej może spowodować wyświetlenie profilu użytkownika (widoku) z twoją nazwą (stanem). Dane stanu zmienią się na podstawie użytkownika, ale widok pozostanie taki sam. Stan służy do osiągnięcia większości interakcyjności użytkownika z aplikacją.

  • Props składnika: to sposób, w jaki komponent nadrzędny przekazuje informacje w postaci wartości lub danych (w tym obiektów, tablic i funkcji) do komponentów potomnych. Właściwości są tylko do odczytu i nie mogą być zaktualizowane przez komponent podrzędny.

Spróbuj użyć platformy React w programie Visual Studio Code

Istnieje wiele sposobów tworzenia aplikacji za pomocą platformy React (zobacz Omówienie platformy React , aby zapoznać się z przykładami). W tym samouczku przedstawimy, jak używać vite do przyspieszenia konfiguracji funkcjonującej aplikacji React, aby można było zobaczyć, jak działa, i skupić się na eksperymentowaniu z kodem, nie martwiąc się jeszcze narzędziami do budowy.

  1. Użyj narzędzia vite w systemie Windows lub WSL (zobacz powyższe wymagania wstępne), aby utworzyć nowy projekt: npm create vite@latest hello-world -- --template react

  2. Zmień katalogi, tak aby znajdujesz się w folderze dla nowej aplikacji: , zainstalować zależności: cd hello-worldnpm install a następnie uruchomić lokalny serwer deweloperów:npm run dev

    Nowa aplikacja React Hello World skompiluje się i otworzy domyślną przeglądarkę internetową, aby pokazać, że działa na http://localhost:5173.

  3. Zatrzymaj uruchamianie aplikacji React (Ctrl+c) i otwórz pliki kodu w programie VS Code, wprowadzając następujące polecenie: code .

  4. Znajdź plik src/App.jsx i znajdź sekcję nagłówka zawierającą tekst:

    <p>Edit <code>src/App.jsx</code> and save to test HMR</p>

    Zmień to, aby brzmiało:

    <p>Hello World! This is my first React app.</p>

  5. Otwórz okno terminalu i uruchom lokalny serwer deweloperów: npm run dev lub możesz użyć zintegrowanego terminalu programu VS Code (Ctrl + ') i uruchomić serwer deweloperów z tego miejsca.

    Zrzut ekranu aplikacji HelloWorld React w przeglądarce

Podczas opracowywania aplikacji React można utrzymywać lokalny serwer deweloperski w stanie uruchomionym, a wszystkie zmiany będą natychmiast widoczne http://localhost:5173 w przeglądarce.

Struktura pliku aplikacji

Początkowa struktura plików wygląda następująco:

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Na początek są to ważne pliki i foldery, które należy znać.

index.html to plik, w którym aplikacja Vite wprowadza kod z src folderu przeglądarki, aby go uruchomić. Nie należy edytować tego pliku z wyjątkiem zmiany tytułu aplikacji React.

Folder src to miejsce, w którym znajduje się kod źródłowy aplikacji React. Jest to miejsce, w którym można tworzyć niestandardowe składniki, pliki CSS i inne pliki kodu potrzebne do skompilowania aplikacji. Te pliki są przetwarzane przez narzędzia kompilacji Vite w celu ich analizy i kompilacji, aby stworzyć ostateczny projekt React.

Folder public zawiera wszystkie pliki statyczne, które będą obsługiwane bezpośrednio w przeglądarce. Te pliki nie są przetwarzane przez usługę Vite.

Spróbuj użyć platformy React z interfejsem API

Korzystanie z tego samego Hello World! aplikacja utworzona za pomocą platformy React i zaktualizowana za pomocą programu Visual Studio Code spróbujmy dodać wywołanie interfejsu API, aby wyświetlić niektóre dane.

  1. Zacznijmy od nowa. Usuniemy prawie cały standardowy kod dostarczony przez Vite i zachowamy tylko nasz kod z poprzedniego kroku.

    Plik App.jsx powinien teraz wyglądać następująco:

    import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

    Zrzut ekranu przedstawiający uproszczoną aplikację HelloWorld React w przeglądarce

  2. Następnie ustawmy stan lokalny, w którym możemy zapisywać dane z interfejsu API. Stan to miejsce, w którym można przechowywać dane do użycia w widoku.

    Aby dodać stan lokalny, należy najpierw zaimportować element useState React Hook, który umożliwia dodanie zmiennej stanu do składnika.

    Musimy również zainicjować stan lokalny. Element useState zwraca tablicę dwóch wartości: bieżący stan i funkcję set. Będziemy określać nasz bieżący stan jako posts, zainicjowany jako pusta tablica, którą możemy później wypełnić danymi z postów z naszego interfejsu API, używając funkcji setPosts.

    Plik App.jsx powinien teraz wyglądać następująco:

    import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  3. Aby wywołać interfejs API z danymi do użycia w naszej aplikacji React, użyjemy metody fetch języka JavaScript. Interfejs API, który wywołamy, to JSONPlaceholder- darmowy interfejs API do testowania i prototypowania, dostarczający fikcyjne dane zastępcze w formacie JSON.

    Używamy hooka useEffect React, aby zaktualizować stan posts przy użyciu funkcji setState.

    import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  4. Spójrzmy, jakie dane API zapisało w naszym stanie posts. Poniżej znajduje się część zawartości fałszywego pliku API JSON . Możemy zobaczyć format, w którym są wyświetlane dane, używając kategorii: "albumId", "id", "title", "url" i "thumbnailUrl".

    [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

  5. Aby wyświetlić dane interfejsu API, musimy teraz dodać trochę kodu JSX wewnątrz renderowanej return() instrukcji. Użyjemy metody map(), aby wyświetlić nasze dane z obiektu posts, w którym je przechowaliśmy jako klucze. Każdy wpis wyświetli nagłówek o wartości "ID #", a następnie wartość klucza post.id + wartość klucza post.title z naszych danych JSON. Po nim treść wyświetlająca obraz na podstawie wartości klucza thumbnailUrl.

    // rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;

    aplikacja React wyświetlająca dane zastępcze z interfejsu API

Dodatkowe zasoby

  • Last updated on