Sdílet prostřednictvím

Kurz: Reakce na Windows pro začátečníky

Pokud s používáním Reactu začínáte, pomůže vám tato příručka začít s některými základy.

Požadavky

Několik základních pojmů a konceptů

React je javascriptová knihovna pro vytváření uživatelských rozhraní.

  • Je opensourcových, což znamená, že k němu můžete přispívat vytvořením problémů nebo žádostí o přijetí změn. (stejně jako i tyto dokumenty!)

  • Je deklarativní, což znamená, že napíšete požadovaný kód a React převezme deklarovaný kód a provede všechny kroky JavaScriptu/DOM, aby získal požadovaný výsledek.

  • Je založených na komponentách, což znamená, že aplikace se vytvářejí pomocí předkompilovaných a opakovaně použitelných nezávislých modulů kódu, které spravují svůj vlastní stav a dají se připojit pomocí architektury React, což umožňuje předávat data přes aplikaci a zároveň udržovat stav mimo dom.

  • Heslo Reactu je "Učit se jednou, psát kdekoli". Záměrem je opětovné použití kódu a nečiní předpoklady o tom, jak budete uživatelské rozhraní React používat s jinými technologiemi, ale spíše umožňuje, aby komponenty byly znovupoužitelné bez nutnosti přepisovat stávající kód.

  • JSX je rozšíření syntaxe pro JavaScript napsané pro použití s Reactem, které vypadá jako HTML, ale ve skutečnosti je javascriptový soubor, který je potřeba zkompilovat nebo přeložit do běžného JavaScriptu.

  • Virtuální model DOM: MODEL DOM je zkratka pro Model objektu dokumentu a představuje uživatelské rozhraní vaší aplikace. Pokaždé, když se změní stav uživatelského rozhraní vaší aplikace, DOM se aktualizuje, aby představoval změnu. Při časté aktualizaci DOM se zpomalí výkon. Virtuální dom je pouze vizuální reprezentace modelu DOM, takže když se stav aplikace změní, virtuální dom se aktualizuje místo skutečného modelu DOM, což snižuje náklady na výkon. Jedná se o reprezentaci objektu DOM, jako je odlehčená kopie.

  • Zobrazení: jsou to, co uživatel vidí vykreslené v prohlížeči. V Reactu se pojem "pohled" vztahuje ke konceptu vykreslovacích prvků, které chcete, aby uživatel viděl na své obrazovce.

  • Stav: Odkazuje na data uložená v různých zobrazeních. Stav obvykle závisí na tom, kdo je uživatel a co dělá. Například přihlášení k webu může zobrazit váš uživatelský profil (zobrazení) s vaším jménem (stav profilu). Data o stavu se změní na základě uživatele, ale zobrazení zůstane stejné. Stav se používá k dosažení většiny interakce uživatele s aplikací.

  • Props komponenty: je způsob, jak nadřazená komponenta předat některé informace jako hodnotu nebo data (včetně objektů, polí a funkcí) podřízeným komponentám. Props jsou pouze pro čtení a nemohou být aktualizovány podřízenou komponentou.

Zkuste použít React v editoru Visual Studio Code

