Delen via

Zelfstudie: React on Windows voor beginners

Als u nog niet eerder React gebruikt, helpt deze handleiding u om aan de slag te gaan met een aantal basisbeginselen.

Vereiste voorwaarden

Enkele basistermen en -concepten

React is een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces.

  • Het is opensource, wat betekent dat u hieraan kunt bijdragen door problemen of pull-aanvragen in te dienen. (net als deze documenten!)

  • Het is declaratief, wat betekent dat u de gewenste code schrijft en React die gedeclareerde code uitvoert en alle JavaScript/DOM-stappen uitvoert om het gewenste resultaat te krijgen.

  • Het is op componenten gebaseerde, wat betekent dat toepassingen worden gemaakt met behulp van geprefabriceerde en herbruikbare onafhankelijke codemodules die hun eigen toestand beheren en die kunnen worden gecombineerd met behulp van het React-framework, waardoor je gegevens kunt doorgeven via je app terwijl de toestand buiten de DOM blijft.

  • Het React-motto is 'Learn once, write anywhere'. De bedoeling is om code opnieuw te gebruiken en niet aan te geven hoe u React UI met andere technologieën gaat gebruiken, maar om onderdelen herbruikbaar te maken zonder bestaande code te hoeven herschrijven.

  • JSX- is een syntaxisextensie voor JavaScript geschreven voor gebruik met React. Het lijkt op HTML, maar het is eigenlijk een JavaScript-bestand dat moet worden gecompileerd of vertaald naar reguliere JavaScript.

  • Virtual DOM: DOM staat voor Document Object Model en vertegenwoordigt de gebruikersinterface van uw app. Telkens wanneer de status van de gebruikersinterface van uw app wordt gewijzigd, wordt de DOM bijgewerkt om de wijziging weer te geven. Wanneer een DOM regelmatig wordt bijgewerkt, worden de prestaties traag. Een virtuele DOM is slechts een visuele weergave van de DOM, dus wanneer de status van de app verandert, wordt de virtuele DOM bijgewerkt in plaats van de echte DOM, waardoor de prestatiekosten worden verminderd. Het is een weergave van een DOM-object, zoals een lichtgewicht kopie.

  • Weergaven: zijn wat de gebruiker in de browser ziet weergegeven. In React heeft de weergave betrekking op het concept van renderingelementen die een gebruiker op het scherm moet zien.

  • Status: verwijst naar de gegevens die zijn opgeslagen door verschillende weergaven. De status is doorgaans afhankelijk van wie de gebruiker is en wat de gebruiker doet. Als u zich bijvoorbeeld aanmeldt bij een website, kan uw gebruikersprofiel (weergave) met uw naam (status) worden weergegeven. De statusgegevens worden gewijzigd op basis van de gebruiker, maar de weergave blijft hetzelfde. De status wordt gebruikt om de meeste interactiviteit van de gebruiker met de toepassing te bereiken.

  • Component Props: is een manier voor het bovenliggende onderdeel om bepaalde informatie door te geven als een waarde of gegevens (inclusief objecten, matrices en functies) aan de onderliggende onderdelen. Props zijn alleen-lezen en kunnen niet worden bijgewerkt door het onderliggende onderdeel.

React gebruiken in Visual Studio Code

