React-overzicht

Wat is React JS?

React is een opensource JavaScript-bibliotheek voor het bouwen van front-endgebruikersinterfaces. In tegenstelling tot andere JavaScript-bibliotheken die een volledig toepassingsframework bieden, is React alleen gericht op het maken van toepassingsweergaven via ingekapselde eenheden die onderdelen worden genoemd die de status behouden en UI-elementen genereren. U kunt een afzonderlijk onderdeel op een webpagina plaatsen of hiërarchieën van onderdelen nesten om een complexe gebruikersinterface te maken.

React-onderdelen worden doorgaans geschreven in JavaScript en JSX (JavaScript XML), een JavaScript-extensie die lijkt op HTML, maar heeft enkele syntaxisfuncties die het gemakkelijker maken om algemene taken uit te voeren, zoals het registreren van gebeurtenis-handlers voor UI-elementen. Een React-onderdeel implementeert de rendermethode , die de JSX retourneert die de gebruikersinterface van het onderdeel vertegenwoordigt. In een web-app wordt de JSX-code die door het onderdeel wordt geretourneerd, vertaald in html die compatibel is met de browser.

Belangrijk

In februari 2025 kondigde het React-team aan dat Create React App (CRA) is afgeschaft voor nieuwe apps. Het team raadt aan dat bestaande apps worden gemigreerd naar een framework zoals Next.js of React Router of worden gemigreerd naar een buildhulpprogramma zoals Vite, Parcel of RSBuild.

Werkt React in Windows?

Ja. Windows ondersteunt twee verschillende omgevingen voor het ontwikkelen van React-apps:

• Een React-ontwikkelomgeving installeren in Windows
• Een React-ontwikkelomgeving installeren in het Windows-subsysteem voor Linux

Wat kunt u doen met React?

Windows ondersteunt een breed scala aan scenario's voor React-ontwikkelaars, waaronder:

• Basisweb-apps: als u niet bekend bent met React en voornamelijk geïnteresseerd bent in het bouwen van een eenvoudige web-app met React, raden we u aan een React-app te maken met behulp van de vite front-endhulpprogramma's in Windows. Als u van plan bent een web-app te maken die voor productie wordt geïmplementeerd, kunt u overwegen om een React-app te maken met behulp van de vite front-endhulpprogramma's in het Windows-subsysteem voor Linux (WSL) voor betere prestaties, compatibiliteit van systeemaanroepen en afstemming tussen uw lokale ontwikkelomgeving en implementatieomgeving (dit is vaak een Linux-server).

• Single-Page Apps (SPA's):dit zijn websites die met de gebruiker communiceren door de huidige webpagina dynamisch te herschrijven met nieuwe gegevens van een server, in plaats van de standaardinstelling voor het laden van hele nieuwe pagina's in de browser. Als u een statische contentgerichte SPA-website wilt bouwen, raden we u aan Gatsby te installeren op WSL. Als u een server-rendered SPA-website met een Node.js back-end wilt bouwen, raden we u aan om Next.js te installeren op WSL. (Hoewel Next.js nu ook het serveren van statische bestanden biedt).

• Systeemeigen bureaublad-apps: React Native voor Desktop + macOS stelt u in staat systeemeigen bureaubladtoepassingen te bouwen met JavaScript die worden uitgevoerd op verschillende soorten desktop-pc's, laptops, tablets, Xbox en Mixed Reality-apparaten. Het ondersteunt zowel de Windows SDK als macOS SDK.

• Systeemeigen mobiele apps: React Native is een platformoverschrijdende manier om Android- en iOS-apps te maken met JavaScript die worden weergegeven in systeemeigen platforminterfacecode. Er zijn twee belangrijke manieren om React Native te installeren: de Expo CLI en de React Native CLI. Er is een goede vergelijking van de twee op StackOverflow. Expo heeft een client-app voor mobiele iOS- en Android-apparaten voor het uitvoeren en testen van uw apps. Zie React Native voor Android-ontwikkeling in Windows, React Native en de Expo CLI voor instructies over het ontwikkelen van een Android-app met Windows.

Installatieopties

Er zijn verschillende manieren om React te installeren, samen met een geïntegreerde toolchain die het beste past bij uw use case. Hier volgen enkele van de populairste.

• React installeren met Vite rechtstreeks in Windows
• React installeren met behulp van Vite in het Windows-subsysteem voor Linux (WSL)
• Het Next.js-framework installeren op WSL
• Het Gatsby-framework installeren op WSL
• React Native installeren voor desktopontwikkeling
• React Native installeren voor Android-ontwikkeling in Windows
• React Native installeren voor mobiele ontwikkeling op verschillende platforms)
• React installeren in de browser zonder hulpprogrammaketen: Omdat React een JavaScript-bibliotheek is die, in de meest eenvoudige vorm, slechts een verzameling tekstbestanden is, kunt u React-apps maken zonder hulpprogramma's of bibliotheken op uw computer te installeren. Misschien wilt u slechts enkele "vleugjes interactiviteit" toevoegen aan een webpagina en geen behoefte aan build tools hebben. U kunt een React-onderdeel toevoegen door alleen een gewone <script> tag toe te voegen op een HTML-pagina. Volg de 'Voeg React toe in één minuut' stappen in de React-handleiding.

