Reageren Tutorial

❮ Huis Volgende ❯

[+:

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

React wordt gebruikt om applicaties met één pagina te bouwen.

Met React kunnen we herbruikbare UI-componenten maken.

Begin met leren Reageer nu ❯

Leren door voorbeelden

Onze tool "Show React" maakt het eenvoudig om React te demonstreren. Het toont zowel de code als het resultaat.

Voorbeeld:

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Hello World!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));

Leren door oefeningen

Reageer Quiz

Test je React-vaardigheden met een quiz.

Reageer Quiz

React-app maken

Om React te leren en te testen, moet je een React-omgeving op je computer instellen.

Deze tutorial gebruikt de create-react-app.

De create-react-apptool is een officieel ondersteunde manier om React-applicaties te maken.

Node.js is vereist om create-react-app.

Open uw terminal in de map waarin u uw toepassing wilt maken.

Voer deze opdracht uit om een React-toepassing te maken met de naam my-react-app:

npx create-react-app my-react-app

create-react-app zal alles instellen wat je nodig hebt om een React-toepassing uit te voeren.

Opmerking: als u eerder create-react-appwereldwijd hebt geïnstalleerd, wordt aanbevolen dat u het pakket verwijdert om ervoor te zorgen dat npx altijd de nieuwste versie van create-react-app. Voer deze opdracht uit om te verwijderen: npm uninstall -g create-react-app.

Voer de React-toepassing uit

Voer deze opdracht uit om naar de my-react-appmap te gaan:

cd my-react-app

Voer deze opdracht uit om de React-toepassing uit te voeren my-react-app:

npm start

Er verschijnt een nieuw browservenster met je nieuw gemaakte React-app! Zo niet, open dan uw browser en typ localhost:3000in de adresbalk.

Het resultaat:

U leert meer over de create-react-appin het hoofdstuk Reageren Aan de slag .

Wat u al moet weten

Voordat u met React.JS begint, moet u enige ervaring hebben met:

HTML
CSS
JavaScript

Je moet ook enige ervaring hebben met de nieuwe JavaScript-functies die zijn geïntroduceerd in ECMAScript 6 (ES6), je zult er meer over leren in het hoofdstuk React ES6 .

❮ Huis Volgende ❯