Existuje mnoho způsobů, jak vytvořit aplikaci pomocí Reactu (příklady najdete v přehledu Reactu ). V tomto kurzu se dozvíte, jak pomocí vite urychlit nastavení funkční aplikace React, abyste viděli, jak aplikace běží, a zaměřili se na práci a experimentování s kódem, aniž byste se museli ještě zabývat nástroji pro sestavení.

  1. K vytvoření nového projektu použijte virtuální počítač ve Windows nebo WSL (viz výše uvedené požadavky): npm create vite@latest hello-world -- --template react

  2. Změňte adresáře tak, abyste byli ve složce nové aplikace: cd hello-world, nainstalujte závislosti: npm install a pak spusťte místní vývojový server: npm run dev

    Vaše nová aplikace React Hello World se zkompiluje a otevře váš výchozí webový prohlížeč, který vám ukáže, že běží na http://localhost:5173.

  3. Ukončete spuštění aplikace React (Ctrl+c) a otevřete soubory kódu ve VS Code zadáním: code .

  4. Najděte soubor `src/App.jsx` a vyhledejte sekci záhlaví, která obsahuje:

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

    Změňte to na 'přečíst'.

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

  5. Otevřete okno terminálu a spusťte místní vývojový server: npm run dev nebo můžete použít integrovaný terminál VS Code (Ctrl + ') a spustit vývojový server odsud.

    Snímek obrazovky aplikace HelloWorld React v prohlížeči

Během vývoje aplikace React můžete udržovat místní vývojový server spuštěný a všechny změny se okamžitě vykreslují v http://localhost:5173 prohlížeči.

Struktura souborů aplikace

Počáteční struktura souborů vypadá takto:

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

Pro začátek jsou to důležité soubory a složky, které potřebujete znát.

index.html je soubor, ve kterém Vite vloží váš kód ze src složky, aby ho prohlížeč spustil. Tento soubor by neměl být upravován s výjimkou změny názvu aplikace React.

Ve src složce se nachází zdrojový kód vaší aplikace React. Je to místo, kde vytváříte vlastní komponenty, soubory CSS a další soubory kódu, které potřebujete k sestavení aplikace. Tyto soubory zpracovávají nástroje sestavení Vite, které parsují a sestavují, aby vytvořily konečný projekt Reactu.

Složka public obsahuje všechny statické soubory, které budou přímo přístupné ve vašem prohlížeči. Tyto soubory nezpracovávají Vite.

Zkuste použít React s rozhraním API

Použití stejného „Hello World!“ aplikaci, kterou jste vytvořili pomocí Reactu a aktualizovali pomocí editoru Visual Studio Code, zkusme přidat volání rozhraní API pro zobrazení některých dat.

  1. Pojďme začít znovu. Odebereme téměř veškerý často používaný kód, který poskytuje Vite, a zachováme pouze náš kód z předchozího kroku.

    Soubor App.jsx by teď měl vypadat takto:

    import "./App.css";

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

export default App;

    Snímek obrazovky zjednodušené aplikace HelloWorld React v prohlížeči

  2. Teď nastavíme místní stav, ve kterém můžeme ukládat data z rozhraní API. Stav je místo, kde můžeme ukládat data, která se mají použít v zobrazení.

    Abychom mohli přidat místní stav, musíme nejprve naimportovat useState React Hook, který umožňuje přidat do komponenty proměnnou stavu.

    Musíme také inicializovat místní stav. Vrátí useState pole dvou hodnot; aktuální stav a set funkci. Náš aktuální stav nazveme posts, inicializovaný jako prázdné pole, které můžeme později naplnit daty z našeho rozhraní API pomocí funkce setPosts.

    Soubor App.jsx by teď měl vypadat takto:

    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. K volání rozhraní API s daty, která použijeme v naší aplikaci React, použijeme metodu .fetch JavaScript. Rozhraní API, které chceme volat, je JSONPlaceholder, bezplatné rozhraní API pro testování a vytváření prototypů, které poskytuje fiktivní zástupná data ve formátu JSON.

    Při aktualizaci stavu pomocí funkce useEffect v knihovně React používáme funkci posts

    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. Pojďme se podívat, jaký druh dat rozhraní API uložil v našem posts stavu. Níže je uveden obsah falešného souboru rozhraní JSON API. Vidíme formát, ve který jsou data uvedená, pomocí kategorií: "albumId", "id", "title", "url" a "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. Abychom mohli zobrazit data rozhraní API, budeme teď muset do vykresleného return() příkazu přidat trochu kódu JSX. Tuto metodu map() použijeme k zobrazení dat z objektu posts , ve kterém jsme je uložili jako klíče. Každý příspěvek zobrazí hlavičku s "ID #" a poté klíčovou hodnotu post.id + hodnotu klíče post.title z našich JSON dat. Poté tělo zobrazuje obrázek na základě hodnoty klíče '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;

    Aplikace React zobrazující zástupná data z rozhraní API

Dodatečné zdroje

  • Last updated on