Reageren Aan de slag
Om React in productie te gebruiken, heb je npm nodig dat bij Node.js wordt geleverd .
Om een overzicht te krijgen van wat React is, kun je React-code rechtstreeks in HTML schrijven.
Maar om React in productie te gebruiken, moet u npm en Node.js hebben geïnstalleerd.
Reageer direct in HTML
De snelste manier om React te leren is door React direct in je HTML-bestanden te schrijven.
W3Schools-ruimten
De gemakkelijkste manier om aan de slag te gaan met het maken van HTML-bestanden is W3Schools Spaces!
Het is de perfecte plek om uw werk te maken, te bewerken en met anderen te delen!
Begin met het opnemen van drie scripts, met de eerste twee kunnen we React-code in onze JavaScripts schrijven en met de derde, Babel, kunnen we JSX-syntaxis en ES6 in oudere browsers schrijven.
U leert meer over JSX in het hoofdstuk React JSX .
Voorbeeld
Voeg drie CDN's toe aan je HTML-bestand:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Deze manier van gebruik van React kan prima zijn voor testdoeleinden, maar voor productie zal je een React-omgeving moeten opzetten .
Gecertificeerd!
$95 INSCHRIJVEN
Een React-omgeving opzetten
Als je npx en Node.js hebt geïnstalleerd, kun je een React-toepassing maken met create-react-app.
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 deze opdracht uit om een React-toepassing te maken met de naam
my-react-app:
npx create-react-app my-react-app
Het create-react-appzal alles instellen wat u nodig hebt om een React-toepassing uit te voeren.
Voer de React-toepassing uit
Nu ben je klaar om je eerste echte React-applicatie uit te voeren!
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:
De React-toepassing wijzigen
So far so good, maar hoe verander ik de inhoud?
Kijk in de my-react-appdirectory en je zult een
srcmap vinden. In de
srcmap staat een bestand met de naam
App.js, open het en het ziet er als volgt uit:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Probeer de HTML-inhoud te wijzigen en sla het bestand op.
Merk op dat de wijzigingen direct zichtbaar zijn nadat je het bestand hebt opgeslagen, je hoeft de browser niet opnieuw te laden!
Voorbeeld
Vervang alle inhoud binnen de <div className="App">door een
<h1>element.
Bekijk de wijzigingen in de browser wanneer u op Opslaan klikt.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Merk op dat we de invoer hebben verwijderd die we niet nodig hebben (logo.svg en App.css).
Het resultaat:
Wat is het volgende?
Nu heb je een React-omgeving op je computer en ben je klaar om meer te leren over React.
In de rest van deze tutorial zullen we onze "Show React" tool gebruiken om de verschillende aspecten van React uit te leggen, en hoe ze worden weergegeven in de browser.
Als u dezelfde stappen op uw computer wilt volgen, begint u met het verwijderen van de srcmap zodat deze slechts één bestand bevat: index.js. Je moet ook alle onnodige regels code in het index.js
bestand verwijderen om ze eruit te laten zien als het voorbeeld in de tool "Show React" hieronder:
Voorbeeld
Klik op de knop "Voorbeeld uitvoeren" om het resultaat te zien.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));