yuri admin
1.0.0
Dies ist eine Middle- und Backend-Managementlösung basierend auf React+React-router4+an�td3.
Eine Mid- und Back-End-Lösung basierend auf React+react-router+antd, sofort einsatzbereit, ohne Konfiguration und nur mit der Pflege eines JSON
Dieses Projekt wurde mit Create React App gebootstrappt.
Nachfolgend finden Sie einige Informationen zur Durchführung allgemeiner Aufgaben.
Die aktuellste Version dieses Leitfadens finden Sie hier.
<title>public Ordnerspublic Ordner verwendet werden?.env<meta> -Tags auf dem Servernpm start erkennt keine Änderungennpm test hängt unter macOS Sierranpm run build wird zu früh beendetnpm run build schlägt auf Heroku fehlnpm run build kann nicht minimiert werdenCreate React App ist in zwei Pakete unterteilt:
create-react-app ist ein globales Befehlszeilendienstprogramm, mit dem Sie neue Projekte erstellen.react-scripts ist eine Entwicklungsabhängigkeit in den generierten Projekten (einschließlich diesem). Sie müssen create-react-app selbst fast nie aktualisieren: Sie delegiert die gesamte Einrichtung an react-scripts .
Wenn Sie create-react-app ausführen, wird das Projekt immer mit der neuesten Version von react-scripts erstellt, sodass Sie automatisch alle neuen Funktionen und Verbesserungen in neu erstellten Apps erhalten.
Um ein vorhandenes Projekt auf eine neue Version von react-scripts zu aktualisieren, öffnen Sie das Änderungsprotokoll, suchen Sie die Version, die Sie derzeit verwenden (überprüfen Sie package.json in diesem Ordner, wenn Sie sich nicht sicher sind) und wenden Sie die Migrationsanweisungen für die neuere Version an Versionen.
In den meisten Fällen sollte es ausreichen, die react-scripts -Version in package.json zu erhöhen und npm install in diesem Ordner auszuführen. Es empfiehlt sich jedoch, im Änderungsprotokoll nach potenziell wichtigen Änderungen zu suchen.
Wir verpflichten uns, die bahnbrechenden Änderungen minimal zu halten, damit Sie react-scripts problemlos aktualisieren können.
Wir sind immer offen für Ihr Feedback.
Nach der Erstellung sollte Ihr Projekt so aussehen:
my-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
Damit das Projekt erstellt werden kann, müssen diese Dateien mit genauen Dateinamen vorhanden sein :
public/index.html ist die Seitenvorlage;src/index.js ist der JavaScript-Einstiegspunkt.Sie können die anderen Dateien löschen oder umbenennen.
Sie können Unterverzeichnisse innerhalb src erstellen. Für schnellere Neuerstellungen werden nur Dateien innerhalb von src von Webpack verarbeitet.
Sie müssen alle JS- und CSS-Dateien in src einfügen , sonst erkennt Webpack sie nicht.
Von public/index.html können nur Dateien innerhalb von public verwendet werden.
Lesen Sie unten die Anweisungen zur Verwendung von Assets aus JavaScript und HTML.
Sie können jedoch weitere Verzeichnisse der obersten Ebene erstellen.
Sie werden nicht in den Produktions-Build einbezogen, sodass Sie sie beispielsweise für Dokumentationen verwenden können.
Im Projektverzeichnis können Sie Folgendes ausführen:
npm start Führt die App im Entwicklungsmodus aus.
Öffnen Sie http://localhost:3000, um es im Browser anzuzeigen.
Die Seite wird neu geladen, wenn Sie Änderungen vornehmen.
Eventuelle Flusenfehler werden Ihnen auch in der Konsole angezeigt.
npm test Startet den Testläufer im interaktiven Überwachungsmodus.
Weitere Informationen finden Sie im Abschnitt zum Ausführen von Tests.
npm run build Erstellt die App für die Produktion im build -Ordner.
Es bündelt React im Produktionsmodus korrekt und optimiert den Build für die beste Leistung.
Der Build wird minimiert und die Dateinamen enthalten die Hashes.
Ihre App ist bereit zur Bereitstellung!
Weitere Informationen finden Sie im Abschnitt zur Bereitstellung.
npm run eject Hinweis: Dies ist ein Einwegvorgang. Sobald Sie eject , können Sie nicht mehr zurückkehren!
Wenn Sie mit dem Build-Tool und den Konfigurationsoptionen nicht zufrieden sind, können Sie jederzeit eject . Mit diesem Befehl wird die einzelne Build-Abhängigkeit aus Ihrem Projekt entfernt.
Stattdessen werden alle Konfigurationsdateien und die transitiven Abhängigkeiten (Webpack, Babel, ESLint usw.) direkt in Ihr Projekt kopiert, sodass Sie die volle Kontrolle über sie haben. Alle Befehle außer eject funktionieren weiterhin, aber sie verweisen auf Kopierte Skripte, damit Sie sie optimieren können. An diesem Punkt sind Sie auf sich allein gestellt.
Sie müssen nie eject verwenden. Der kuratierte Funktionsumfang ist für kleine und mittlere Bereitstellungen geeignet und Sie sollten sich nicht verpflichtet fühlen, diese Funktion zu verwenden, wenn Sie dies nicht könnten Passen Sie es an, wenn Sie dazu bereit sind.
Standardmäßig verwendet das generierte Projekt die neueste Version von React.
Weitere Informationen zu unterstützten Browsern finden Sie in der React-Dokumentation.
Dieses Projekt unterstützt eine Obermenge des neuesten JavaScript-Standards.
Zusätzlich zu den ES6-Syntaxfunktionen unterstützt es auch:
Erfahren Sie mehr über die verschiedenen Angebotsphasen.
Wir empfehlen zwar, experimentelle Vorschläge mit einiger Vorsicht zu verwenden, Facebook nutzt diese Funktionen jedoch häufig im Produktcode. Daher beabsichtigen wir, Codemods bereitzustellen, falls sich einer dieser Vorschläge in Zukunft ändert.
Beachten Sie, dass das Projekt nur einige ES6-Polyfills enthält :
Object.assign() über object-assign .Promise durch promise .fetch() über whatwg-fetch . Wenn Sie andere ES6+-Funktionen verwenden, die Laufzeitunterstützung benötigen (z. B. Array.from() oder Symbol ), stellen Sie sicher, dass Sie die entsprechenden Polyfills manuell einfügen oder dass die Browser, auf die Sie abzielen, diese bereits unterstützen.
Beachten Sie außerdem, dass die Verwendung einiger neuerer Syntaxfunktionen wie for...of oder [...nonArrayValue] dazu führt, dass Babel Code ausgibt, der von ES6-Laufzeitfunktionen abhängt und ohne Polyfill möglicherweise nicht funktioniert. Verwenden Sie im Zweifelsfall Babel REPL, um zu sehen, was Jede spezifische Syntax lässt sich kompilieren.
Um die Syntaxhervorhebung in Ihrem bevorzugten Texteditor zu konfigurieren, gehen Sie zur entsprechenden Babel-Dokumentationsseite und befolgen Sie die Anweisungen. Einige der gängigsten Editoren werden behandelt.
Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Es funktioniert auch nur mit npm 3 oder höher.
Einige Editoren, darunter Sublime Text, Atom und Visual Studio Code, stellen Plugins für ESLint bereit.
Sie sind für das Linting nicht erforderlich. Sie sollten die Linter-Ausgabe direkt in Ihrem Terminal sowie in der Browserkonsole sehen. Wenn Sie jedoch bevorzugen, dass die Lint-Ergebnisse direkt in Ihrem Editor angezeigt werden, können Sie einige zusätzliche Schritte ausführen.
Sie müssten zuerst ein ESLint-Plugin für Ihren Editor installieren. Fügen Sie dann eine Datei namens .eslintrc zum Projektstamm hinzu:
{
"extends" : "react-app"
}Jetzt sollte Ihr Redakteur die Linting-Warnungen melden.
Beachten Sie, dass sich diese Änderungen, selbst wenn Sie Ihre .eslintrc Datei weiter bearbeiten, nur auf die Editor-Integration auswirken . Sie wirken sich nicht auf die Lint-Ausgabe im Terminal und im Browser aus. Dies liegt daran, dass Create React App absichtlich einen minimalen Satz an Regeln bereitstellt häufige Fehler.
Wenn Sie einen Codierungsstil für Ihr Projekt erzwingen möchten, sollten Sie Prettier anstelle von ESLint-Stilregeln verwenden.
Diese Funktion wird derzeit nur von Visual Studio Code und WebStorm unterstützt.
Visual Studio Code und WebStorm unterstützen das sofortige Debuggen mit Create React App. Dadurch können Sie als Entwickler Ihren React-Code schreiben und debuggen, ohne den Editor zu verlassen, und vor allem ermöglicht es Ihnen einen kontinuierlichen Entwicklungsworkflow mit Kontextwechsel ist minimal, da Sie nicht zwischen den Tools wechseln müssen.
Sie müssen die neueste Version von VS Code und der VS Code Chrome Debugger Extension installiert haben.
Fügen Sie dann den folgenden Block zu Ihrer Datei launch.json hinzu und legen Sie ihn im Ordner .vscode im Stammverzeichnis Ihrer App ab.
{
"version" : " 0.2.0 " ,
"configurations" : [{
"name" : " Chrome " ,
"type" : " chrome " ,
"request" : " launch " ,
"url" : " http://localhost:3000 " ,
"webRoot" : " ${workspaceRoot}/src " ,
"sourceMapPathOverrides" : {
"webpack:///src/*" : " ${webRoot}/* "
}
}]
}Hinweis: Die URL kann anders sein, wenn Sie Anpassungen über die Umgebungsvariablen HOST oder PORT vorgenommen haben.
Starten Sie Ihre App, indem Sie npm start ausführen, und starten Sie das Debuggen in VS Code, indem Sie F5 drücken oder auf das grüne Debug-Symbol klicken. Sie können jetzt Code schreiben, Haltepunkte festlegen, Änderungen am Code vornehmen und Ihren neu geänderten Code debuggen – alles von Ihrem Editor.
Haben Sie Probleme mit dem VS-Code-Debugging? Bitte lesen Sie die Anleitung zur Fehlerbehebung.
Sie müssten die Chrome-Erweiterung WebStorm und JetBrains IDE Support installiert haben.
Im WebStorm-Menü Run wählen Sie Edit Configurations... + wählen Sie JavaScript Debug . Fügen Sie http://localhost:3000 in das URL-Feld ein und speichern Sie die Konfiguration.
Hinweis: Die URL kann anders sein, wenn Sie Anpassungen über die Umgebungsvariablen HOST oder PORT vorgenommen haben.
Starten Sie Ihre App, indem Sie npm start ausführen, drücken Sie dann ^D unter macOS oder F9 unter Windows und Linux oder klicken Sie auf das grüne Debug-Symbol, um das Debuggen in WebStorm zu starten.
Auf die gleiche Weise können Sie Ihre Anwendung in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro und RubyMine debuggen.
Prettier ist ein eigenständiger Codeformatierer mit Unterstützung für JavaScript, CSS und JSON. Mit Prettier können Sie den von Ihnen geschriebenen Code automatisch formatieren, um einen Codestil in Ihrem Projekt sicherzustellen. Weitere Informationen finden Sie auf der GitHub-Seite von Prettier es in Aktion.
Um unseren Code bei jedem Commit in Git zu formatieren, müssen wir die folgenden Abhängigkeiten installieren:
npm install --save husky lint-staged prettier Alternativ können Sie auch yarn verwenden:
yarn add husky lint-staged prettierhusky macht es einfach, Githooks so zu verwenden, als wären sie NPM-Skripte.lint-staged können wir Skripte für bereitgestellte Dateien in Git ausführen. Weitere Informationen dazu finden Sie in diesem Blogbeitrag über lint-staged.prettier ist der JavaScript-Formatierer, den wir vor dem Commit ausführen. Jetzt können wir sicherstellen, dass jede Datei richtig formatiert ist, indem wir ein paar Zeilen zur package.json im Projektstamm hinzufügen.
Fügen Sie dem Abschnitt scripts die folgende Zeile hinzu:
"scripts": {
+ "precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build", Als Nächstes fügen wir der package.json ein „lint-staged“-Feld hinzu, zum Beispiel:
"dependencies": {
// ...
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,json,css}": [
+ "prettier --single-quote --write",
+ "git add"
+ ]
+ },
"scripts": { Wenn Sie jetzt einen Commit durchführen, formatiert Prettier die geänderten Dateien automatisch. Sie können auch ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" ausführen ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" um Ihr gesamtes Projekt zum ersten Mal zu formatieren.
Als Nächstes möchten Sie Prettier möglicherweise in Ihren bevorzugten Editor integrieren. Lesen Sie den Abschnitt zur Editor-Integration auf der Prettier-GitHub-Seite.
<title> Sie finden die Quell-HTML-Datei im public Ordner des generierten Projekts. Sie können das <title> -Tag darin bearbeiten, um den Titel von „React App“ in einen anderen zu ändern.
Beachten Sie, dass Sie Dateien im public Ordner normalerweise nicht sehr oft bearbeiten würden. Das Hinzufügen eines Stylesheets erfolgt beispielsweise ohne Eingriff in den HTML-Code.
Wenn Sie den Seitentitel basierend auf dem Inhalt dynamisch aktualisieren müssen, können Sie die document.title -API des Browsers verwenden. Für komplexere Szenarien, in denen Sie den Titel von React-Komponenten ändern möchten, können Sie React Helmet, eine Bibliothek eines Drittanbieters, verwenden.
Wenn Sie in der Produktion einen benutzerdefinierten Server für Ihre App verwenden und den Titel ändern möchten, bevor er an den Browser gesendet wird, können Sie den Ratschlägen in diesem Abschnitt folgen. Alternativ können Sie jede Seite als statische HTML-Datei vorab erstellen, die dann geladen wird das JavaScript-Bundle, das hier behandelt wird.
Das generierte Projekt enthält React und ReactDOM als Abhängigkeiten. Es enthält auch eine Reihe von Skripten, die von Create React App als Entwicklungsabhängigkeit verwendet werden. Sie können andere Abhängigkeiten (z. B. React Router) mit npm installieren.
npm install --save react-router Alternativ können Sie auch yarn verwenden:
yarn add react-router Dies funktioniert für jede Bibliothek, nicht nur für react-router .
Dieses Projekt-Setup unterstützt dank Babel ES6-Module.
Sie können zwar weiterhin require() und module.exports verwenden, wir empfehlen Ihnen jedoch, stattdessen import und export zu verwenden.
Zum Beispiel:
Button.js import React , { Component } from 'react' ;
class Button extends Component {
render ( ) {
// ...
}
}
export default Button ; // Don’t forget to use export default!DangerButton.js import React , { Component } from 'react' ;
import Button from './Button' ; // Import a component from another file
class DangerButton extends Component {
render ( ) {
return < Button color = "red" /> ;
}
}
export default DangerButton ;Beachten Sie den Unterschied zwischen Standard- und benannten Exporten. Dies ist eine häufige Fehlerquelle.
Wir empfehlen Ihnen, bei der Verwendung von Standardimporten und -exporten zu bleiben, wenn ein Modul nur eine einzige Sache exportiert (z. B. eine Komponente). Das erhalten Sie, wenn Sie export default Button und import Button from './Button' verwenden.
Benannte Exporte sind nützlich für Utility-Module, die mehrere Funktionen exportieren. Ein Modul kann höchstens einen Standardexport und beliebig viele benannte Exporte haben.
Erfahren Sie mehr über ES6-Module:
Anstatt die gesamte App herunterzuladen, bevor Benutzer sie verwenden können, können Sie mit der Codeaufteilung Ihren Code in kleine Teile aufteilen, die Sie dann bei Bedarf laden können.
Dieses Projekt-Setup unterstützt die Codeaufteilung über dynamische import() . Der Vorschlag befindet sich in Phase 3. Die funktionsähnliche Form import() verwendet den Modulnamen als Argument und gibt ein Promise zurück, das immer in das Namespace-Objekt des Moduls aufgelöst wird.
Hier ist ein Beispiel:
moduleA.js const moduleA = 'Hello' ;
export { moduleA } ;App.js import React , { Component } from 'react' ;
class App extends Component {
handleClick = ( ) => {
import ( './moduleA' )
. then ( ( { moduleA } ) => {
// Use moduleA
} )
. catch ( err => {
// Handle failure
} ) ;
} ;
render ( ) {
return (
< div >
< button onClick = { this . handleClick } > Load </ button >
</ div >
) ;
}
}
export default App ; Dadurch werden moduleA.js und alle seine einzigartigen Abhängigkeiten zu einem separaten Block, der erst geladen wird, nachdem der Benutzer auf die Schaltfläche „Laden“ geklickt hat.
Sie können es auch mit der Syntax async / await verwenden, wenn Sie es bevorzugen.
Wenn Sie React Router verwenden, lesen Sie dieses Tutorial zur Verwendung der Codeaufteilung. Das begleitende GitHub-Repository finden Sie hier.
Schauen Sie sich auch den Abschnitt Code-Splitting in der React-Dokumentation an.
Dieses Projekt-Setup verwendet Webpack für die Verarbeitung aller Assets. Webpack bietet eine benutzerdefinierte Möglichkeit, das import über JavaScript hinaus zu erweitern. Um auszudrücken, dass eine JavaScript-Datei von einer CSS-Datei abhängt, müssen Sie das CSS aus der JavaScript-Datei importieren .
Button.css. Button {
padding : 20 px ;
}Button.js import React , { Component } from 'react' ;
import './Button.css' ; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render ( ) {
// You can use them as regular CSS styles
return < div className = "Button" /> ;
}
}Dies ist für React nicht erforderlich , aber viele Leute finden diese Funktion praktisch. Sie können hier über die Vorteile dieses Ansatzes lesen. Sie sollten sich jedoch darüber im Klaren sein, dass Ihr Code dadurch weniger auf andere Build-Tools und Umgebungen übertragbar ist als auf Webpack.
Wenn Sie in der Entwicklung Abhängigkeiten auf diese Weise ausdrücken, können Ihre Stile während der Bearbeitung sofort neu geladen werden. In der Produktion werden alle CSS-Dateien in der Build-Ausgabe in einer einzigen minimierten .css Datei verkettet.
Wenn Sie Bedenken hinsichtlich der Verwendung von Webpack-spezifischer Semantik haben, können Sie Ihr gesamtes CSS direkt in src/index.css einfügen. Es wird weiterhin aus src/index.js importiert, Sie können diesen Import jedoch jederzeit entfernen, wenn Sie später auf a migrieren verschiedene Build-Tools.
Dieses Projekt-Setup minimiert Ihr CSS und fügt über Autoprefixer automatisch Herstellerpräfixe hinzu, sodass Sie sich darüber keine Sorgen machen müssen.
Zum Beispiel dies:
. App {
display : flex;
flex-direction : row;
align-items : center;
}wird das:
. App {
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-webkit-box-orient : horizontal;
-webkit-box-direction : normal;
-ms-flex-direction : row;
flex-direction : row;
-webkit-box-align : center;
-ms-flex-align : center;
align-items : center;
}Wenn Sie die automatische Präfixierung aus irgendeinem Grund deaktivieren müssen, befolgen Sie diesen Abschnitt.
Im Allgemeinen empfehlen wir, dass Sie nicht dieselben CSS-Klassen in verschiedenen Komponenten wiederverwenden. Anstatt beispielsweise eine .Button CSS-Klasse in <AcceptButton> und <RejectButton> -Komponenten zu verwenden, empfehlen wir, eine eigene <Button> -Komponente zu erstellen .Button Stile, die sowohl <AcceptButton> als auch <RejectButton> rendern (aber nicht erben) können.
Das Befolgen dieser Regel macht CSS-Präprozessoren oft weniger nützlich, da Funktionen wie Mixins und Verschachtelung durch Komponentenkomposition ersetzt werden. Sie können jedoch einen CSS-Präprozessor integrieren, wenn Sie ihn für wertvoll halten. In dieser exemplarischen Vorgehensweise verwenden wir Sass, Sie können jedoch Verwenden Sie auch Less oder eine andere Alternative.
Zuerst installieren wir die Befehlszeilenschnittstelle für Sass:
npm install --save node-sass-chokidar Alternativ können Sie auch yarn verwenden:
yarn add node-sass-chokidar Fügen Sie dann in package.json den scripts die folgenden Zeilen hinzu:
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Hinweis: Um einen anderen Präprozessor zu verwenden, ersetzen Sie die Befehle
build-cssundwatch-cssgemäß der Dokumentation Ihres Präprozessors.
Jetzt können Sie src/App.css in src/App.scss umbenennen und npm run watch-css ausführen. Der Watcher findet jede Sass-Datei in src Unterverzeichnissen und erstellt eine entsprechende CSS-Datei daneben, wobei sie in unserem Fall src/App.css überschreibt. src/App.css . Da src/App.js weiterhin src/App.css importiert, werden die Stile Teil Ihrer Anwendung. Sie können sie jetzt bearbeiten src/App.scss und src/App.css werden neu generiert.
Um Variablen zwischen Sass-Dateien zu teilen, können Sie Sass-Importe verwenden. Beispielsweise könnten src/App.scss und andere Komponentenstildateien @import "./shared.scss"; mit Variablendefinitionen enthalten.
Um das Importieren von Dateien ohne die Verwendung relativer Pfade zu ermöglichen, können Sie die Option --include-path zum Befehl in package.json hinzufügen.
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
Dadurch können Sie Importe wie z.B. durchführen
@import ' styles/_colors.scss ' ; // assuming a styles directory under src/
@import ' nprogress/nprogress ' ; // importing a css file from the nprogress node module An dieser Stelle möchten Sie möglicherweise alle CSS-Dateien aus der Quellcodeverwaltung entfernen und src/**/*.css zu Ihrer .gitignore Datei hinzufügen. Im Allgemeinen empfiehlt es sich, die Build-Produkte außerhalb der Quellcodeverwaltung zu belassen.
Als letzten Schritt finden Sie es möglicherweise praktisch, watch-css automatisch mit npm start auszuführen und build-css als Teil von npm run build auszuführen. Sie können den Operator && verwenden, um zwei Skripte nacheinander auszuführen plattformübergreifende Möglichkeit, zwei Skripte parallel auszuführen, daher installieren wir ein Paket dafür:
npm install --save npm-run-all Alternativ können Sie auch yarn verwenden:
yarn add npm-run-all Dann können wir start und build -Skripte so ändern, dass sie die CSS-Präprozessorbefehle enthalten:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
} Wenn Sie jetzt npm start und npm run build ausführen, werden auch Sass-Dateien erstellt.
Warum node-sass-chokidar ?
Bei node-sass wurden die folgenden Probleme gemeldet:
Es wurde berichtet, dass node-sass --watch unter bestimmten Bedingungen Leistungsprobleme aufweist, wenn es in einer virtuellen Maschine oder mit Docker verwendet wird.
Unendliche Stile, Zusammenstellung #1939
Es wurde berichtet, dass node-sass Probleme mit der Erkennung neuer Dateien in einem Verzeichnis Nr. 1891 hat
node-sass-chokidar wird hier verwendet, da es diese Probleme angeht.
Bei Webpack funktioniert die Verwendung statischer Assets wie Bilder und Schriftarten ähnlich wie bei CSS.
Sie können eine Datei direkt in ein JavaScript-Modul import . Dadurch wird Webpack angewiesen, diese Datei in das Bundle aufzunehmen. Beim Importieren einer Datei erhalten Sie einen Zeichenfolgenwert, auf den Sie in Ihrem Code verweisen können das src Attribut eines Bildes oder das href eines Links zu einer PDF.
Um die Anzahl der Anfragen an den Server zu reduzieren, wird beim Importieren von Bildern mit weniger als 10.000 Byte ein Daten-URI anstelle eines Pfads zurückgegeben. Dies gilt für die folgenden Dateierweiterungen: BMP-, GIF-, JPG-, JPEG- und PNG-Dateien wegen #1153.
Hier ist ein Beispiel:
import React from 'react' ;
import logo from './logo.png' ; // Tell Webpack this JS file uses this image
console . log ( logo ) ; // /logo.84287d09.png
function Header ( ) {
// Import result is the URL of your image
return < img src = { logo } alt = "Logo" /> ;
}
export default Header ;Dadurch wird sichergestellt, dass Webpack beim Erstellen des Projekts die Bilder korrekt in den Build-Ordner verschiebt und uns die richtigen Pfade bereitstellt.
Das funktioniert auch in CSS:
. Logo {
background-image : url (. / logo.png);
} Webpack findet alle relativen Modulverweise in CSS (sie beginnen mit ./ ) und ersetzt sie durch die endgültigen Pfade aus dem kompilierten Bundle. Wenn Sie einen Tippfehler machen oder versehentlich eine wichtige Datei löschen, wird Ihnen ein Kompilierungsfehler angezeigt, genau wie wenn Sie Importieren Sie ein nicht vorhandenes JavaScript-Modul. Die endgültigen Dateinamen im kompilierten Bundle werden von Webpack aus Inhalts-Hashes generiert. Wenn sich der Dateiinhalt in Zukunft ändert, gibt Webpack ihm in der Produktion einen anderen Namen, sodass Sie sich darüber keine Sorgen machen müssen Langzeit-Caching von Vermögenswerte.
Bitte beachten Sie, dass dies auch eine benutzerdefinierte Funktion von Webpack ist.
Es ist für React nicht erforderlich , aber vielen Leuten gefällt es (und React Native verwendet einen ähnlichen Mechanismus für Bilder).
Eine alternative Möglichkeit zum Umgang mit statischen Assets wird im nächsten Abschnitt beschrieben.
public OrdnersHinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Der public Ordner enthält die HTML-Datei, sodass Sie sie beispielsweise anpassen können, um den Seitentitel festzulegen. Das <script> -Tag mit dem kompilierten Code wird ihm während des Erstellungsprozesses automatisch hinzugefügt.
Sie können dem public Ordner auch andere Assets hinzufügen.
Beachten Sie, dass wir Ihnen normalerweise empfehlen, Assets in JavaScript-Dateien zu import . Weitere Informationen finden Sie beispielsweise in den Abschnitten zum Hinzufügen eines Stylesheets und zum Hinzufügen von Bildern und Schriftarten.
Es gibt jedoch eine Notluke , über die Sie ein Asset außerhalb des Modulsystems hinzufügen können.
Wenn Sie eine Datei im public Ordner ablegen, wird sie nicht von Webpack verarbeitet, sondern unverändert in den Build-Ordner kopiert. Um auf Assets im public Ordner zu verweisen, müssen Sie eine spezielle Variable namens PUBLIC_URL verwenden.
Innerhalb von index.html können Sie es folgendermaßen verwenden:
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > Nur Dateien im public Ordner sind über das Präfix %PUBLIC_URL% zugänglich. Wenn Sie eine Datei aus src oder node_modules verwenden müssen, müssen Sie sie dorthin kopieren, um Ihre Absicht, diese Datei zu einem Teil des Builds zu machen, explizit anzugeben.
Wenn Sie npm run build ausführen, ersetzt Create React App %PUBLIC_URL% durch einen korrekten absoluten Pfad, sodass Ihr Projekt auch dann funktioniert, wenn Sie clientseitiges Routing verwenden oder es unter einer Nicht-Root-URL hosten.
Im JavaScript-Code können Sie process.env.PUBLIC_URL für ähnliche Zwecke verwenden:
render ( ) {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return < img src = { process . env . PUBLIC_URL + '/img/logo.png' } /> ;
}Bedenken Sie die Nachteile dieses Ansatzes:
public Ordner wird nachbearbeitet oder minimiert.public Ordner verwendet werden? Normalerweise empfehlen wir den Import von Stylesheets, Bildern und Schriftarten aus JavaScript. Der public Ordner ist als Workaround für eine Reihe weniger häufiger Fälle nützlich:
manifest.webmanifest .pace.js außerhalb des gebündelten Codes einbinden.<script> -Tag einzubinden. Beachten Sie, dass Sie, wenn Sie ein <script> hinzufügen, das globale Variablen deklariert, auch den nächsten Abschnitt zu deren Verwendung lesen müssen.
Wenn Sie ein Skript in die HTML-Datei einfügen, das globale Variablen definiert, und versuchen, eine dieser Variablen im Code zu verwenden, wird sich der Linter beschweren, weil er die Definition der Variablen nicht sehen kann.
Sie können dies vermeiden, indem Sie die globale Variable explizit aus dem window lesen, zum Beispiel:
const $ = window . $ ;Dies macht deutlich, dass Sie eine globale Variable absichtlich und nicht aufgrund eines Tippfehlers verwenden.
Alternativ können Sie den Linter zwingen, jede Zeile zu ignorieren, indem Sie danach // eslint-disable-line hinzufügen.
Sie müssen React Bootstrap nicht zusammen mit React verwenden, aber es ist eine beliebte Bibliothek für die Integration von Bootstrap in React-Apps. Wenn Sie sie benötigen, können Sie sie mit den folgenden Schritten in Create React App integrieren:
Installieren Sie React Bootstrap und Bootstrap von npm. React Bootstrap enthält kein Bootstrap-CSS, daher muss dieses ebenfalls installiert werden:
npm install --save react-bootstrap bootstrap@3 Alternativ können Sie auch yarn verwenden:
yarn add react-bootstrap bootstrap@3 Importieren Sie Bootstrap-CSS und optional Bootstrap-Theme-CSS am Anfang Ihrer src/index.js Datei:
import 'bootstrap/dist/css/bootstrap.css' ;
import 'bootstrap/dist/css/bootstrap-theme.css' ;
// Put any other imports below so that CSS from your
// components takes precedence over default styles. Importieren Sie die erforderlichen React Bootstrap-Komponenten in die Datei src/App.js oder Ihre benutzerdefinierten Komponentendateien:
import { Navbar , Jumbotron , Button } from 'react-bootstrap' ; Jetzt können Sie die importierten React Bootstrap-Komponenten innerhalb Ihrer in der Rendermethode definierten Komponentenhierarchie verwenden. Hier ist ein Beispiel für App.js das mit React Bootstrap überarbeitet wurde.
Manchmal müssen Sie möglicherweise die visuellen Stile von Bootstrap (oder einem gleichwertigen Paket) anpassen.
Wir schlagen folgende Vorgehensweise vor:
Hier ist ein Beispiel für das Hinzufügen eines benutzerdefinierten Bootstrap, das diesen Schritten folgt.
Flow ist ein statischer Typprüfer, der Ihnen hilft, Code mit weniger Fehlern zu schreiben. Sehen Sie sich diese Einführung zur Verwendung statischer Typen in JavaScript an, wenn Sie mit diesem Konzept noch nicht vertraut sind.
Aktuelle Versionen von Flow funktionieren sofort mit Create React App-Projekten.
Um Flow zu einem Create React App-Projekt hinzuzufügen, führen Sie die folgenden Schritte aus:
npm install --save flow-bin (oder yarn add flow-bin ) aus."flow": "flow" zum Abschnitt scripts “ Ihrer package.json hinzu.npm run flow init (oder yarn flow init “) aus, um eine .flowconfig Datei im Stammverzeichnis zu erstellen.// @flow zu allen Dateien hinzu, die Sie überprüfen möchten (z. B. zu src/App.js ). Jetzt können Sie npm run flow (oder yarn flow “) ausführen, um die Dateien auf Typfehler zu überprüfen. Für eine bessere Integration planen wir, sie in Zukunft noch stärker zu integrieren.
Weitere Informationen zu Flow finden Sie in der Dokumentation.
Create React App schreibt keine bestimmte Routing-Lösung vor, React Router ist jedoch die beliebteste.
Um es hinzuzufügen, führen Sie Folgendes aus:
npm install --save react-router-dom Alternativ können Sie auch yarn verwenden:
yarn add react-router-dom Um es auszuprobieren, löschen Sie den gesamten Code in src/App.js und ersetzen Sie ihn durch eines der Beispiele auf der Website. Das Basisbeispiel ist ein guter Ausgangspunkt.
Beachten Sie, dass Sie möglicherweise Ihren Produktionsserver so konfigurieren müssen, dass er clientseitiges Routing unterstützt, bevor Sie Ihre App bereitstellen.
Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Ihr Projekt kann in Ihrer Umgebung deklarierte Variablen so nutzen, als wären sie lokal in Ihren JS-Dateien deklariert. Standardmäßig sind NODE_ENV und alle anderen Umgebungsvariablen, die mit REACT_APP_ beginnen, für Sie definiert.
Die Umgebungsvariablen werden während der Erstellungszeit eingebettet . Da Create React App ein statisches HTML/CSS/JS-Bundle erzeugt, kann es diese möglicherweise nicht zur Laufzeit lesen. Um sie zur Laufzeit zu lesen, müssten Sie HTML in den Speicher laden Server und ersetzen Sie Platzhalter in der Laufzeit, wie hier beschrieben. Alternativ können Sie die App jederzeit auf dem Server neu erstellen, wenn Sie sie ändern.
Hinweis: Sie müssen benutzerdefinierte Umgebungsvariablen erstellen, die mit
REACT_APP_beginnen. Alle anderen Variablen außerNODE_ENVwerden ignoriert, um zu verhindern, dass versehentlich ein privater Schlüssel auf dem Computer verfügbar gemacht wird, der möglicherweise denselben Namen hat. Wenn Sie Umgebungsvariablen ändern, müssen Sie den Entwicklungsserver neu starten es läuft.
Diese Umgebungsvariablen werden für Sie in process.env definiert. Wenn Sie beispielsweise eine Umgebungsvariable mit dem Namen REACT_APP_SECRET_CODE haben, wird diese in Ihrem JS als process.env.REACT_APP_SECRET_CODE angezeigt.
Es gibt auch eine spezielle integrierte Umgebungsvariable namens NODE_ENV . Sie können sie aus process.env.NODE_ENV “ lesen. Wenn Sie npm start “ ausführen, ist sie immer gleich npm test 'development' 'test' und wenn Sie npm run build ausführen, um ein Produktionspaket zu erstellen, ist es immer gleich 'production' . Sie können NODE_ENV nicht manuell überschreiben. Dies verhindert, dass Entwickler versehentlich einen langsamen Entwicklungs-Build bereitstellen Produktion.
Diese Umgebungsvariablen können nützlich sein, um Informationen bedingt anzuzeigen, je nachdem, wo das Projekt bereitgestellt wird, oder um vertrauliche Daten zu verbrauchen, die außerhalb der Versionskontrolle liegen.
Zuerst müssen Sie Umgebungsvariablen definieren. Nehmen wir beispielsweise an, Sie möchten ein in der Umgebung definiertes Geheimnis in einem <form> verwenden:
render ( ) {
return (
< div >
< small > You are running this application in < b > { process . env . NODE_ENV } </ b > mode. </ small >
< form >
< input type = "hidden" defaultValue = { process . env . REACT_APP_SECRET_CODE } />
</ form >
</ div >
) ;
} Während des Builds wird process.env.REACT_APP_SECRET_CODE durch den aktuellen Wert der Umgebungsvariablen REACT_APP_SECRET_CODE ersetzt. Denken Sie daran, dass die Variable NODE_ENV automatisch für Sie festgelegt wird.
Wenn Sie die App im Browser laden und <input> überprüfen, sehen Sie, dass der Wert auf abcdef gesetzt ist, und der fettgedruckte Text zeigt die Umgebung an, die bei Verwendung npm start bereitgestellt wird:
< div >
< small > You are running this application in < b > development </ b > mode. </ small >
< form >
< input type =" hidden " value =" abcdef " />
</ form >
</ div > Das obige Formular sucht nach einer Variablen namens REACT_APP_SECRET_CODE aus der Umgebung. Um diesen Wert zu nutzen, müssen wir ihn in der Umgebung definieren. Dies kann auf zwei Arten erfolgen: entweder in Ihrer Shell oder in einer .env Datei. Beide Möglichkeiten werden in den nächsten Abschnitten beschrieben.
Der Zugriff auf NODE_ENV ist auch nützlich, um Aktionen bedingt auszuführen:
if ( process . env . NODE_ENV !== 'production' ) {
analytics . disable ( ) ;
} Wenn Sie die App mit npm run build kompilieren, wird diese Bedingung durch den Minimierungsschritt beseitigt und das resultierende Paket wird kleiner.
Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Sie können auch auf die Umgebungsvariablen zugreifen, die mit REACT_APP_ in public/index.html beginnen. Beispiel:
< title > %REACT_APP_WEBSITE_NAME% </ title >Beachten Sie, dass die Einschränkungen aus dem obigen Abschnitt gelten:
NODE_ENV und PUBLIC_URL ) müssen Variablennamen mit REACT_APP_ beginnen, um zu funktionieren.Das Definieren von Umgebungsvariablen kann je nach Betriebssystem variieren. Es ist auch wichtig zu wissen, dass diese Art und Weise für die Lebensdauer der Shell-Sitzung vorübergehend ist.
set " REACT_APP_SECRET_CODE = abcdef " && npm start(Hinweis: Die Variablenzuweisung muss in Anführungszeichen gesetzt werden, um Leerzeichen am Ende zu vermeiden.)
( $ env: REACT_APP_SECRET_CODE = " abcdef " ) -and (npm start)REACT_APP_SECRET_CODE=abcdef npm start.envHinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Um permanente Umgebungsvariablen zu definieren, erstellen Sie eine Datei namens .env im Stammverzeichnis Ihres Projekts:
REACT_APP_SECRET_CODE=abcdef
Hinweis: Sie müssen benutzerdefinierte Umgebungsvariablen erstellen, die mit
REACT_APP_beginnen. Alle anderen Variablen außerNODE_ENVwerden ignoriert, um zu verhindern, dass versehentlich ein privater Schlüssel auf dem Computer verfügbar gemacht wird, der möglicherweise denselben Namen hat. Wenn Sie Umgebungsvariablen ändern, müssen Sie den Entwicklungsserver neu starten es läuft.
.env Dateien sollten in die Quellcodeverwaltung eingecheckt werden (mit Ausnahme von .env*.local ).
.env Dateien können verwendet werden?Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar .
.env : Standard..env.local : Lokale Überschreibungen. Diese Datei wird für alle Umgebungen außer Test geladen..env.development , .env.test , .env.production : Umgebungsspezifische Einstellungen..env.development.local , .env.test.local , .env.production.local : Lokale Überschreibungen umgebungsspezifischer Einstellungen.Dateien auf der linken Seite haben mehr Priorität als Dateien auf der rechten Seite:
npm start : .env.development.local , .env.development , .env.local , .envnpm run build : .env.production.local , .env.production , .env.local , .envnpm test : .env.test.local , .env.test , .env (Hinweis: .env.local fehlt) Diese Variablen fungieren als Standardwerte, wenn der Computer sie nicht explizit festlegt.
Weitere Informationen finden Sie in der Dokumentation zu dotenv.
Hinweis: Wenn Sie Umgebungsvariablen für die Entwicklung definieren, müssen diese höchstwahrscheinlich auch in der Dokumentation zu Travis CI oder Heroku definiert werden.
.env erweiternHinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Erweitern Sie Variablen bereits auf Ihrem Computer zur Verwendung in Ihrer .env Datei (mit dotenv-expand).
Zum Beispiel, um die Umgebungsvariable npm_package_version zu erhalten:
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
Oder erweitern Sie Variablen lokal in die aktuelle .env -Datei:
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
Viele beliebte Bibliotheken verwenden Dekorateure in ihrer Dokumentation.
Die React -App erstellen, unterstützt im Moment keine Dekorationssyntax, da:
In vielen Fällen können Sie jedoch Dekorateur-basierte Code ohne Dekorateure genauso gut schreiben.
Bitte beachten Sie diese beiden Threads als Referenz:
Die React -App erstellen addiert Dekorateurunterstützung, wenn die Spezifikation in eine stabile Stufe voranschreitet.
React schreibt keinen spezifischen Ansatz für das Abholen fetch() Daten vor, aber Menschen verwenden normalerweise eine Bibliothek wie Axios oder die vom Browser fetch() API. Sorgen um den Browserunterstützung.
Die globale fetch -Funktion Response es einfach fetch AJAX -Anforderungen zu Promise .
Dieses Projekt enthält auch ein Versprechen, das eine vollständige Implementierung von Versprechen/ fetch() +bietet. async / await
Weitere Informationen zum FAQ -Eintrag auf der React -Website erfahren Sie mehr über AJAX -Anfragen von React -Komponenten.
Diese Tutorials helfen Ihnen dabei, Ihre App mit einem API -Backend in einem anderen Port zu integrieren, wobei fetch() zum Zugriff auf darauf zugänglich ist.
Schauen Sie sich dieses Tutorial an.
Schauen Sie sich dieses Tutorial an.
Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Die Menschen bedienen oft die Front-End-React-App aus demselben Host und Hafen wie ihre Backend-Implementierung.
Beispielsweise könnte ein Produktionsaufbau so aussehen, nachdem die App bereitgestellt wurde:
/ - static server returns index.html with React app
/todos - static server returns index.html with React app
/api/todos - server handles any /api/* requests using the backend implementation
Ein solches Setup ist jedoch nicht erforderlich. Wenn Sie ein solches Setup haben , ist es bequem, Anfragen wie fetch('/api/todos') zu schreiben, ohne sich Sorgen zu machen, sie während der Entwicklung zu einem anderen Host oder Port umzuleiten.
Um dem Entwicklungsserver zu sagen, dass unbekannte Anforderungen an Ihren API -Server in der Entwicklung proxy proxy, fügen Sie Ihrem package.json ein proxy -Feld hinzu, zum Beispiel:
"proxy" : "http://localhost:4000" , Auf diese Weise wird der Entwicklungsserver beim fetch('/api/todos') in der Entwicklung erkennen, dass es sich nicht um ein statisches Gut handelt und Ihre Anfrage an http://localhost:4000/api/todos als Fallback eingreift. Der Entwicklungsserver wird nur versuchen, Anfragen ohne text/html in seinem Accept an den Proxy zu senden.
Dies vermeidet CORS -Probleme und Fehlermeldungen wie diese in der Entwicklung:
Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Beachten Sie, dass proxy nur in der Entwicklung auswirkt (mit npm start ), und es liegt an Ihnen, dass URLs wie /api/todos auf das /api in der Produktion hinweisen. text/html proxy
Die proxy -Option unterstützt HTTP-, HTTPS- und WebSocket -Verbindungen.
Wenn die proxy -Option für Sie nicht flexibel genug ist, können Sie alternativ:
Wenn Sie die proxy -Option aktivieren, entscheiden Sie sich für einen strengeren Satz von Host -Checks.
Dies sollte Sie bei der Entwicklung auf localhost nicht beeinflussen. Wenn Sie jedoch wie hier beschrieben aus der Ferne entwickeln, sehen Sie diesen Fehler im Browser, nachdem Sie die proxy -Option aktiviert haben:
Ungültiger Host -Header
Um es zu umgehen, können Sie Ihren Host für öffentliche Entwicklung in einer Datei namens .env.development in der Wurzel Ihres Projekts angeben:
HOST=mypublicdevhost.com
Wenn Sie den Entwicklungsserver jetzt neu starten und die App vom angegebenen Host laden, sollte er funktionieren.
Wenn Sie immer noch Probleme haben oder eine exotischere Umgebung wie einen Cloud -Editor verwenden, können Sie die Host -Überprüfung vollständig umgehen , indem Sie eine Linie zu .env.development.local hinzufügen. Remote -Code -Ausführung von böswilligen Websites:
# NOTE: THIS IS DANGEROUS!
# It exposes your machine to attacks from the websites you visit.
DANGEROUSLY_DISABLE_HOST_CHECK=true
Wir empfehlen diesen Ansatz nicht.
Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Wenn die proxy -Option für Sie nicht flexibel genug ist, können Sie ein Objekt in der folgenden Form (in package.json ) angeben.
Sie können auch jeden Konfigurationswert http-proxy-middleware oder http-proxy Unterstützung angeben.
{
// ...
"proxy" : {
"/api" : {
"target" : "<url>" ,
"ws" : true
// ...
}
}
// ...
} Alle Anfragen, die mit diesem Pfad übereinstimmen text/html sind Proxys, keine proxy .
Wenn Sie mehrere Proxys angeben müssen, können Sie dies tun, indem Sie zusätzliche Einträge angeben.
{
// ...
"proxy" : {
// Matches any request starting with /api
"/api" : {
"target" : "<url_1>" ,
"ws" : true
// ...
} ,
// Matches any request starting with /foo
"/foo" : {
"target" : "<url_2>" ,
"ssl" : true ,
"pathRewrite" : {
"^/foo" : "/foo/beta"
}
// ...
} ,
// Matches /bar/abc.html but not /bar/sub/def.html
"/bar/[^/]*[.]html" : {
"target" : "<url_3>" ,
// ...
} ,
// Matches /baz/abc.html and /baz/sub/def.html
"/baz/.*/.*[.]html" : {
"target" : "<url_4>"
// ...
}
}
// ...
}Beim Einrichten eines WebSocket -Proxy müssen Sie einige zusätzliche Überlegungen bewusst sein.
Wenn Sie eine WebSocket -Engine wie Socket.io verwenden, müssen Sie einen Socket.io -Server ausführen, den Sie als Proxy -Ziel verwenden können. .io, um mit dem echo -Test von Websocket.org zu arbeiten.
Es gibt eine gute Dokumentation zum Einrichten eines Socket.io -Servers.
Standard -WebSockets funktioniert mit einem Standard -WebSocket -Server sowie dem WebSocket.org -Echo -Test.
In jedem Fall können Sie WebSocket -Anfragen in package.json manuell anfragen: JSON:
{
// ...
"proxy" : {
"/socket" : {
// Your compatible WebSocket server
"target" : "ws://<socket_url>" ,
// Tell http-proxy-middleware that this is a WebSocket proxy.
// Also allows you to proxy WebSocket requests without an additional HTTP request
// https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
"ws" : true
// ...
}
}
// ...
} Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Möglicherweise benötigen Sie den Dev -Server über HTTPS.
Setzen Sie dazu die HTTPS -Umgebungsvariable auf true und starten Sie den Dev -Server wie gewohnt mit npm start :
set HTTPS = true && npm start ( $ env: HTTPS = $true ) -and (npm start)(Anmerkung: Der Mangel an Whitespace ist beabsichtigt.)
HTTPS=true npm startBeachten Sie, dass der Server ein selbstsigniertes Zertifikat verwendet, sodass Ihr Webbrowser beim Zugriff auf die Seite auf jeden Fall eine Warnung anzeigt.
<meta> -Tags auf dem Server generieren Da die React -App die Server -Rendering nicht unterstützt, fragen Sie sich möglicherweise, wie Sie <meta> Tags dynamisch machen und die aktuelle URL widerspiegeln.
<!doctype html >
< html lang =" en " >
< head >
< meta property =" og:title " content =" __OG_TITLE__ " >
< meta property =" og:description " content =" __OG_DESCRIPTION__ " > Auf dem Server können Sie unabhängig von der Backend, die Sie verwenden, index.html in den Speicher lesen und __OG_TITLE__ , __OG_DESCRIPTION__ und alle anderen Platzhalter mit Werten abhängig von der aktuellen URL ersetzen. Werte, damit sie sicher in HTML einbetten können!
Wenn Sie einen Knotenserver verwenden, können Sie sogar die Route -Matching -Logik zwischen dem Client und dem Server freigeben.
Wenn Sie Ihren build mit einem statischen Hosting-Anbieter abhalten, können Sie React-Snapshot- oder React-SNAP verwenden, um HTML-Seiten für jede Route oder relative Verbindung in Ihrer Anwendung zu generieren. , wenn das JavaScript -Bundle geladen ist.
Es gibt auch Möglichkeiten, dies außerhalb des statischen Hosting zu verwenden, um den Druck vom Server beim Generieren und zwischen Routen zu entfernen.
Der primäre Vorteil der Vorrenderung besteht darin, dass Sie den Kerninhalt jeder Seite mit der HTML-Nutzlast erhalten-unabhängig davon, ob Ihr JavaScript-Bundle erfolgreich heruntergeladen wird oder nicht. Motoren.
Hier finden Sie mehr über die Vorrendern von Zero Configuration (auch Snapshotting genannt).
Ähnlich wie im vorherigen Abschnitt können Sie einige Platzhalter in der HTML lassen, die beispielsweise globale Variablen injizieren:
< ! doctype html >
< html lang = "en" >
< head >
< script >
window.SERVER_DATA = __SERVER_DATA__;
</ script > Auf dem Server können Sie __SERVER_DATA__ durch ein window.SERVER_DATA -Daten ersetzen, bevor Sie die Antwort senden. Ihre App anfällig für XSS -Angriffe.
Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Lesen Sie den Migrationshandbuch, um zu erfahren, wie Sie ihn in älteren Projekten aktivieren können!
React App verwendet Scherz als Testläufer.
Scherz ist ein Knotenbasis.
Während der Scherz dank JSDOM Browser -Globalen wie window bietet, sind sie nur Annäherungen an das reale Browserverhalten.
Wir empfehlen, ein separates Tool für Browser-End-to-End-Tests zu verwenden, wenn Sie sie benötigen.
Jest sucht nach Testdateien mit einem der folgenden beliebten Namenskonventionen:
.js -Suffix in __tests__ Ordnern..test.js Suffix..spec.js Suffix. Die .test.js / .spec.js -Dateien (oder die __tests__ -Ordner) können in jeder Tiefe unter dem Ordner src Top Level gefunden werden.
Wir empfehlen, die Testdateien (oder __tests__ -Ordner App.test.js neben dem Code zu setzen, damit die relativen Importe kürzer App.js . import App from './App' anstelle eines langen relativen Weges.
Wenn Sie npm test ausführen, npm start Scherz im Uhrenmodus.
Der Beobachter enthält eine interaktive Befehlslinie mit der Möglichkeit, alle Tests auszuführen oder sich auf ein Suchmuster zu konzentrieren. Beachten Sie, dass der Beobachter nach jedem Lauf druckt:
Wenn Sie npm test standardmäßig ausführen, wird der Scherz nur die geänderten Tests ausführen, die sich seit dem letzten Commit geändert haben. T Oft begehen Sie den Code, der die Tests nicht besteht.
Der Scherz wird immer ausdrücklich erwähnen, dass es nur Tests im Zusammenhang mit den Seit der Dateien im letzten Komitee im Watch a drücken kann, um Scherz zu zwingen, alle Tests auszuführen.
Der Scherz wird immer alle Tests auf einem kontinuierlichen Integrationsserver ausführen oder wenn sich das Projekt nicht in einem GIT- oder Mercurial -Repository befindet.
describe() Tests zu erstellen, fügen Sie it() mit dem Namen des Tests und seinem Code test() .
JEST bietet eine integrierte expect() globale Funktion für die Erstellung von Aussagen.
import sum from './sum' ;
it ( 'sums numbers' , ( ) => {
expect ( sum ( 1 , 2 ) ) . toEqual ( 3 ) ;
expect ( sum ( 2 , 2 ) ) . toEqual ( 4 ) ;
} ) ; expect() von Scherz unterstützten Matchbilder werden hier ausführlich dokumentiert.
Sie können auch jest.fn() und expect(fn).toBeCalled() um „Spione“ oder Mock -Funktionen zu erstellen.
Es gibt ein breites Spektrum von Komponenten -Testtechniken.
Verschiedene Projekte wählen verschiedene Test -Kompromisse, basierend auf der Änderung der Komponenten und der Logik, die sie noch nicht für eine Teststrategie entschieden haben.
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
const div = document . createElement ( 'div' ) ;
ReactDOM . render ( < App /> , div ) ;
} ) ; Dieser Test montiert eine Komponente und stellt sicher, dass sie während des src/App.test.js nicht geworfen wird. src/App.test.js .
Wenn Sie Fehler durch das Ändern von Komponenten begegnen, erhalten Sie einen tieferen Einblick, welche Teile davon in Ihrer Anwendung getestet werden können.
Wenn Sie Komponenten isoliert von den untergeordneten Komponenten testen möchten, empfehlen wir shallow() von Enzym zu verwenden, um es zu installieren.
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer Alternativ können Sie yarn verwenden:
yarn add enzyme enzyme-adapter-react-16 react-test-rendererAb Enzym 3 müssen Sie das Enzym zusammen mit einem Adapter installieren, der der Version von React verwendet, die Sie verwenden.
Der Adapter muss auch in Ihrer globalen Setup -Datei konfiguriert werden:
src/setupTests.js import { configure } from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
configure ( { adapter : new Adapter ( ) } ) ;Hinweis: Beachten Sie, dass die resultierende
package.json-Datei hier vor dem Erstellen vonsrc/setupTests.js"auswerfen" wird.
Jetzt können Sie einen Rauchtest mit ihm schreiben:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders without crashing' , ( ) => {
shallow ( < App /> ) ;
} ) ; Im Gegensatz <App> vorherigen Rauchtest mit Reactdom.render <App> ReactDOM.render() <Button> dieser Test beispielsweise nicht tiefer eignet sich mount() für isolierte Unit -Tests, aber Sie möchten möglicherweise noch einige vollständige Rendering -Tests erstellen, um sicherzustellen, dass die Komponenten korrekt integriert werden.
Sie jest.fn() die Enzymdokumentation expect() weitere Testtechniken lesen.
Hier ist ein Beispiel aus der Enzymdokumentation, in der die spezifische Ausgabe behauptet und die Verwendung von Scherzstörern neu geschrieben hat:
import React from 'react' ;
import { shallow } from 'enzyme' ;
import App from './App' ;
it ( 'renders welcome message' , ( ) => {
const wrapper = shallow ( < App /> ) ;
const welcome = < h2 > Welcome to React </ h2 > ;
// expect(wrapper.contains(welcome)).to.equal(true);
expect ( wrapper . contains ( welcome ) ) . toEqual ( true ) ;
} ) ; Alle Scherz -Matcher sind hier ausführlich dokumentiert.
Trotzdem können Sie eine Assertion-Bibliothek von Drittanbietern wie Chai verwenden, wenn Sie möchten, wie unten beschrieben.
Darüber contains finden Sie ein Hilfsmittel für das Jest-Enzym, um Ihre Tests mit lesbaren Streichern zu vereinfachen.
expect ( wrapper ) . toContainReact ( welcome ) Um dies zu aktivieren, installieren Sie jest-enzyme :
npm install --save jest-enzyme Alternativ können Sie yarn verwenden:
yarn add jest-enzyme Importieren Sie es in src/setupTests.js um seine Matcher in jedem Test verfügbar zu machen:
import 'jest-enzyme' ; Wir empfehlen expect() für Behauptungen und jest.fn() für Spione zu verwenden. Zum Beispiel reagieren hübsche Druckelemente als JSX.
Wenn Sie jedoch an andere Bibliotheken wie Chai und Sinon gewöhnt sind oder wenn Sie vorhandenen Code haben, das Sie verwenden möchten, die Sie portieren möchten, können Sie sie normalerweise wie folgt importieren:
import sinon from 'sinon' ;
import { expect } from 'chai' ;Und dann verwenden Sie sie in Ihren Tests, wie Sie es normalerweise tun.
Hinweis: Diese Funktion ist mit
[email protected]und höher verfügbar.
Wenn Ihre App eine Browser -API verwendet, die Sie in Ihren Tests verspotten müssen, oder wenn Sie nur ein globales Setup benötigen, bevor Sie Ihre Tests ausführen, wird Ihr Projekt automatisch src/setupTests.js , bevor Sie Ihre Tests ausführen.
Zum Beispiel:
src/setupTests.js const localStorageMock = {
getItem : jest . fn ( ) ,
setItem : jest . fn ( ) ,
clear : jest . fn ( )
} ;
global . localStorage = localStorageMockHinweis: Denken Sie daran, dass die resultierende
package.json-Datei, wenn Sie sich vor dem Erstellen vonsrc/setupTests.js"auszuwerfen", keine Bezugnahme auf sie enthalten. Daher sollten Sie die EigenschaftsetupTestFrameworkScriptFilein der Konfiguration für Scherz manuell erstellen. So etwas wie Folgendes:
"jest" : { // ... "setupTestFrameworkScriptFile" : "<rootDir>/src/setupTests.js" }
Sie können it() durch xit() ersetzen, um einen Test vorübergehend auszuschließen, die ausgeführt werden.
In ähnlicher Weise können Sie fit() sich auf einen bestimmten Test konzentrieren, ohne andere Tests auszuführen.
Jest hat einen integrierten Reporter für die Berichterstattung, der gut mit ES6 zusammenarbeitet und keine Konfiguration benötigt.
Führen Sie npm test -- --coverage (Hinweis extra -- der Mitte) aus, um einen Abdeckungsbericht wie folgt aufzunehmen:
Beachten Sie, dass die Tests mit Abdeckung viel langsamer laufen, sodass es empfohlen wird, sie getrennt von Ihrem normalen Workflow auszuführen.
Die Konfiguration der Standard -Scherzabdeckung kann durch Hinzufügen einer der folgenden unterstützten Schlüssel zu einer Scherzkonfiguration in Ihrem Paket.json überschrieben werden.
Unterstützte Überschreibungen:
collectCoverageFromcoverageReporterscoverageThresholdsnapshotSerializersBeispiel package.json:
{
"name" : " your-package " ,
"jest" : {
"collectCoverageFrom" : [
" src/**/*.{js,jsx} " ,
" !<rootDir>/node_modules/ " ,
" !<rootDir>/path/to/dir/ "
],
"coverageThreshold" : {
"global" : {
"branches" : 90 ,
"functions" : 90 ,
"lines" : 90 ,
"statements" : 90
}
},
"coverageReporters" : [ " text " ],
"snapshotSerializers" : [ " my-serializer-module " ]
}
} Standardmäßig führt npm test CI Beobachter mit interaktiver CLI aus.
Wenn CI einen Aufbau Ihrer Anwendung mit npm test npm run build erstellen, werden Sie standardmäßig nicht überprüft. .
Beliebte CI -Server setzen die Umgebungsvariable CI bereits standardmäßig, aber Sie können dies auch selbst tun:
.travis.yml -Datei hinzu. language: node_js
node_js:
- 6
cache:
directories:
- node_modules
script:
- npm run build
- npm test
Folgen Sie diesem Artikel, um Circleci mit einem Projekt für Erstellen von React App zu erstellen.
set CI = true && npm test set CI = true && npm run build(Anmerkung: Der Mangel an Whitespace ist beabsichtigt.)
( $ env: CI = $true ) -and (npm test)( $ env: CI = $true ) -and (npm run build)CI=true npm test CI=true npm run buildDer Testbefehl zwingt den Scherz, Tests einmal auszuführen, anstatt den Beobachter zu starten.
Wenn Sie dies häufig in der Entwicklung tun, stellen Sie bitte ein Problem ein, um uns über Ihren Anwendungsfall zu informieren, da wir Beobachter zur besten Erfahrung machen und offen sind für die Änderung der Arbeit, um mehr Workflows aufzunehmen.
Der Befehl Build prüft nach Linterwarnungen und fällt fehl, wenn eine gefunden wird.
Standardmäßig sieht das package.json des generierten Projekts so aus:
"scripts" : {
"start" : "react-scripts start" ,
"build" : "react-scripts build" ,
"test" : "react-scripts test --env=jsdom" Wenn Sie wissen, dass keiner Ihrer Tests von JSDOM abhängt, können Sie sicher entfernen --env=jsdom , und Ihre Tests werden schneller ausgeführt:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
- "test": "react-scripts test --env=jsdom"
+ "test": "react-scripts test"Um Ihnen zu helfen, sich zu entscheiden, finden Sie hier eine Liste von APIs, die JSDOM benötigen :
window und documentReactDOM.render()TestUtils.renderIntoDocument() (eine Verknüpfung für die obigen)mount() im EnzymIm Gegensatz dazu wird JSDOM für die folgenden APIs nicht benötigt :
TestUtils.createRenderer() (flaches Rendering)shallow() im EnzymSchließlich wird JSDOM auch für Snapshot -Tests nicht benötigt.
Snapshot -Tests ist eine Funktion von Scherz, die automatisch Text -Snapshots Ihrer Komponenten generiert und auf der Festplatte speichert. Wenn sich die Benutzeroberfläche ändert, werden Sie benachrichtigt, ohne die Ausgabe von Komponenten zu manuell zu schreiben.
Wenn Sie Visual Studio-Code verwenden, gibt es eine Scherzerweiterung, die mit der Erstellung von React-App aus dem Feld funktioniert. , starten und stoppen den Beobachter automatisch und bieten einen Klick-Snapshot-Updates an.
Es gibt verschiedene Möglichkeiten, einen Debugger für Ihre Scherztests einzurichten.
HINWEIS: Debugging -Tests erfordern einen Knoten 8 oder höher.
Fügen Sie Folgendes in den Abschnitt scripts im package.json Ihres Projekts hinzu.json
"scripts" : {
"test:debug" : " react-scripts --inspect-brk test --runInBand --env=jsdom "
} debugger;
$ npm run test:debugDadurch werden Ihre Scherztests ausgeführt, aber vor der Ausführung eine Pause, damit ein Debugger den Prozess anhängen kann.
Öffnen Sie Folgendes in Chrome
about:inspect
Nach dem inspect dieses Links werden die Chrome -Entwickler -Tools angezeigt. Klicken Sie vor der Ausführung, bevor Sie Zeit haben). Sie können den aktuellen Umfang untersuchen und anrufen Stapel.
HINWEIS: Die Option -Runinband -CLI -Option stellt sicher, dass der Scherz Test im selben Prozess ausführt, anstatt Prozesse für einzelne Tests zu laken.
Debugging -Scherztests werden für den Visual Studio -Code außerhalb der Box unterstützt.
Verwenden Sie die folgende Konfigurationsdatei launch.json :
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--env=jsdom"
],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
Normalerweise haben Sie in einer App viele UI -Komponenten, und jeder von ihnen hat viele verschiedene Zustände.
Normalerweise ist es schwierig, diese Zustände zu sehen, ohne eine Beispiel -App oder einige Beispiele auszuführen.
React App enthält nicht standardmäßig Tools, aber Sie können Ihr Projekt problemlos für React (Quelle) oder React StyleGeidist (Quelle) hinzufügen. Staaten isoliert aus Ihrer App .
Auf diese Weise können Sie auch Ihr Storybook- oder Style -Handbuch bereitstellen.
Storybook ist eine Entwicklungsumgebung für React UI -Komponenten.
Installieren Sie zunächst das folgende NPM -Paket weltweit:
npm install -g @storybook/cliFühren Sie dann den folgenden Befehl im Verzeichnis Ihrer App aus:
getstorybookBefolgen Sie danach den Anweisungen auf dem Bildschirm.
Erfahren Sie mehr über React Storybook:
StyleGuidist kombiniert einen Style Guide, bei dem alle Ihre Komponenten auf einer einzigen Seite mit ihren Props -Dokumentation und -nutzungsbeispielen mit einer Umgebung zum isolierten Entwicklungskomponenten präsentiert werden. als Live -bearbeitbarer Spielplatz gerendert.
Installieren Sie zuerst StyleGuidist:
npm install --save react-styleguidist Alternativ können Sie yarn verwenden:
yarn add react-styleguidist Fügen Sie diese Skripte dann Ihrem package.json hinzu. JSON:
"scripts": {
+ "styleguide": "styleguidist server",
+ "styleguide:build": "styleguidist build",
"start": "react-scripts start",Führen Sie dann den folgenden Befehl im Verzeichnis Ihrer App aus:
npm run styleguideBefolgen Sie danach den Anweisungen auf dem Bildschirm.
Erfahren Sie mehr über React StyleGuidist:
React App erstellen keine integrierte Funktionen, um eine Komponente für NPM zu veröffentlichen. und dann mit einem Tool wie NWB, um es auf die Veröffentlichung vorzubereiten.
Standardmäßig ist der Produktionsaufbau eine voll funktionsfähige, offline-First-Progressive-Web-App.
Progressive Web -Apps sind schneller und zuverlässiger als herkömmliche Webseiten und bieten ein ansprechendes mobiles Erlebnis:
Das sw-precache-webpack-plugin ist in die Produktionskonfiguration integriert und erstellt eine Serviceleistungsdatei, die alle Ihre lokalen Vermögenswerte automatisch vorhaut und sie auf dem Laufenden halten, wenn Sie Aktualisierungen bereitstellen. Eine Cache-First-Strategie zum Umgang mit allen Anfragen nach lokalen Vermögenswerten, einschließlich der anfänglichen HTML, und sicherzustellen, dass Ihre Web-App auch in einem langsamen oder unzuverlässigen Netzwerk zuverlässig ist.
Wenn Sie es vor Ihrer ersten Produktionsbereitstellung vor Ihrer ersten Produktionsbereitstellung nicht aktivieren möchten, entfernen Sie den Anruf an registerServiceWorker() von src/index.js .
Wenn Sie den Dienstangestellten in Ihrer Produktionsbereitstellung zuvor aktiviert hatten und entschieden haben, dass Sie sie für alle Ihre vorhandenen Benutzer deaktivieren möchten, können Sie den Anruf an registerServiceWorker() in src/index.js zuerst austauschen, indem Sie den Import des Service Worker ändern :
import { unregister } from './registerServiceWorker' ; und rufen Sie stattdessen unregister() /service-worker.js unregister() Cache zu ungültig gemacht werden.
Servicemitarbeiter benötigen HTTPS, um die lokalen Tests zu erleichtern, diese Richtlinien nicht für localhost .
Servicearbeiter werden derzeit nicht in allen Webbrowsern unterstützt.
Der Servicearbeiter ist nur in der Produktionsumgebung aktiviert, z. B. die Ausgabe des npm run build . Fügen Sie nicht die neuesten Änderungen hinzu, die Sie vor Ort vorgenommen haben.
Wenn Sie Ihren Offline-First-Service-Mitarbeiter lokal testen müssen , erstellen Sie die Anwendung (mit npm run build ) und führen Sie nach dem Ausführen des Build create-react-app Skripts einen einfachen HTTP-Server aus. Um Ihre Produktion vor Ort zu testen , und die Bereitstellungsanweisungen haben Anweisungen für die Verwendung anderer Methoden.
Wenn möglich, konfigurieren Sie Ihre Produktionsumgebung, um den generierten service-worker.js mit deaktiviertem HTTP-Caching zu bedienen. Wenn Sie Ihre Produktionsseite besuchen und dann erneut vor service-worker.js von Ihrem HTTP-Cache abgelaufen sind, erhalten Sie weiterhin die zuvor zwischengespeicherten Vermögenswerte vom Servicearbeiter. Einsatz, Durch die Durchführung eines Shift-Refresh wird der Servicearbeiter vorübergehend deaktiviert und alle Vermögenswerte aus dem Netzwerk abgerufen.
Benutzer sind nicht immer mit Offline-First-Web-Apps vertraut. Der Service Worker hat die neuesten Updates abgerufen, die beim nächsten Laden der Seite verfügbar sein werden. Ein Ausgangspunkt, Sie können nutzen Die Logik, die in src/registerServiceWorker.js enthalten ist, die demonstriert, welche Service Worker Lifecycle -Ereignisse anhören sollen, um jedes Szenario zu erkennen, und welche standardmäßig geeignete Nachrichten an der JavaScript -Konsole protokolliert werden.
Standardmäßig wird die generierte Service-Worker-Datei keinen Cross-Origin-Datenverkehr wie HTTP-API-Anforderungen, Bilder oder Einbettungen aus einer anderen Domain abfangen. eject und konfigurieren Sie dann die Option runtimeCaching im Abschnitt SWPrecacheWebpackPlugin von webpack.config.prod.js .
Die Standardkonfiguration enthält ein Web -App -Manifest bei public/manifest.json , das Sie mit Details an Ihre Webanwendung anpassen können.
Wenn ein Benutzer mit Chrome oder Firefox auf Android eine Web -App zu seinem Homescreen hinzufügt, bestimmt die Metadaten in manifest.json welche Symbole, Namen und Markenfarben verwendet werden, wenn die Web -App angezeigt wird. Was jedes Feld bedeutet und wie sich Ihre Anpassungen auf die Erfahrung Ihrer Benutzer auswirken.
Source Map Explorer JavaScript -Bündel mit den Quellkarten.
Um ein Quellkarten -Explorer zu einem Projekt für Erstellen von React App hinzuzufügen, befolgen Sie diese Schritte:
npm install --save source-map-explorer Alternativ können Sie yarn verwenden:
yarn add source-map-explorer Fügen Sie dann in package.json die folgende Zeile zu scripts hinzu:
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",Wenn Sie dann das Bundle analysieren, führen Sie den Produktionsaufbau aus und führen Sie das Analyse -Skript aus.
npm run build
npm run analyze
npm run build erstellt index.html build -Verzeichnis mit einem Produktionsaufbau Ihrer App /static/js/main.<hash>.js werden mit dem Inhalt der Datei /static/js/main.<hash>.js serviert.
Für Umgebungen, die mit dem Knoten mit Knoten mit diesem einfachsten umgehen, besteht darin, den Servieren zu installieren und den Rest zu erledigen:
npm install -g serve
serve -s build Der letzte oben gezeigte Befehl dient Ihrer statischen Site auf dem Port 5000. Wie bei vielen internen Einstellungen von Serve kann der Port mit den Flags -p oder --port -Flaggen angepasst werden.
Führen Sie diesen Befehl aus, um eine vollständige Liste der verfügbaren Optionen zu erhalten:
serve -hSie benötigen nicht unbedingt einen statischen Server, um ein Produkt für das Erstellen von React App in der Produktion auszuführen.
Hier ist ein programmatisches Beispiel mit Knoten und Express:
const express = require ( 'express' ) ;
const path = require ( 'path' ) ;
const app = express ( ) ;
app . use ( express . static ( path . join ( __dirname , 'build' ) ) ) ;
app . get ( '/' , function ( req , res ) {
res . sendFile ( path . join ( __dirname , 'build' , 'index.html' ) ) ;
} ) ;
app . listen ( 9000 ) ;Die Auswahl Ihrer Serversoftware ist auch nicht wichtig.
Der build -Ordner mit statischen Vermögenswerten ist die einzige Ausgabe, die durch Erstellen von React App erzeugt wird.
Dies ist jedoch nicht ausreichend /todos/42 wenn Sie das Client-Side-Routing verwenden.
Wenn Sie Router verwenden /todos/42 die die HTML5 pushState -Historie -API unter der Haube verwenden (zum Beispiel React Router mit browserHistory ), werden viele statische Dateiserver beispielsweise fehlschlagen. Der Server reagiert auf localhost:3000/todos/42 ordnungsgemäß, aber ein Express, der einen Produktionsbau wie oben serviert, wird dies nicht tun.
This is because when there is a fresh page load for a /todos/42 , the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html . For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
- app.get('/', function (req, res) {
+ app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
}); If you're using Apache HTTP Server, you need to create a .htaccess file in the public folder that looks like this:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
It will get copied to the build folder when you run npm run build .
If you're using Apache Tomcat, you need to follow this Stack Overflow answer.
Now requests to /todos/42 will be handled correctly both in development and in production.
On a production build, and in a browser that supports service workers, the service worker will automatically handle all navigation requests, like for /todos/42 , by serving the cached copy of your index.html . This service worker navigation routing can be configured or disabled by eject ing and then modifying the navigateFallback and navigateFallbackWhitelist options of the SWPreachePlugin configuration.
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html . This may not work for client-side routers which expect the app to be served from / . Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url" : "." , By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json , for example:
"homepage" : "http://mywebsite.com/relativepath" ,This will let Create React App correctly infer the root path to use in the generated HTML file.
Note : If you are using react-router@^4 , you can root <Link> s using the basename prop on any <Router> .
More information here.
Zum Beispiel:
< BrowserRouter basename = "/calendar" />
< Link to = "/today" / > // renders <a href="/calendar/today"> Note: this feature is available with
[email protected]and higher.
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json :
"homepage" : "." , This will make sure that all the asset paths are relative to index.html . You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
See this blog post on how to deploy your React app to Microsoft Azure.
See this blog post or this repo for a way to use automatic deployment to Azure App Service.
Install the Firebase CLI if you haven't already by running npm install -g firebase-tools . Sign up for a Firebase account and create a new project. Run firebase login and login with your previous created Firebase account.
Then run the firebase init command from your project's root. You need to choose the Hosting: Configure and deploy Firebase Hosting sites and choose the Firebase project you created in the previous step. You will need to agree with database.rules.json being created, choose build as the public directory, and also agree to Configure as a single-page app by replying with y .
=== Project Setup
First, let ' s associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we ' ll just set up a default project.
? What Firebase project do you want to associate as default ? Example app (example-app-fd690)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules ? database.rules.json
✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build ' s output directory.
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔ Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete! IMPORTANT: you need to set proper HTTP caching headers for service-worker.js file in firebase.json file or you will not be able to see changes after first deployment (issue #2440). It should be added inside "hosting" key like nächste:
{
"hosting": {
...
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
...
Now, after you create a production build with npm run build , you can deploy it by running firebase deploy .
=== Deploying to ' example-app-fd690 ' ...
i deploying database, hosting
✔ database: rules ready to deploy.
i hosting: preparing build directory for upload...
Uploading: [ ============================== ] 75%✔ hosting: build folder uploaded successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...
✔ Deploy complete !
Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
Hosting URL: https://example-app-fd690.firebaseapp.comFor more information see Add Firebase to your JavaScript Project.
Note: this feature is available with
[email protected]and higher.
homepage to package.json The step below is important!
If you skip it, your app will not deploy correctly.
Open your package.json and add a homepage field for your project:
"homepage" : " https://myusername.github.io/my-app " ,or for a GitHub user page:
"homepage" : " https://myusername.github.io " , Create React App uses the homepage field to determine the root URL in the built HTML file.
gh-pages and add deploy to scripts in package.json Now, whenever you run npm run build , you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at https://myusername.github.io/my-app, run:
npm install --save gh-pages Alternatively you may use yarn :
yarn add gh-pages Add the following scripts in your package.json :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", The predeploy script will run automatically before deploy is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two additional modifications:
package.json scripts to push deployments to master : "scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build", npm run deployThen run:
npm run deploygh-pages Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:
You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.
GitHub Pages doesn't support routers that use the HTML5 pushState history API under the hood (for example, React Router using browserHistory ). This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /todos/42 . If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ). Read more about different history implementations in React Router.index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you'll need to add code handling the redirect parameter to index.html . You can find a detailed explanation of this technique in this guide. Use the Heroku Buildpack for Create React App.
You can find instructions in Deploying React with Zero Configuration.
Sometimes npm run build works locally but fails during deploy via Heroku. Following are the most common cases.
If you get something like this:
remote: Failed to create a production build. Reason:
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
MyDirectory in /tmp/build_1234/src
It means you need to ensure that the lettercase of the file or directory you import matches the one you see on your filesystem or on GitHub.
This is important because Linux (the operating system used by Heroku) is case sensitive. So MyDirectory and mydirectory are two distinct directories and thus, even though the project builds locally, the difference in case breaks the import statements on Heroku remotes.
If you exclude or ignore necessary files from the package you will see a error similar this one:
remote: Could not find a required file.
remote: Name: `index.html`
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
In this case, ensure that the file is there with the proper lettercase and that's not ignored on your local .gitignore or ~/.gitignore_global .
To do a manual deploy to Netlify's CDN:
npm install netlify-cli -g
netlify deploy Choose build as the path to deploy.
To setup continuous delivery:
With this setup Netlify will build and deploy when you push to git or open a pull request:
yarn build as the build command and build as the publish directoryDeploy siteSupport for client-side routing:
To support pushState , make sure to create a public/_redirects file with the following rewrite rules:
/* /index.html 200
When you build the project, Create React App will place the public folder contents into the build output.
Now offers a zero-configuration single-command deployment. You can use now to deploy your app for free.
Install the now command-line tool either via the recommended desktop tool or via node with npm install -g now .
Build your app by running npm run build .
Move into the build directory by running cd build .
Run now --name your-project-name from within the build directory. You will see a now.sh URL in your output like this:
> Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
Paste that URL into your browser when the build is complete, and you will see your deployed app.
Details are available in this article.
See this blog post on how to deploy your React app to Amazon Web Services S3 and CloudFront.
Install the Surge CLI if you haven't already by running npm install -g surge . Run the surge command and log in you or create a new account.
When asked about the project path, make sure to specify the build folder, for example:
project path: /path/to/project/build Note that in order to support routers that use HTML5 pushState API, you may want to rename the index.html in your build folder to 200.html before deploying to Surge. This ensures that every URL falls back to that file.
You can adjust various development and production settings by setting environment variables in your shell or with .env.
| Variable | Entwicklung | Produktion | Verwendung |
|---|---|---|---|
| BROWSER | ✅ | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to npm start will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the .js extension. | |
| GASTGEBER | ✅ | By default, the development web server binds to localhost . You may use this variable to specify a different host. | |
| HAFEN | ✅ | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | |
| HTTPS | ✅ | When set to true , Create React App will run the development server in https mode. | |
| PUBLIC_URL | ✅ | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in package.json ( homepage ). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | |
| CI | ? | ✅ | When set to true , Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can send a pull request to detect your editor of choice. Setting this environment variable overrides the automatic detection. If you do it, make sure your systems PATH environment variable points to your editor's bin folder. You can also set it to none to disable it vollständig. | |
| CHOKIDAR_USEPOLLING | ✅ | When set to true , the watcher runs in polling mode, as necessary inside a VM. Use this option if npm start isn't detecting changes. | |
| GENERATE_SOURCEMAP | ✅ | When set to false , source maps are not generated for a production build. This solves OOM issues on some smaller machines. | |
| NODE_PATH | ✅ | ✅ | Same as NODE_PATH in Node.js, but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting NODE_PATH=src . |
npm start doesn't detect changes When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn't happen, try one of the following workarounds:
index.js and you're referencing it by the folder name, you need to restart the watcher due to a Webpack bug..env file in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start , the watcher uses the polling mode, as necessary inside a VM.If none of these solutions help please leave a comment in this thread.
npm test hangs on macOS Sierra If you run npm test and the console gets stuck after printing react-scripts test --env=jsdom to the console there might be a problem with your Watchman installation as described in facebookincubator/create-react-app#713.
We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:
It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:
watchman shutdown-server
brew update
brew reinstall watchman
You can find other installation methods on the Watchman documentation page.
If this still doesn't help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist .
There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
npm run build exits too early It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
The build failed because the process exited too early. This probably means the system ran out of memory or someone called
kill -9on the process.
If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you're building on, or build the project locally.
npm run build fails on HerokuThis may be a problem with case sensitive filenames. Please refer to this section.
If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.
To add a specific Moment.js locale to your bundle, you need to import it explicitly.
Zum Beispiel:
import moment from 'moment' ;
import 'moment/locale/fr' ; If import multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:
import moment from 'moment' ;
import 'moment/locale/fr' ;
import 'moment/locale/es' ;
// ...
moment . locale ( 'fr' ) ;This will only work for locales that have been explicitly imported before.
npm run build kann nicht minimiert werdenSome third-party packages don't compile their code to ES5 before publishing to npm. This often causes problems in the ecosystem because neither browsers (except for most modern versions) nor some tools currently support all ES6 features. We recommend to publish code on npm as ES5 at least for a few more years.
module field in package.json . Note that even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers .Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
Ejecting lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to fork react-scripts and any other packages you need. This article dives into how to do it in depth. You can find more discussion in this issue.
If you have ideas for more “How To” recipes that should be on this page, let us know or contribute some!
