Dela via

Översikt över React

Vad är React JS?

React är ett JavaScript-bibliotek med öppen källkod för att skapa klientdelsanvändargränssnitt. Till skillnad från andra JavaScript-bibliotek som tillhandahåller ett fullständigt programramverk fokuserar React enbart på att skapa programvyer via inkapslade enheter som kallas komponenter som underhåller tillstånd och genererar gränssnittselement. Du kan placera en enskild komponent på en webbsida eller kapsla hierarkier med komponenter för att skapa ett komplext användargränssnitt.

React-komponenter skrivs vanligtvis i JavaScript och JSX (JavaScript XML) som är ett JavaScript-tillägg som liknar HTML, men som har vissa syntaxfunktioner som gör det enklare att utföra vanliga uppgifter som att registrera händelsehanterare för gränssnittselement. En React-komponent implementerar återgivningsmetoden , som returnerar JSX som representerar komponentens användargränssnitt. I en webbapp översätts JSX-koden som returneras av komponenten till webbläsarkompatibel HTML som återges i webbläsaren.

Viktigt!

I februari 2025 meddelade React-teamet att Create React App (CRA) har blivit inaktuell för nya appar. Teamet rekommenderar att befintliga appar migreras till ett ramverk som Next.js eller React Router eller migrerar till ett byggverktyg som Vite, Parcel eller RSBuild.

Fungerar React i Windows?

Ja. Windows har stöd för två olika miljöer för utveckling av React-appar:

Vad kan du göra med React?

Windows har stöd för en mängd olika scenarier för React-utvecklare, bland annat:

Installationsalternativ

Det finns flera olika sätt att installera React tillsammans med en integrerad verktygskedja som fungerar bäst för ditt användningsfall. Här är några av de mest populära.

React-verktyg

Att skriva en enkel React-komponent i en redigeringsprogram för oformaterad text är en bra introduktion till React, men koden som genereras på det här sättet är skrymmande, svår att underhålla och distribuera och långsam. Det finns några vanliga uppgifter som produktionsappar måste utföra. Dessa uppgifter hanteras av andra JavaScript-ramverk som tas av appen som ett beroende. Dessa uppgifter omfattar:

  • Kompilering – JSX är det språk som ofta används för React-appar, men webbläsare kan inte bearbeta den här syntaxen direkt. I stället måste koden kompileras till JavaScript-standardsyntax och anpassas för olika webbläsare. Babel är ett exempel på en kompilator som stöder JSX.
  • Paketering – Eftersom prestanda är nyckeln för moderna webbappar är det viktigt att en apps JavaScript endast innehåller den kod som behövs för appen och kombineras i så få filer som möjligt. En bundler, till exempel webpack , utför den här uppgiften åt dig.
  • Pakethantering – Pakethanterare gör det enkelt att inkludera funktionerna i tredjepartspaket i din app, inklusive uppdatering av dem och hantering av beroenden. Vanliga pakethanterare är Yarn och npm.

Tillsammans kallas den uppsättning ramverk som hjälper dig att skapa, skapa och distribuera din app en verktygskedja. En lätt att konfigurera utvecklingsmiljö för react som använder den här verktygskedjan är Vite som genererar en enkel en-sides app åt dig. Den enda konfiguration som krävs för att använda Vite är Node.js.

React Native-komponentkatalog

De komponenter som kan användas i en React Native-app innehåller följande:

  • Kärnkomponenter – Komponenter som utvecklas och stöds som en del av React Native-ramverket.
  • Community-komponenter – Komponenter som utvecklas och underhålls av communityn.
  • Inbyggda komponenter – Komponenter som du skapar själv med hjälp av plattformsbaserad kod och registrerar dig för att vara tillgängliga från React Native.

React Native Directory innehåller en lista över komponentbibliotek som kan filtreras efter målplattform.

Alternativ för Fullstack React-verktygskedja

React är ett bibliotek, inte ett ramverk, så kan kräva ytterligare verktyg för att skapa en mer komplex app. Förutom att använda React kan du överväga att använda:

  • Pakethanterare: Två populära pakethanterare för React är npm (som ingår i NodeJS) och yarn. Båda stöder ett brett bibliotek med väl underhållna paket som kan installeras.
  • React Router: en samling navigeringskomponenter som kan hjälpa dig med saker som bokmärkesbara URL:er för din webbapp eller ett komposterbart sätt att navigera i React Native. React handlar egentligen bara om tillståndshantering och återgivning av tillståndet till DOM, så att skapa React-program kräver vanligtvis användning av ett routningsbibliotek som React Router.
  • Redux: En förutsägbar tillståndscontainer som hjälper till med dataflödesarkitektur. Det är förmodligen inte något du behöver förrän du kommer in i mer avancerad React-utveckling. För att citera Dan Abramov, en av medskaparna av Redux: "Använd inte Redux förrän du har problem med vanlig React."
  • Webpack: Ett byggverktyg som gör att du kan kompilera JavaScript-moduler, även kallat modulpaketerare. När webpack bearbetar ditt program skapar det internt ett beroendediagram som mappar varje modul som ditt projekt behöver och genererar ett eller flera paket.
  • Uglify: Ett verktyg för JavaScript-parsing, minifiering, komprimering och försköning.
  • Babel: En JavaScript-kompilator som främst används för att konvertera ECMAScript 2015+-kod till en bakåtkompatibel version av JavaScript i aktuella och äldre webbläsare eller miljöer. Det kan också vara bra att använda babel-preset-env så att du inte behöver mikrohantera syntaxtransformering eller webbläsarpolyfyll och definiera vilka webbläsare som ska stödjas.
  • ESLint: Ett verktyg för att identifiera och rapportera mönster som finns i din JavaScript-kod som hjälper dig att göra koden mer konsekvent och undvika buggar.
  • Enzym: Ett JavaScript-testverktyg för React som gör det enklare att testa react-komponenternas utdata.
  • Jest: Ett testramverk som fungerar tillsammans med Babel för att hjälpa till med att skriva idiomatiska JavaScript-tester i React-appar.
  • Mocha: Ett testramverk som körs på Node.js och i webbläsaren för att hjälpa till med asynkron testning, rapportering och mappning av omappade undantag till korrekta testfall.

React-kurser och självstudier

Här är några rekommenderade platser där du kan lära dig React och skapa exempelappar:

Ytterligare resurser

  • Last updated on