Wat is Reageren?
React is een JavaScript- bibliotheek gemaakt door Facebook
React is een gebruikersinterface (UI) bibliotheek
React is een tool voor het bouwen van UI-componenten
Reageren Quickstart-zelfstudie
Dit is een snelstarthandleiding.
Voordat u begint, moet u een basiskennis hebben van:
Voor een volledige tutorial:
Start Reageren Tutorial ❯Reageren op een HTML-pagina
Deze quickstart-tutorial voegt React toe aan een pagina zoals deze:
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Wat is Babel?
Babel is een JavaScript-compiler die opmaaktalen of programmeertalen kan vertalen naar JavaScript.
Met Babel kunt u de nieuwste functies van JavaScript gebruiken (ES6 - ECMAScript 2015).
Babel is beschikbaar voor verschillende conversies. React gebruikt Babel om JSX om te zetten in JavaScript.
Houd er rekening mee dat <script type="text/babel"> nodig is om Babel te gebruiken.
Wat is JSX?
JSX staat voor Java S cript X ML .
JSX is een XML/HTML-achtige extensie voor JavaScript.
Voorbeeld
const element = <h1>Hello World!</h1>
Zoals je hierboven kunt zien, is JSX geen JavaScript of HTML.
JSX is een XML-syntaxisextensie voor JavaScript die ook wordt geleverd met de volledige kracht van ES6 (ECMAScript 2015).
Net als HTML kunnen JSX-tags tagnamen, attributen en kinderen hebben. Als een attribuut tussen accolades staat, is de waarde een JavaScript-expressie.
Merk op dat JSX geen aanhalingstekens rond de HTML-tekststring gebruikt.
Reageren DOM Render
De methode ReactDom.render() wordt gebruikt om HTML-elementen te renderen (weer te geven):
Voorbeeld
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX-expressies
Expressies kunnen in JSX worden gebruikt door ze tussen gekrulde {} accolades te plaatsen.
Voorbeeld
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Reageer elementen
React-applicaties zijn meestal gebouwd rond een enkel HTML-element .
React-ontwikkelaars noemen dit vaak het rootknooppunt (rootelement):
<div id="root"></div>
Reageerelementen zien er als volgt uit:
const element = <h1>Hello React!</h1>
Elementen worden gerenderd (weergegeven) met de ReactDOM.render() methode:
ReactDOM.render(element, document.getElementById('root'));
Reageerelementen zijn onveranderlijk . Ze kunnen niet worden gewijzigd.
De enige manier om een React-element te wijzigen, is door elke keer een nieuw element te renderen:
Voorbeeld
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Reageer componenten
React-componenten zijn JavaScript-functies.
In dit voorbeeld wordt een React - component gemaakt met de naam "Welkom":
Voorbeeld
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React kan ook ES6-klassen gebruiken om componenten te maken.
In dit voorbeeld wordt een React-component met de naam Welcome gemaakt met een rendermethode :
Voorbeeld
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Eigenschappen van reactiecomponenten
In dit voorbeeld wordt een React - component met de naam "Welkom" gemaakt met eigenschapargumenten:
Voorbeeld
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React kan ook ES6-klassen gebruiken om componenten te maken.
In dit voorbeeld wordt ook een React-component gemaakt met de naam "Welkom" met eigenschapargumenten:
Voorbeeld
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSX-compiler
De voorbeelden op deze pagina compileren JSX in de browser.
Voor productiecode moet de compilatie afzonderlijk worden gedaan.
Reageer-toepassing maken
Facebook heeft een Create React-applicatie gemaakt met alles wat je nodig hebt om een React-app te bouwen.
Het is een ontwikkelserver die Webpack gebruikt om React-, JSX- en ES6-, auto-prefix CSS-bestanden te compileren.
De Create React App gebruikt ESLint om te testen en te waarschuwen voor fouten in de code.
Om een Create React-app te maken, voert u de volgende code uit op uw terminal:
Voorbeeld
npx create-react-app react-tutorial
Zorg ervoor dat je Node.js 5.2 of hoger hebt. Anders moet je npx installeren:
Voorbeeld
npm i npx
Start een map omhoog van waar u wilt dat uw toepassing blijft:
Voorbeeld
C:\Users\myUser>npx create-react-app react-tutorial
Succes resultaat:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start