React-hulpmiddelen

Hoewel het schrijven van een eenvoudig React-onderdeel in een editor voor tekst zonder opmaak een goede inleiding is tot React, is code die op deze manier wordt gegenereerd bulksgewijs, moeilijk te onderhouden en te implementeren en traag. Er zijn enkele algemene taken die productie-apps moeten uitvoeren. Deze taken worden verwerkt door andere JavaScript-frameworks die door de app als afhankelijkheid worden genomen. Deze taken omvatten:

• Compilatie : JSX is de taal die vaak wordt gebruikt voor React-apps, maar browsers kunnen deze syntaxis niet rechtstreeks verwerken. In plaats daarvan moet de code worden gecompileerd in de standaard JavaScript-syntaxis en aangepast voor verschillende browsers. Babel is een voorbeeld van een compiler die JSX ondersteunt.
• Bundeling : omdat de prestaties essentieel zijn voor moderne web-apps, is het belangrijk dat de JavaScript van een app alleen de benodigde code voor de app bevat en zo weinig mogelijk bestanden bevat. Een bundelaar, zoals webpack , voert deze taak voor u uit.
• Pakketbeheer- Pakketbeheerders maken het eenvoudig om de functionaliteit van pakketten van derden in uw app op te nemen, waaronder het bijwerken en beheren van afhankelijkheden. Veelgebruikte pakketbeheerders zijn Yarn en npm.

Samen worden de suite met frameworks waarmee u uw app kunt maken, bouwen en implementeren een hulpprogrammaketen genoemd. Een eenvoudig in te stellen ontwikkelomgeving voor reactie die gebruikmaakt van deze toolchain is Vite die een eenvoudige app met één pagina voor u genereert. De enige configuratie die vereist is voor het gebruik van Vite is Node.js.

• Voor Windows-ontwikkeling volgt u de instructies voor het installeren van Node.js op WSL of het installeren van Node.js in Windows.

React Native componentenoverzicht

De onderdelen die kunnen worden gebruikt in een React Native-app zijn onder andere:

• Kernonderdelen: onderdelen die worden ontwikkeld en ondersteund als onderdeel van het React Native-framework.
• Communityonderdelen : onderdelen die door de community worden ontwikkeld en onderhouden.
• Systeemeigen onderdelen: onderdelen die u zelf ontwerpt, met behulp van platformeigen code en registreren om toegankelijk te zijn vanuit React Native.

De React Native Directory biedt een lijst met onderdeelbibliotheken die kunnen worden gefilterd op doelplatform.

Opties voor Fullstack React-hulpprogrammaketen

React is een bibliotheek, geen framework. Hiervoor zijn mogelijk extra hulpprogramma's nodig om een complexere app te maken. Naast React kunt u overwegen om het volgende te gebruiken:

