Dela via

Självstudie: React på Windows för nybörjare

Om du är helt ny på att använda React hjälper den här guiden dig att komma igång med några grunderna.

Förutsättningar

Några grundläggande termer och begrepp

React är ett JavaScript-bibliotek för att skapa användargränssnitt.

  • Det är öppen källkod, vilket innebär att du kan bidra till det genom att lämna in problem eller pull-begäranden. (precis som dessa dokument!)

  • Det är deklarativt, vilket innebär att du skriver den kod som du vill ha och React tar den deklarerade koden och utför alla JavaScript/DOM-steg för att få önskat resultat.

  • Det är komponentbaserat, vilket innebär att program skapas med hjälp av prefabricerade och återanvändbara oberoende kodmoduler som hanterar sitt eget tillstånd och kan limmas ihop med hjälp av React-ramverket, vilket gör det möjligt att skicka data genom din app samtidigt som tillståndet hålls borta från DOM.

  • React-mottot är "Lär dig en gång, skriv var som helst". Avsikten är att återanvända kod och inte göra antaganden om hur du ska använda React-användargränssnittet med andra tekniker, utan att göra komponenter återanvändbara utan att behöva skriva om befintlig kod.

  • JSX är ett syntaxtillägg för JavaScript som skrivs för att användas med React som ser ut som HTML, men som faktiskt är en JavaScript-fil som måste kompileras eller översättas till vanlig JavaScript.

  • Virtuell DOM: DOM står för Dokumentobjektmodell och representerar appens användargränssnitt. Varje gång tillståndet för appens användargränssnitt ändras uppdateras DOM för att representera ändringen. När en DOM uppdateras ofta blir prestandan långsam. En virtuell DOM är bara en visuell representation av DOM, så när appens tillstånd ändras uppdateras den virtuella DOM i stället för den verkliga DOM, vilket minskar prestandakostnaden. Det är en representation av ett DOM-objekt, som en lättviktskopia.

  • Vyer: är det som användaren ser renderat i webbläsaren. I React är vyn relaterad till begreppet renderingselement som du vill att en användare ska se på skärmen.

  • State: hänvisar till data som lagras av olika vyer. Tillståndet förlitar sig vanligtvis på vem användaren är och vad användaren gör. Till exempel kan inloggning på en webbplats visa din användarprofil (vy) med ditt namn (tillstånd). Tillståndsdata ändras baserat på användaren, men vyn förblir densamma. Tillståndet används för att uppnå det mesta av användarinteraktiviteten med programmet.

  • Komponentrekvisita: är ett sätt för den överordnade komponenten att skicka viss information som ett värde eller data (inklusive objekt, matriser och funktioner) till dess underordnade komponenter. Props är endast läsbara och kan inte uppdateras av den underordnade komponenten.

Prova att använda React i Visual Studio Code

Det finns många sätt att skapa ett program med React (se React-översikten för exempel). I den här handledningen går vi igenom hur du använder vite för att snabbt sätta upp en fungerande React-app så att du kan se att den körs och fokusera på att experimentera med koden, utan att än behöva oroa dig för byggverktygen.

  1. Använd vite i Windows eller WSL (se kraven ovan) för att skapa ett nytt projekt: npm create vite@latest hello-world -- --template react

  2. Ändra kataloger så att du är i mappen för din nya app: cd hello-world, installera beroendena: npm install och starta sedan din lokala utvecklingsserver: npm run dev

    Din nya React Hello World-app kompilerar och öppnar standardwebbläsaren för att visa att den körs på http://localhost:5173.

  3. Sluta köra React-appen (Ctrl+c) och öppna kodfilerna i VS Code genom att ange: code .

  4. Leta upp filen src/App.jsx och leta reda på rubrikavsnittet som lyder:

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

    Ändra den till att läsa:

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

  5. Öppna terminalfönstret och starta den lokala utvecklingsservern: npm run dev eller så kan du använda den integrerade VS Code-terminalen (Ctrl + ) och starta utvecklingsservern därifrån.

    Skärmbild av HelloWorld React-appen i webbläsaren

Under utvecklingen av react-appen kan du hålla den lokala utvecklingsservern igång och alla ändringar återges http://localhost:5173 omedelbart i webbläsaren.

Programfilstruktur

Den inledande filstrukturen ser ut som

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

Till att börja med är dessa viktiga filer och mappar som du behöver känna till.

index.html är filen där Vite matar in koden från src mappen så att webbläsaren kan köra den. Den här filen bör inte redigeras förutom att ändra rubriken för ditt React-program.

Mappen src är den där källkoden för ditt React-program finns. Det här är den plats där du skapar dina anpassade komponenter, CSS-filer och andra kodfiler som du behöver för att skapa ditt program. Dessa filer bearbetas av Vites byggverktyg för att parsa och skapa dem för att skapa ditt slutliga React-projekt.

Mappen public innehåller alla dina statiska filer som ska levereras direkt till din webbläsare. Dessa filer bearbetas inte av Vite.

Prova att använda React med ett API

Använda samma Hello World! app som du har skapat med React och uppdaterat med Visual Studio Code ska vi prova att lägga till ett API-anrop för att visa vissa data.

  1. Låt oss börja om på nytt. Vi tar bort nästan all boilerplate-kod som tillhandahålls av Vite och behåller endast vår kod från föregående steg.

    Din App.jsx-fil bör nu se ut så här:

    import "./App.css";

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

export default App;

    Skärmbild av förenklad HelloWorld React-app i webbläsaren

  2. Nu ska vi ange ett lokalt tillstånd där vi kan spara data från ett API. En state är där vi kan lagra data för användning i vyn.

    För att lägga till ett lokalt tillstånd måste vi först importera useState React Hook som gör att du kan lägga till tillståndsvariabeln i komponenten.

    Vi måste också initiera den lokala statusen. useState Returnerar en matris med två värden, aktuellt tillstånd och en set funktion. Vi anropar vårt aktuella tillstånd som posts initierat som en tom matris som vi kan fylla med postdata senare från vårt API med hjälp av setPosts funktionen.

    Din App.jsx-fil bör nu se ut så här:

    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. För att anropa ett API med data som vi kan använda i vår React-app använder vi .fetch JavaScript-metoden. API:et som vi anropar är JSONPlaceholder, ett kostnadsfritt API för testning och prototyper som hanterar falska platshållardata i JSON-format.

    Vi använder useEffect React Hook för att uppdatera posts tillståndet med hjälp av set-funktionen.

    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. Låt oss ta en titt på vilken typ av data som API:et har sparat i vårt posts state. Nedan visas en del av innehållet i den falska JSON API-filen. Vi kan se formatet som data visas i, med hjälp av kategorierna: "albumId", "id", "title", "url" och "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. För att visa API-data måste vi nu lägga till lite JSX-kod i den renderade return() instruktionen. Vi använder map() metoden för att visa våra data från objektet posts som vi lagrade dem i som nycklar. Varje inlägg visar en rubrik med "ID #" och sedan post.id nyckelvärde + post.title-nyckelvärde från våra JSON-data. Följt av brödtexten som visar bilden baserat på miniatyrvärdetUrl-nyckel.

    // 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-appen visar platshållardata från ett API

Ytterligare resurser

  • Last updated on