Megosztás:

Oktatóanyag: React on Windows for kezdőknek

Ha teljesen új a React használata, ez az útmutató segít az alapismeretek megismerésében.

Előfeltételek

Néhány alapvető kifejezés és fogalom

A React egy JavaScript-kódtár felhasználói felületek létrehozásához.

  • Nyílt forráskódú , ami azt jelenti, hogy hibajegyek vagy pull requestek benyújtásával járulhat hozzá. (Csakúgy, mint ezek a dokumentumok!)

  • Ez deklaratív, ami azt jelenti, hogy megírja a kívánt kódot, és a React végrehajtja a deklarált kódot, és végrehajtja az összes JavaScript/DOM lépést a kívánt eredmény eléréséhez.

  • Ez összetevőalapú, ami azt jelenti, hogy az alkalmazások előregyártott és újrafelhasználható független kódmodulokkal jönnek létre, amelyek saját állapotukat kezelik, és a React-keretrendszer használatával összefűzhetők, lehetővé téve az adatok továbbítását az alkalmazáson keresztül, miközben az állapotot távol tartják a DOM-ból.

  • A React mottója: "Learn once, write anywhere". A cél az, hogy kód újra felhasználja, és ne feltételezi, hogyan fogja használni a React felhasználói felületét más technológiákkal, hanem az összetevők újrafelhasználhatóvá tétele a meglévő kód újraírása nélkül.

  • A JSX egy szintaxiskiterjesztés a Reacthez írt JavaScripthez, amely HTML-nek tűnik, de valójában egy JavaScript-fájl, amelyet le kell fordítani, vagy lefordítani normál JavaScriptre.

  • Virtuális DOM: A DOM a Document Object Model (Dokumentumobjektum-modell) és az alkalmazás felhasználói felületét jelöli. Minden alkalommal, amikor az alkalmazás felhasználói felületének állapota megváltozik, a DOM frissül, hogy a módosítást képviselje. Amikor a DOM gyakran frissül, a teljesítmény lassú lesz. A virtuális DOM csak a DOM vizuális ábrázolása, így amikor az alkalmazás állapota megváltozik, a virtuális DOM frissül a valós DOM helyett, csökkentve ezzel a teljesítményköltséget. Ez egy DOM-objektum ábrázolása , például egy egyszerűsített másolat.

  • nézetek: azok, amelyeket a felhasználó a böngészőben lát megjelenítve. A Reactben a nézet azokat az elemeket jeleníti meg, amelyeket a felhasználó a képernyőn szeretne megjeleníteni.

  • Állapot: a különböző nézetek által tárolt adatokra vonatkozik. Az állapot általában attól függ, hogy ki a felhasználó, és mit csinál a felhasználó. A webhelyre való bejelentkezés például megjelenítheti a felhasználói profilját (nézetét) az Ön nevével (állapotával). Az állapotadatok a felhasználótól függően változnak, de a nézet változatlan marad. Az állapot a felhasználói interaktivitás nagy részének az alkalmazással való elérésére szolgál.

  • Összetevő-kellékek: a szülőösszetevők úgy adhatnak át bizonyos információkat értékként vagy adatként (beleértve az objektumokat, tömböket és függvényeket) a gyermekösszetevőknek. A propsok írásvédettek, és a gyermekkomponens nem frissítheti azokat.

Próbálja meg használni a Reactt a Visual Studio Code-ban

