Reagieren Sie auf Erste Schritte
Um React in der Produktion zu verwenden, benötigen Sie npm, das in Node.js enthalten ist .
Um sich einen Überblick darüber zu verschaffen, was React ist, können Sie React-Code direkt in HTML schreiben.
Aber um React in der Produktion zu verwenden, müssen Sie npm und Node.js installiert haben.
Reagieren Sie direkt in HTML
Der schnellste Weg, mit dem Erlernen von React zu beginnen, besteht darin, React direkt in Ihre HTML-Dateien zu schreiben.
W3Schulräume
Der einfachste Einstieg in die Erstellung von HTML-Dateien ist W3Schools Spaces!
Es ist der perfekte Ort, um Ihre Arbeit zu erstellen, zu bearbeiten und mit anderen zu teilen!
Beginnen Sie mit drei Skripten, die ersten beiden lassen uns React-Code in unsere JavaScripts schreiben, und das dritte, Babel, ermöglicht es uns, JSX-Syntax und ES6 in älteren Browsern zu schreiben.
Mehr über JSX erfahren Sie im Kapitel React JSX .
Beispiel
Fügen Sie drei CDNs in Ihre HTML-Datei ein:
<!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>
Diese Art der Verwendung von React kann für Testzwecke in Ordnung sein, aber für die Produktion müssen Sie eine React-Umgebung einrichten .
Zertifiziert werden!
$ 95 REGISTRIEREN
Einrichten einer Reaktionsumgebung
Wenn Sie npx und Node.js installiert haben, können Sie eine React-Anwendung erstellen, indem Sie create-react-app.
Wenn Sie zuvor create-react-appglobal installiert haben, wird empfohlen, das Paket zu deinstallieren, um sicherzustellen, dass npx immer die neueste Version von create-react-app.
Führen Sie zum Deinstallieren diesen Befehl aus: npm uninstall -g create-react-app.
Führen Sie diesen Befehl aus, um eine React-Anwendung mit dem Namen zu erstellen
my-react-app:
npx create-react-app my-react-app
Das create-react-apprichtet alles ein, was Sie zum Ausführen einer React-Anwendung benötigen.
Führen Sie die React-Anwendung aus
Jetzt können Sie Ihre erste echte React-Anwendung ausführen!
Führen Sie diesen Befehl aus, um in das my-react-appVerzeichnis zu wechseln:
cd my-react-app
Führen Sie diesen Befehl aus, um die React-Anwendung auszuführen
my-react-app:
npm start
Ein neues Browserfenster mit Ihrer neu erstellten React-App wird angezeigt! Wenn nicht, öffnen Sie Ihren Browser und geben Sie
localhost:3000in die Adressleiste ein.
Das Ergebnis:
Ändern Sie die React-Anwendung
So weit so gut, aber wie ändere ich den Inhalt?
Schauen Sie in das my-react-appVerzeichnis, und Sie werden einen
srcOrdner finden. In dem
srcOrdner befindet sich eine Datei namens
App.js, öffnen Sie sie und sie sieht so aus:
/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;Versuchen Sie, den HTML-Inhalt zu ändern, und speichern Sie die Datei.
Beachten Sie, dass die Änderungen sofort nach dem Speichern der Datei sichtbar sind, Sie müssen den Browser nicht neu laden!
Beispiel
Ersetzen Sie den gesamten Inhalt innerhalb von <div className="App">durch ein
<h1>Element.
Sehen Sie sich die Änderungen im Browser an, wenn Sie auf Speichern klicken.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Beachten Sie, dass wir die nicht benötigten Importe entfernt haben (logo.svg und App.css).
Das Ergebnis:
Was kommt als nächstes?
Jetzt haben Sie eine React-Umgebung auf Ihrem Computer und sind bereit, mehr über React zu erfahren.
Im Rest dieses Tutorials verwenden wir unser "Show React"-Tool, um die verschiedenen Aspekte von React zu erklären und wie sie im Browser angezeigt werden.
Wenn Sie die gleichen Schritte auf Ihrem Computer ausführen möchten, beginnen Sie damit, den srcOrdner so zu verkleinern, dass er nur noch eine Datei enthält: index.js. Sie sollten auch alle unnötigen Codezeilen in der index.js
Datei entfernen, damit sie wie im Beispiel im unten stehenden "Show React"-Tool aussehen:
Beispiel
Klicken Sie auf die Schaltfläche „Beispiel ausführen“, um das Ergebnis anzuzeigen.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));