Er zijn veel manieren om een toepassing te maken met React (zie het React-overzicht voor voorbeelden). In deze zelfstudie wordt uitgelegd hoe u vite kunt gebruiken om de set voor een werkende React-app snel door te sturen, zodat u de app kunt uitvoeren en zich kunt richten op experimenteren met de code, nog niet met de buildhulpprogramma's.

  1. Gebruik vite in Windows of WSL (zie de bovenstaande vereisten) om een nieuw project te maken: npm create vite@latest hello-world -- --template react

  2. Wijzig mappen zodat u zich in de map voor uw nieuwe app bevindt: cd hello-world, installeer de afhankelijkheden: npm install en start vervolgens de lokale ontwikkelserver: npm run dev

    Uw nieuwe React Hello World-app zal compileren en uw standaardwebbrowser openen om te laten zien dat het draait op http://localhost:5173.

  3. Stop met het uitvoeren van uw React-app (Ctrl+c) en open de codebestanden in VS Code door het volgende in te voeren: code .

  4. Zoek het bestand src/App.jsx en vind de sectie met de koptekst.

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

    Pas dit aan zodat het luidt:

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

  5. Open het terminalvenster en start uw lokale ontwikkelserver: npm run dev of u kunt de geïntegreerde VS Code-terminal (Ctrl + ') gebruiken en uw ontwikkelserver daar starten.

    Schermopname van de HelloWorld React-app in de browser

Tijdens de ontwikkeling van uw React-app kunt u uw lokale ontwikkelserver actief houden en worden alle wijzigingen onmiddellijk weergegeven http://localhost:5173 in uw browser.

Structuur van toepassingsbestanden

De oorspronkelijke bestandsstructuur ziet er als volgt uit

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

Om te beginnen zijn dit de belangrijke bestanden en mappen die u moet weten.

index.html is het bestand waarin Vite uw code uit src de map injecteert om deze uit te voeren in uw browser. Dit bestand mag niet worden bewerkt, behalve om de titel van uw React-toepassing te wijzigen.

De src map is waar de broncode van uw React-toepassing zich bevindt. Dit is de plaats waar u uw aangepaste onderdelen, CSS-bestanden en andere codebestanden maakt die u nodig hebt om uw toepassing te bouwen. Deze bestanden worden verwerkt door de buildhulpprogramma's van Vite om ze te parseren en te bouwen om uw uiteindelijke React-project te maken.

De public map bevat al uw statische bestanden die rechtstreeks in uw browser worden aangeboden. Deze bestanden worden niet verwerkt door Vite.

React gebruiken met een API

Dezelfde Hello World gebruiken! app die u hebt gemaakt met React en bijgewerkt met Visual Studio Code, gaan we proberen een API-aanroep toe te voegen om enkele gegevens weer te geven.

  1. Laten we opnieuw beginnen. We verwijderen bijna alle standaardcode van Vite en bewaren alleen onze code uit de vorige stap.

    Uw App.jsx-bestand moet er nu als volgt uitzien:

    import "./App.css";

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

export default App;

    Schermopname van vereenvoudigde HelloWorld React-app in browser

  2. Vervolgens gaan we een lokale status instellen waarin we gegevens uit een API kunnen opslaan. Een status is waar we gegevens kunnen opslaan die in de weergave moeten worden gebruikt.

    Als u een lokale status wilt toevoegen, moeten we eerst de useState React Hook importeren waarmee u statusvariabele aan uw onderdeel kunt toevoegen.

    We moeten ook de lokale status initialiseren. De useState functie retourneert een matrix van twee waarden, de huidige status en een set functie. We noemen onze huidige status als posts geïnitialiseerd als een lege matrix die we later vanuit onze API kunnen doorvoeren met behulp van de setPosts functie.

    Uw App.jsx-bestand moet er nu als volgt uitzien:

    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. Om een API aan te roepen met gegevens die we kunnen gebruiken in onze React-app, gebruiken we de JavaScript-methode .fetch. De API die we gaan aanroepen, is JSONPlaceholder, een gratis API voor testen en prototypen die nepgegevens als tijdelijke aanduiding in JSON-indeling aanbiedt.

    We gebruiken de useEffect React Hook om de posts status bij te werken met behulp van de setfunctie.

    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. Laten we eens kijken naar wat voor soort gegevens de API heeft opgeslagen in onze posts status. Hieronder vindt u een deel van de inhoud van het nep-JSON API-bestand. We kunnen zien in welke indeling de gegevens worden vermeld, met behulp van de categorieën: 'albumId', 'id', 'title', 'URL' en '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. Om de API-gegevens weer te geven, moeten we nu een beetje JSX-code toevoegen in de gerenderde return() instructie. We gebruiken de map() methode om onze gegevens weer te geven van het posts object waarin we het als sleutels hebben opgeslagen. Elk bericht geeft een koptekst weer met 'ID #' en vervolgens de post.id sleutelwaarde + post.title-sleutelwaarde uit onze JSON-gegevens. Gevolgd door de hoofdtekst die de afbeelding weergeeft op basis van de sleutelwaarde 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;

    React-app die tijdelijke aanduidingsgegevens van een API weergeeft

Aanvullende bronnen

  • Last updated on