Számos módon hozhat létre alkalmazásokat a React használatával (példákért tekintse meg a React áttekintését ). Ez az oktatóanyag bemutatja, hogyan használhatja a vite-ot egy működő React-alkalmazás beállításának gyors továbbítására, hogy láthassa, hogy fut, és a kóddal való kísérletezésre összpontosítson, még nem a buildelési eszközökkel kapcsolatban.

  1. Új projekt létrehozásához használja a Vite-et Windows vagy WSL rendszeren (lásd a fenti előfeltételeket): npm create vite@latest hello-world -- --template react

  2. Módosítsa a könyvtárakat úgy, hogy az új alkalmazás mappájában legyen: cd hello-worldtelepítse a függőségeket, npm install majd indítsa el a helyi fejlesztési kiszolgálót: npm run dev

    Az új React Hello World-alkalmazás lefordítja és megnyitja az alapértelmezett webböngészőt, hogy bemutassa, hogy fut.http://localhost:5173

  3. Állítsa le a React-alkalmazás (Ctrl+c) futtatását, és nyissa meg a kódfájlokat a VS Code-ban a következő beírással: code .

  4. Keresse meg az src/App.jsx fájlt, és keresse meg az olvasható fejlécszakaszt:

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

    Módosítsa a következő szövegre:

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

  5. Nyissa meg a terminálablakot, és indítsa el a helyi fejlesztőkiszolgálót: npm run dev vagy használhatja az integrált VS Code terminált (Ctrl + '), és onnan indíthatja el a fejlesztési kiszolgálót.

    Képernyőkép a HelloWorld React alkalmazásról a böngészőben

A React-alkalmazás fejlesztése során folyamatosan futtathatja a helyi fejlesztőkiszolgálót, és az összes módosítás azonnal megjelenik http://localhost:5173 a böngészőben.

Alkalmazásfájl-struktúra

A kezdeti fájlstruktúra a következőképpen néz ki:

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

Először is ezek a fontos fájlok és mappák, amelyeket ismernie kell.

index.html az a fájl, amelybe a Vite a kódot a src mappából injektálja, hogy a böngésző futtathassa. Ezt a fájlt csak a React-alkalmazás címének módosítása után lehet szerkeszteni.

A src Mappában található a React-alkalmazás forráskódja. Itt hozhatja létre egyéni összetevőit, CSS-fájljait és más kódfájljait, amelyekre szüksége van az alkalmazás létrehozásához. Ezeket a fájlokat a Vite buildelési eszközei dolgozzák fel, hogy elemezni és felépíteni őket a végső React-projekt létrehozásához.

A public mappa tartalmazza az összes statikus fájlt, amelyet közvetlenül a böngészőben fog kiszolgálni. Ezeket a fájlokat a Vite nem dolgozza fel.

Próbálja meg a React api-val való használatát

Ugyanazt a Hello World! React alkalmazással készült és a Visual Studio Code-dal frissített alkalmazáshoz adjunk hozzá egy API-hívást, hogy megjeleníthessünk néhány adatot.

  1. Kezdjük újra. Eltávolítjuk a Vite által biztosított összes sablonkódot, és csak a kódunkat tartjuk meg az előző lépésben.

    Az App.jsx fájlnak így kell kinéznie:

    import "./App.css";

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

export default App;

    Képernyőkép az egyszerűsített HelloWorld React alkalmazásról a böngészőben

  2. Ezután állítsunk be egy helyi állapotot, ahol adatokat menthetünk egy API-ból. Az állapot az, ahol a nézetben használandó adatokat tárolhatjuk.

    Helyi állapot hozzáadásához először importálni kell a useState React Hookot, amely lehetővé teszi az állapotváltozó hozzáadását az összetevőhöz.

    A helyi állapotot is szükséges inicializálni. A useState függvény két értékből álló tömböt ad vissza, az aktuális állapotot és egy függvényt set . Az aktuális állapotunkat posts-nak nevezzük, amelyet üres tömbként inicializálunk, és később az API-ból származó adatokkal tölthetünk fel a setPosts függvény használatával.

    Az App.jsx fájlnak így kell kinéznie:

    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. Ha olyan API-t szeretne meghívni, amely adatokat használ a React-alkalmazásunkban, a .fetch JavaScript metódust fogjuk használni. A meghívni kívánt API a JSONPlaceholder, egy ingyenes, teszteléshez és prototípus-készítéshez használható API, amely JSON formátumban szolgáltatja a hamis helyőrző adatokat.

    A useEffect React Hook használatával frissítjük az posts állapotot a beállított függvény használatával.

    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. Nézzük meg, milyen adatokat mentett az API az állapotunkban posts . Az alábbiakban a hamis JSON API-fájl tartalma látható. Láthatjuk, hogy az adatok formátuma a következő kategóriákban szerepel: "albumId", "id", "title", "url" és "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. Az API-adatok megjelenítéséhez most hozzá kell adnunk egy kis JSX-kódot a renderelt return() utasításba. A map() metódus használatával jelenítjük meg az adatokat az posts objektumban, amelyben kulcsként tároltuk őket. Minden bejegyzésben megjelenik egy "ID #" fejléc, majd a JSON-adatokból származó post.id kulcsérték + post.title kulcs értéke. Ezt követi a miniatűrUrl kulcsérték alapján a képet megjelenítő törzs.

    // 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;

    React-alkalmazás helyőrző adatokat jelenít meg egy API-

További erőforrások

  • Last updated on