• Package Manager: Twee populaire pakketbeheerders voor React zijn npm (die deel uitmaakt van NodeJS) en yarn. Beide ondersteunen een brede bibliotheek met goed onderhouden pakketten die kunnen worden geïnstalleerd.
• React Router: een verzameling navigatieonderdelen die u kunnen helpen bij zaken zoals bladwijzers voor URL's voor uw web-app of een composable manier om te navigeren in React Native. React houdt zich alleen bezig met statusbeheer en het weergeven van die status naar de DOM, dus het maken van React-toepassingen vereist meestal het gebruik van een routeringsbibliotheek zoals React Router.
• Redux: Een voorspelbare statuscontainer die helpt bij de architectuur van gegevensstromen. Het is waarschijnlijk niet iets wat u nodig hebt totdat u meer geavanceerde React-ontwikkeling hebt. Om Dan Abramov te citeren, een van de makers van Redux: "Gebruik Redux pas als je problemen hebt met vanille React."
• Webpack: Een buildhulpprogramma waarmee u JavaScript-modules kunt compileren, ook wel modulebundel genoemd. Wanneer webpack uw toepassing verwerkt, wordt er intern een afhankelijkheidsgrafiek gebouwd die elke module die uw project nodig heeft toe wijst en een of meer bundels genereert.
• Uglify: Een JavaScript-parser, minifier, compressor en verfraaier-toolkit.
• Babel: Een JavaScript-compiler die voornamelijk wordt gebruikt om ECMAScript 2015+ code te converteren naar een achterwaarts compatibele versie van JavaScript in huidige en oudere browsers of omgevingen. Het kan ook nuttig zijn om babel-preset-env te gebruiken, zodat u de syntax-transformaties en browser polyfills niet handmatig hoeft te beheren en kunt bepalen welke internetbrowsers ondersteund moeten worden.
• ESLint: een hulpprogramma voor het identificeren en rapporteren van patronen in uw JavaScript-code waarmee u uw code consistenter kunt maken en fouten kunt voorkomen.
• Enzym: Een JavaScript-testhulpprogramma voor React waarmee u de uitvoer van uw React Components gemakkelijker kunt testen.
• Jest: Een testframework dat samenwerkt met Babel om te helpen bij het schrijven van idiomatische JavaScript-tests in React-apps.
• Mocha: Een testframework dat wordt uitgevoerd op Node.js en in de browser om u te helpen bij asynchrone tests, rapportages en het toewijzen van onopgeslagen uitzonderingen aan de juiste testcases.

React-cursussen en zelfstudies

Hier volgen enkele aanbevolen plaatsen om React te leren en voorbeeld-apps te bouwen:

• Het React-leertraject bevat online cursusmodules om u te helpen aan de slag te gaan met de basisbeginselen.
• Bouw een single-page-app (SPA) die wordt uitgevoerd in de browser (zoals deze voorbeeldweb-app waarmee agendagegevens voor een gebruiker worden opgehaald met de Microsoft Graph API)
• Een server-gerenderde app bouwen met Next.js of een door statische site gegenereerde app met Gatsby-
• Maak een gebruikersinterface (UI) voor een systeemeigen app die wordt uitgevoerd op Windows-, Android- en iOS-apparaten (bekijk deze systeemeigen Windows-appvoorbeelden of deze voorbeeldeigen app waarmee agendagegevens voor een gebruiker worden opgehaald met de Microsoft Graph API)
• Een app ontwikkelen voor Surface Duo-apparaat met twee schermen
• Een web-app of systeemeigen app maken met fluent UI React-onderdelen
• Een React-app bouwen met TypeScript

Aanvullende bronnen

• De officiële React docs biedt alle meest recente, up-to-date informatie over React
• Microsoft Edge-invoegtoepassingen voor React Developer Tools: voegt twee tabbladen toe aan uw Microsoft Edge-ontwikkelhulpprogramma's om u te helpen bij uw React-ontwikkeling: Onderdelen en Profiler.