React-Installation (NPM)

Bevor Sie beginnen, stellen Sie sicher, dass Node.js und npm installiert sind. Mit den folgenden Befehlen können Sie prüfen, ob sie installiert sind:

node -v
npm -v

Wenn Ihr System Node.js und NPM noch nicht unterstützt, lesen Sie unserNode.js-Tutorial。

Wir empfehlen, das CommonJS-Modulsystem in React zu verwenden, z. B. browserify oder webpack. Dieses Tutorial verwendet webpack.

Die Verwendung von npm in China ist sehr langsam. Sie können Taobaos angepasstes cnpm-Kommandozeilenwerkzeug (mit gzip-Komprimierungsunterstützung) anstelle des Standard-npm verwenden:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

Dann können Sie den Befehl cnpm verwenden, um Module zu installieren:

$ cnpm install [name]

Weitere Informationen finden Sie unter:http://npm.taobao.org/。

Verwenden Sie create-react-app, um schnell eine React-Entwicklungsumgebung aufzubauen

React bietet ein offizielles Tool, Create React App, um React-Projekte schnell einzurichten.

create-react-app stammt von Facebook. Mit diesem Befehl können wir schnell eine React-Entwicklungsumgebung ohne Konfiguration aufbauen.

Das von create-react-app automatisch erstellte Projekt basiert auf Webpack + ES6.

Führen Sie den folgenden Befehl aus, um ein Projekt zu erstellen:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

Sie können auch dennpxBefehl verwenden, um es zu erstellen. npx ist ein in npm 5.2.0 und später enthaltenes Tool, das zum Ausführen lokaler oder entfernter npm-Pakete verwendet wird:

npx create-react-app my-app

Öffnen Sie im Browserhttp://localhost:3000/, das Ergebnis wird in der folgenden Abbildung angezeigt:

Die Projektverzeichnisstruktur sieht wie folgt aus:

my-first-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (oder  package-lock.json)

Verzeichnis- und Dateibeschreibung

node_modules/

Speichert alle Abhängigkeitspakete des Projekts. Dieses Verzeichnis wird automatisch von npm oder yarn generiert und enthält alle Bibliotheken und Module von Drittanbietern, die für die Ausführung des Projekts erforderlich sind.

public/

Speichert statische Dateien. Webpack wird die Dateien in diesem Verzeichnis nicht verarbeiten.publicDie Dateien in diesem Verzeichnis werden direkt in das Build-Verzeichnis kopiert.

  • favicon.ico: Das kleine Symbol auf der Browser-Registerkarte.
  • index.html: HTML-Vorlagendatei. React-Komponenten werden an dasdivElement in dieser Datei eingebunden.
  • logo192.pngundlogo512.png: React-Logo-Symbole in verschiedenen Größen.
  • manifest.json: Web-App-Manifest-Datei, die verwendet wird, um Metadaten wie den Namen und die Symbole der App zu definieren.
  • robots.txt: Dient dazu, Suchmaschinen mitzuteilen, welche Seiten gecrawlt werden dürfen.

src/

Speichert den Quellcode der Anwendung. Hier findet hauptsächlich die Entwicklung statt.

  • App.css：AppDie Stildatei der Komponente.
  • App.js: Die Hauptkomponentendatei, die eine grundlegende React-Komponente definiert.
  • App.test.js：AppDie Testdatei der Komponente.
  • index.css: Globale Stildatei.
  • index.js: Die Einstiegsdatei der Anwendung, die dafür verantwortlich ist, React-Komponenten in das DOM zu rendern.
  • logo.svg: SVG-Datei für das React-Logo.
  • reportWebVitals.js: Eine Datei für Performance-Monitoring, die Ihnen helfen kann, die Performance Ihrer Anwendung zu verstehen und zu analysieren.
  • setupTests.js: Eine Datei, die zum Einrichten der Testumgebung verwendet wird.

.gitignore

Listet Dateien und Verzeichnisse auf, die Git ignorieren soll, wie z. B.node_modules/und das Build-Ausgabeverzeichnis.

package.json

Die Konfigurationsdatei des Projekts, die Projektinformationen, Skripte, Abhängigkeiten usw. enthält.

README.md

Die README-Datei des Projekts, die grundlegende Projektinformationen und Nutzungshinweise enthält.

yarn.lockoderpackage-lock.json

Lock-Datei, die die exakten Abhängigkeitsversionen aufzeichnet, um eine konsistente Installation der Abhängigkeiten in verschiedenen Umgebungen zu gewährleisten.

Versuchen Sie, den Code der Datei src/App.js zu ändern:

src/App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Willkommen beim Beispiel-Tutorial</h2> </div> <p className="App-intro"> Du kannst sie in der <code>src/App.js</code> Datei. </p> </div> ); } } export default App;

Nach der Änderung öffne http://localhost:3000/ (aktualisiert sich normalerweise automatisch), und die Ausgabe ist wie folgt:

src/index.js ist eine Einstiegsdatei. Wir können versuchen, den Code der Datei src/index.js direkt zu ändern:

Hinweis:In React 18 ist ReactDOM.render veraltet.

Beispiel

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

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

const root = ReactDOM.createRoot(document.getElementById("root"));
// Rendere die Hello-Komponente und übergebe die name-Prop
root.render(<Hello name="World" />);

Dann öffne im Browserhttp://localhost:3000/und es wird ausgegeben:

Hello World!

Erstelle deine erste Komponente

Du kannst dieApp.jsDatei bearbeiten, um deine erste Komponente zu erstellen. Hier ist ein einfaches Beispiel, das dieAppKomponente zum Anzeigen von "Hello, React!":

Beispiel

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
      </header>
    </div>
  );
}

export default App;

Nach dem Speichern der Datei aktualisiert sich der Browser automatisch, und du solltest "Hello, React!" auf der Seite angezeigt sehen.

Du kannst weitere Komponentendateien imsrcVerzeichnis erstellen, zum Beispiel eineHello.jsDatei:

Hello.js-Datei mit folgendem Code:

import React from 'react';

function Hello() {
  return <h1>Hallo von einer neuen Komponente!</h1>;
}

export default Hello;

Dann importiere und verwende diese neue Komponente inApp.js:

Beispiel

import React from 'react';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Hello />
      </header>
    </div>
  );
}

export default App;

Nach dem Speichern der Datei wird der Browser automatisch aktualisiert, und Sie sehen den Inhalt der neuen Komponente.

Weitere Erweiterungen