react chat
1.0.0
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 innerhalb von src Unterverzeichnisse erstellen. Für schnellere Neuerstellungen werden nur Dateien in 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 einseitiger Vorgang. Sobald Sie eject , können Sie nicht mehr zurück!
Wenn Sie mit dem Build-Tool und den Konfigurationsoptionen nicht zufrieden sind, können Sie es jederzeit eject . Dieser Befehl entfernt die einzelne Build-Abhängigkeit aus Ihrem Projekt.
Stattdessen werden alle Konfigurationsdateien und transitiven Abhängigkeiten (Webpack, Babel, ESLint usw.) direkt in Ihr Projekt kopiert, sodass Sie die volle Kontrolle darüber haben. Alle Befehle außer eject funktionieren weiterhin, verweisen jedoch auf die kopierten Skripte, sodass Sie sie anpassen können. An diesem Punkt sind Sie auf sich allein gestellt.
Sie müssen niemals eject verwenden. Der kuratierte Funktionsumfang eignet sich für kleine und mittlere Bereitstellungen, und Sie sollten sich nicht verpflichtet fühlen, diese Funktion zu verwenden. Wir verstehen jedoch, dass dieses Tool nicht nützlich wäre, wenn Sie es nicht anpassen könnten, 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.
Obwohl wir die Verwendung experimenteller Vorschläge mit einiger Vorsicht empfehlen, verwendet Facebook diese Funktionen im Produktcode häufig. 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, worauf eine bestimmte Syntax kompiliert werden kann.
Um die Syntaxhervorhebung in Ihrem bevorzugten Texteditor zu konfigurieren, rufen Sie die entsprechende Babel-Dokumentationsseite auf und befolgen Sie die Anweisungen. Einige der beliebtesten 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 werden zum Flusen nicht benötigt. Sie sollten die Linter-Ausgabe direkt in Ihrem Terminal sowie in der Browserkonsole sehen. Wenn Sie jedoch möchten, dass die Lint-Ergebnisse direkt in Ihrem Editor angezeigt werden, können Sie einige zusätzliche Schritte ausführen.
Sie müssen zunächst ein ESLint-Plugin für Ihren Editor installieren. Fügen Sie dann eine Datei mit dem Namen .eslintrc zum Projektstamm hinzu:
{
"extends" : "react-app"
}Jetzt sollte Ihr Redakteur die Linting-Warnungen melden.
Beachten Sie, dass sich diese Änderungen nur auf die Editor-Integration auswirken , selbst wenn Sie Ihre .eslintrc Datei weiter bearbeiten. Sie haben keinen Einfluss auf die Lint-Ausgabe im Terminal und im Browser. Dies liegt daran, dass Create React App absichtlich einen minimalen Satz an Regeln bereitstellt, die häufige Fehler finden.
Wenn Sie einen Codierungsstil für Ihr Projekt erzwingen möchten, sollten Sie die Verwendung von Prettier anstelle von ESLint-Stilregeln in Betracht ziehen.
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, bei dem der Kontextwechsel minimal ist, da Sie nicht zwischen 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 aus.
Haben Sie Probleme mit dem VS-Code-Debugging? Bitte sehen Sie sich die Anleitung zur Fehlerbehebung an.
Sie müssten die Chrome-Erweiterung WebStorm und JetBrains IDE Support installiert haben.
Wählen Sie im WebStorm-Menü Run die Edit Configurations... . Klicken Sie dann auf + und wählen Sie JavaScript Debug aus. 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. Schauen Sie sich auch diese Seite an, um es in Aktion zu sehen.
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. Sehen Sie sich diesen Blog-Beitrag über lint-staged an, um mehr darüber zu erfahren.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 nun 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, um Ihr gesamtes Projekt zum ersten Mal zu formatieren.
Als nächstes möchten Sie Prettier vielleicht in Ihren Lieblingseditor 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 den HTML-Code zu berühren.
Wenn Sie den Seitentitel basierend auf dem Inhalt dynamisch aktualisieren müssen, können Sie die Browser-API document.title 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 das hier behandelte JavaScript-Bundle lädt.
Das generierte Projekt enthält React und ReactDOM als Abhängigkeiten. Es enthält außerdem 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. Es 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 verwenden und import Button from './Button' .
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() . Sein Vorschlag befindet sich in Stufe 3. Die funktionsähnliche Form import() nimmt 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 damit. 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. Über die Vorteile dieses Ansatzes können Sie hier lesen. Sie sollten sich jedoch darüber im Klaren sein, dass Ihr Code dadurch weniger auf andere Build-Tools und Umgebungen als Webpack portierbar ist.
Wenn Sie in der Entwicklung Abhängigkeiten auf diese Weise ausdrücken, können Ihre Stile im Handumdrehen neu geladen werden, während Sie sie bearbeiten. In der Produktion werden alle CSS-Dateien in der Build-Ausgabe zu einer einzigen minimierten .css Datei verkettet.
Wenn Sie Bedenken haben, Webpack-spezifische Semantik zu verwenden, können Sie Ihr gesamtes CSS direkt in src/index.css einfügen. Es würde immer noch aus src/index.js importiert, aber Sie können diesen Import jederzeit entfernen, wenn Sie später zu einem anderen Build-Tool migrieren.
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 <Button> -Komponente mit eigenen .Button Stilen zu erstellen, die sowohl <AcceptButton> als auch <RejectButton> rendern können (aber nicht). erben).
Das Befolgen dieser Regel macht CSS-Präprozessoren oft weniger nützlich, da Funktionen wie Mixins und Verschachtelung durch Komponentenzusammensetzung ersetzt werden. Sie können jedoch einen CSS-Präprozessor integrieren, wenn Sie dies für wertvoll halten. In dieser exemplarischen Vorgehensweise verwenden wir Sass, Sie können jedoch auch Less oder eine andere Alternative verwenden.
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 die folgenden Zeilen zu scripts 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 Beobachter findet jede Sass-Datei in src Unterverzeichnissen und erstellt daneben eine entsprechende CSS-Datei, in unserem Fall überschreibt er src/App.css . Da src/App.js weiterhin src/App.css importiert, werden die Stile Teil Ihrer Anwendung. Sie können jetzt src/App.scss bearbeiten und src/App.css wird neu generiert.
Um Variablen zwischen Sass-Dateien auszutauschen, können Sie Sass-Importe verwenden. Beispielsweise könnten src/App.scss und andere Komponentenstildateien @import "./shared.scss"; mit Variablendefinitionen.
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 halten.
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. Mit dem Operator && können Sie zwei Skripte nacheinander ausführen. Da es jedoch keine plattformübergreifende Möglichkeit gibt, zwei Skripte parallel auszuführen, werden wir hierfür ein Paket installieren:
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. Im Gegensatz zu CSS-Importen erhalten Sie beim Importieren einer Datei einen Zeichenfolgenwert. Dieser Wert ist der endgültige Pfad, auf den Sie in Ihrem Code verweisen können, z. B. als src Attribut eines Bildes oder als href eines Links zu einer PDF.
Um die Anzahl der Anfragen an den Server zu reduzieren, wird beim Importieren von Bildern, die weniger als 10.000 Byte groß sind, ein Daten-URI anstelle eines Pfads zurückgegeben. Dies gilt für die folgenden Dateierweiterungen: bmp, gif, jpg, jpeg und png. SVG-Dateien sind aufgrund von #1153 ausgeschlossen.
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 ein Kompilierungsfehler angezeigt, genau wie beim Importieren eines nicht vorhandenen JavaScript-Moduls. Die endgültigen Dateinamen im kompilierten Bundle werden von Webpack aus Inhalts-Hashes generiert. Wenn sich der Dateiinhalt in Zukunft ändert, wird Webpack ihm in der Produktion einen anderen Namen geben, sodass Sie sich keine Gedanken über die langfristige Zwischenspeicherung von Assets machen müssen.
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 anpassen können, um beispielsweise den Seitentitel festzulegen. Das <script> -Tag mit dem kompilierten Code wird 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 stattdessen in JavaScript-Dateien zu import . Sehen Sie sich beispielsweise die Abschnitte zum Hinzufügen eines Stylesheets und zum Hinzufügen von Bildern und Schriftarten an. Dieser Mechanismus bietet eine Reihe von Vorteilen:
Es gibt jedoch eine Notluke , über die Sie ein Asset außerhalb des Modulsystems hinzufügen können.
Wenn Sie eine Datei in den public Ordner legen, wird sie von Webpack nicht verarbeitet. Stattdessen wird es 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 wie folgt verwenden:
< link rel =" shortcut icon " href =" %PUBLIC_URL%/favicon.ico " > Nur auf Dateien im public Ordner kann über das Präfix %PUBLIC_URL% zugegriffen werden. 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 einzuschließen. Beachten Sie, dass Sie, wenn Sie ein <script> hinzufügen, das globale Variablen deklariert, auch den nächsten Abschnitt über 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, es handelt sich jedoch um eine beliebte Bibliothek für die Integration von Bootstrap in React-Apps. Bei Bedarf können Sie es 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 Render-Methode 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 ein besser integriertes Erlebnis können Sie optional eine IDE wie Nuclide verwenden. Wir planen, es in Zukunft noch stärker in die Create React App 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 Build-Zeit 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 auf dem Server laden und Platzhalter zur Laufzeit ersetzen, genau 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 offengelegt wird, der denselben Namen haben könnte. Wenn Sie Umgebungsvariablen ändern, müssen Sie den Entwicklungsserver neu starten, sofern er ausgeführt wird.
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 es aus process.env.NODE_ENV lesen. Wenn Sie npm start ausführen, ist es immer gleich 'development' , wenn Sie npm test ausführen, ist es immer gleich '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. Dadurch wird verhindert, dass Entwickler versehentlich einen langsamen Entwicklungs-Build in der Produktion bereitstellen.
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.
Zunächst müssen Umgebungsvariablen definiert werden. Angenommen, 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 nutzen zu können, muss er in der Umgebung definiert werden. 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. Zum 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.Die Definition von Umgebungsvariablen kann je nach Betriebssystem unterschiedlich sein. Es ist auch wichtig zu wissen, dass diese Vorgehensweise für die Dauer 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 offengelegt wird, der denselben Namen haben könnte. Wenn Sie Umgebungsvariablen ändern, müssen Sie den Entwicklungsserver neu starten, sofern er ausgeführt wird.
.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 Standardeinstellungen, wenn die Maschine sie nicht explizit festlegt.
Weitere Informationen finden Sie in der DOTENV -Dokumentation.
Hinweis: Wenn Sie Umgebungsvariablen für die Entwicklung definieren, benötigen Ihre CI- und/oder Hosting -Plattform höchstwahrscheinlich ebenfalls definiert. Wenden Sie sich an ihre Dokumentation, wie das geht. Siehe beispielsweise die Dokumentation für Travis CI oder Heroku.
.env expandierende UmgebungsvariablenHinweis: 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 von Daten vor, aber Personen verwenden normalerweise entweder eine Bibliothek wie Axios oder die vom Browser bereitgestellte API fetch() . Die React -App erstellen Sie bequem eine Polyfill für fetch() damit Sie sie verwenden können, ohne sich um den Browserunterstützung zu sorgen.
Die globale fetch -Funktion ermöglicht es einfach, AJAX -Anfragen zu stellen. Es nimmt eine URL als Eingabe auf und gibt ein Promise zurück, das auf ein Response auflöst. Weitere Informationen zum fetch finden Sie hier.
Dieses Projekt enthält auch eine Versprechen -Polyfill, die eine vollständige Implementierung von Versprechen/A+bietet. Ein Versprechen stellt das eventuelle Ergebnis einer asynchronen Operation dar. Weitere Informationen zu Versprechen finden Sie hier und hier. Sowohl Axios als auch fetch() verwenden Versprechen unter der Motorhaube. Sie können auch die async / await -Syntax verwenden, um die Rückrufnistung zu verringern.
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. Hier finden Sie das Begleitgithub -Repository.
Schauen Sie sich dieses Tutorial an. Hier finden Sie das Begleitgithub -Repository.
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 nicht erforderlich. Wenn Sie jedoch über ein solches Setup verfügen , ist es zweckmäßig, Anfragen wie fetch('/api/todos') zu schreiben, ohne sich Gedanken darüber 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.
Denken Sie daran, dass proxy nur auf die Entwicklung auswirkt (mit npm start ), und es liegt an Ihnen, sicherzustellen, dass URLs wie /api/todos auf das Richtige in der Produktion hinweisen. Sie müssen das /api -Präfix nicht verwenden. Jede nicht erkannte Anfrage ohne text/html -Akzeptanzkopf wird in den angegebenen proxy weitergeleitet.
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 Hostprüfungen. Dies ist notwendig, da das Verlassen des Backend für Remote -Hosts Ihren Computer für DNS -Wiederherstellungsangriffe anfällig macht. Das Problem wird in diesem Artikel und in diesem Thema erläutert.
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 weiterhin Probleme haben oder eine exotischere Umgebung wie einen Cloud -Editor verwenden, können Sie die Hostprüfung vollständig umgehen, indem Sie .env.development.local addieren. Beachten Sie, dass dies gefährlich ist und Ihre Maschine der Ausführung von böswilligen Websites der Remotecode aussetzt:
# 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, sind Proxys, keine Ausnahmen. Dies beinhaltet Anfragen für text/html , die die Standard proxy -Option nicht proxy macht.
Wenn Sie mehrere Proxys angeben müssen, können Sie dies tun, indem Sie zusätzliche Einträge angeben. Übereinstimmungen sind reguläre Ausdrücke, sodass Sie einen Regexp verwenden können, um mehrere Pfade zu entsprechen.
{
// ...
"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 ausgeführt haben, den Sie als Proxy -Ziel verwenden können. Socket.io funktioniert nicht mit einem Standard -WebSocket -Server. Erwarten Sie nicht, dass Socket.io mit dem echo -Test von webocket.org funktioniert.
Es gibt eine gute Dokumentation zum Einrichten eines Socket.io -Servers.
Standard -Websockets funktioniert mit einem Standard -WebSocket -Server sowie dem echo -Test von webocket.org. Sie können Bibliotheken wie WS für den Server mit nativen Websockets im Browser verwenden.
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 verlangen der Dev -Server, dass Seiten über HTTPS serviert werden. Ein spezieller Fall, in dem dies nützlich sein könnte, ist die Verwendung der Funktion "Proxy" zu Proxy -Anforderungen an einen API -Server, wenn dieser API -Server selbst HTTPS serviert.
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 erstellen und die aktuelle URL widerspiegeln. Um dies zu lösen, empfehlen wir, Platzhalter in die HTML hinzuzufügen, wie folgt:
<!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 dann unabhängig von der von Ihnen verwendeten Backend index.html in den Speicher lesen und __OG_TITLE__ , __OG_DESCRIPTION__ und alle anderen Platzhalter mit Werten ersetzen, die je nach aktueller URL Werte. Stellen Sie einfach sicher, dass Sie den interpolierten Werten bereinigen und entkommen, damit sie sich in HTML einbetten können!
Wenn Sie einen Knotenserver verwenden, können Sie sogar die Routenübereinstimmungslogik zwischen dem Client und dem Server freigeben. Das Duplizieren ist jedoch auch in einfachen Fällen einwandfrei.
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 relativen Link in Ihrer Anwendung zu generieren. Diese Seiten werden dann nahtlos aktiv oder „hydratisiert“, 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. Es erhöht auch die Wahrscheinlichkeit, dass jede Route Ihrer Bewerbung von Suchmaschinen abgeholt wird.
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 dann __SERVER_DATA__ durch einen JSON von realen Daten ersetzen, bevor Sie die Antwort senden. Der Client -Code kann dann das Fenster lesen. window.SERVER_DATA um ihn zu verwenden. Stellen Sie sicher, dass Sie den JSON sanften, bevor Sie ihn an den Kunden senden, da Ihre App anfällig für XSS -Angriffe ist.
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. Um sich auf diese Integration vorzubereiten, haben wir eine große Überarbeitung des Scherzes durchgeführt. Wenn Sie also vor Jahren schlechte Dinge darüber gehört haben, probieren Sie es noch einmal aus.
Scherz ist ein knotenbasierter Läufer. Dies bedeutet, dass die Tests immer in einer Knotenumgebung und nicht in einem echten Browser durchgeführt werden. Dadurch können wir eine schnelle Iterationsgeschwindigkeit ermöglichen und die Flocken verhindern.
Während der Scherz dank JSDOM Browser -Globalen wie window bietet, sind sie nur Annäherungen an das reale Browserverhalten. Der Scherz soll eher für Unit -Tests Ihrer Logik und Ihrer Komponenten als für DOM -Macken verwendet werden.
Wir empfehlen Ihnen, ein separates Tool für Browser-End-to-End-Tests zu verwenden, wenn Sie diese benötigen. Sie sind jenseits des Rahmens der Create -React -App.
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) neben dem Code zu setzen, den sie testen, damit relative Importe kürzer erscheinen. Wenn App.test.js und App.js beispielsweise im selben Ordner sind, muss der Test nur import App from './App' . Colocation hilft auch dabei, Tests in größeren Projekten schneller zu finden.
Wenn Sie npm test ausführen, startet Scherz im Uhrenmodus. Jedes Mal, wenn Sie eine Datei speichern, werden die Tests erneut durchgeführt, genau wie npm start den Code neu.
Der Beobachter enthält eine interaktive Befehlszeilenschnittstelle mit der Möglichkeit, alle Tests auszuführen oder sich auf ein Suchmuster zu konzentrieren. Es ist so gestaltet, dass Sie es offen halten und schnelle Wiederholungen genießen können. Sie können die Befehle aus dem Hinweis „Watch Nutzung“ lernen, dass der Beobachter nach jedem Lauf druckt:
Wenn Sie npm test ausführen, werden standardmäßig der Scherz nur die seit dem letzten Commit geänderten Tests ausführen. Dies ist eine Optimierung, damit Ihre Tests unabhängig davon, wie viele Tests Sie durchgeführt werden, schnell ausgeführt werden. Es wird jedoch davon ausgegangen, dass Sie den Code, der die Tests nicht besteht, nicht oft begehen.
Scherz wird immer ausdrücklich erwähnen, dass nur Tests im Zusammenhang mit den seit dem letzten Komitee geänderten Dateien durchgeführt wurden. Sie können auch a im Uhrenmodus drücken, um Scherz zu zwingen, alle Tests durchzufü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.
Um Tests zu erstellen, fügen Sie it() oder test() ) Blöcke mit dem Namen des Tests und seinem Code hinzu. Sie können sie optional in describe() Blöcken für die logische Gruppierung einwickeln, dies ist jedoch weder erforderlich noch empfohlen.
JEST bietet eine integrierte expect() globale Funktion für die Erstellung von Behauptungen. Ein grundlegender Test könnte so aussehen:
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. Sie reichen von einem „Rauchtest“, der überprüft, dass eine Komponente ohne Werfen, bis hin zu einem flachen Rendering und Testen des Ausgangs, bis hin zu vollem Rendern und Testen der Komponentenlebenszyklus und Zustandsänderungen.
Unterschiedliche Projekte wählen unterschiedliche Tests für Tests, basierend darauf, wie sich Komponenten ändern und wie viel Logik sie enthalten. Wenn Sie sich noch nicht für eine Teststrategie entschieden haben, empfehlen wir Ihnen, einfache Rauchtests für Ihre Komponenten zu erstellen:
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 Renders nicht geworfen hat. Tests wie diese bieten mit sehr geringen Anstrengungen einen großen Wert, sodass sie als Ausgangspunkt großartig sind. Dies ist der Test, den Sie in src/App.test.js finden.
Wenn Sie auf Fehler stoßen, die durch das Ändern von Komponenten verursacht werden, erhalten Sie einen tieferen Einblick in die Teile von ihnen, die es wert sind, in Ihrer Anwendung getestet zu werden. Dies könnte ein guter Zeitpunkt sein, um spezifischere Tests einzuführen, die eine bestimmte erwartete Ausgabe oder das erwartete Ausgang oder das Verhalten beheben.
Wenn Sie Komponenten isoliert von den von ihnen rendernden untergeordneten Komponenten testen möchten, empfehlen wir die Verwendung von shallow() Rendern von API von Enzym. Um es zu installieren, führen Sie aus:
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 Enzym zusammen mit einem Adapter installieren, der der Version von React, die Sie verwenden, entspricht. (Die obigen Beispiele verwenden den Adapter für React 16.)
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: Denken Sie daran, dass die resultierende
package.json-Datei, wenn Sie sich vor dem Erstellensrc/setupTests.js"auszuwerfen", keine Verweise darauf enthalten. Lesen Sie hier, um zu erfahren, wie Sie dies nach dem Auswerfen hinzufügen.
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 zum vorherigen Rauchtest unter Verwendung von ReactDOM.render() rendert dieser Test nur <App> und geht nicht tiefer. Auch wenn <App> selbst eine <Button> die wirkt,, wird dieser Test bestanden. Flaches Rendering eignet sich hervorragend für isolierte Unit -Tests. Möglicherweise möchten Sie jedoch einige vollständige Rendering -Tests erstellen, um sicherzustellen, dass die Komponenten korrekt integriert werden. Das Enzym unterstützt das vollständige Rendering mit mount() und Sie können es auch für Testzustandsänderungen und den Komponentenlebenszyklus verwenden.
Sie können die Enzymdokumentation für weitere Testtechniken lesen. Die Enzym-Dokumentation verwendet Chai und Sinon für Behauptungen, aber Sie müssen sie nicht verwenden, da der jest.fn() expect() wird.
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 hinaus finden Sie möglicherweise HERZYME Hilfreich, um Ihre Tests mit lesbaren Streichern zu vereinfachen. Das obige contains Code kann einfacher mit Scherz-Enzym geschrieben werden.
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 Ihnen, expect() für Behauptungen und jest.fn() für Spione zu verwenden. Wenn Sie Probleme mit ihnen haben, stellen Sie diese bitte gegen Scherz ein und wir werden sie beheben. Wir beabsichtigen, sie weiter für Reaktionen zu machen, um beispielsweise die Elemente von React-Elementen als JSX zu unterstützen.
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 vor dem Ausführen Ihrer Tests nur ein globales Setup benötigen, fügen Sie Ihrem Projekt eine src/setupTests.js hinzu. Es wird automatisch ausgeführt, bevor Ihre Tests ausgeführt werden.
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 den Beobachter mit interaktiver CLI aus. Sie können es jedoch zwingen, Tests einmal auszuführen und den Prozess zu beenden, indem Sie eine Umgebungsvariable namens CI festlegen.
Beim Erstellen eines Aufbaus Ihrer Anwendung mit npm run build von Stoffen standardmäßig nicht überprüft. Wie bei npm test können Sie den Build erzwingen, um eine Warnwarnprüfung durchzuführen, indem Sie die Umgebungsvariable CI festlegen. Wenn Warnungen auftreten, schlägt der Build fehl.
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 UI -Ausgabe ändert, werden Sie benachrichtigt, ohne manuell Behauptungen über die Komponentenausgabe zu schreiben. Lesen Sie mehr über Snapshot -Tests.
Wenn Sie Visual Studio -Code verwenden, gibt es eine Scherzerweiterung, die mit der Erstellung von React App Out of the Box funktioniert. Dies bietet viele iDE-ähnliche Funktionen bei der Verwendung eines Texteditors: Zeigt den Status eines Testlaufs mit potenziellen Fehlmeldungen inline, starten und stoppt den Beobachter automatisch und bietet einen Klick-Snapshot-Updates an.
Es gibt verschiedene Möglichkeiten, einen Debugger für Ihre Scherztests einzurichten. Wir behandeln Debugging im Chrome- und Visual Studio -Code.
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 "
} Ort debugger; Aussagen in jedem Test und Lauf:
$ 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 Öffnen dieses Links werden die Chrome -Entwickler -Tools angezeigt. Wählen Sie in Ihrem Prozess inspect und ein Haltepunkt wird in der ersten Zeile des React -Skripts festgelegt (dies wird einfach Zeit, um Ihnen Zeit zu geben, die Entwickler -Tools zu öffnen und zu verhindern, dass Scherze ausführen, bevor Sie Zeit dafür haben). Klicken Sie auf die Schaltfläche, die wie eine "Play" -Taste in der oberen rechten Seite des Bildschirms aussieht, um die Ausführung fortzusetzen. Wenn der Scherz den Test ausführt, der die Debugger -Erklärung enthält, wird die Ausführung innehalten und Sie können den aktuellen Umfang und den Anrufstack untersuchen.
HINWEIS: Die Option -Runinband CLI -Option stellt sicher, dass der Scherz Test im selben Prozess und nicht laichen Prozesse für einzelne Tests ausführt. Normalerweise ist der Scherz parallelisiert, dass die Tests über Prozesse hinweg laufen, aber es ist schwierig, viele Prozesse gleichzeitig zu debuggen.
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. Beispielsweise könnte eine einfache Tastekomponente folgende Zustände haben:
Normalerweise ist es schwierig, diese Zustände zu sehen, ohne eine Beispiel -App oder einige Beispiele auszuführen.
Die React -App erstellen, enthält standardmäßig keine Tools dafür. Sie können Ihrem Projekt jedoch problemlos ein Storybook für React (Source) oder React StyleGuidist (Quelle) hinzufügen. Dies sind Tools von Drittanbietern, mit denen Sie Komponenten entwickeln und alle ihre Zustände isoliert von Ihrer App sehen können .
Sie können auch Ihr Storybook- oder Style -Handbuch als statische App bereitstellen. Auf diese Weise kann jeder in Ihrem Team verschiedene Zustände von UI -Komponenten anzeigen und überprüfen, ohne einen Backend -Server zu starten oder ein Konto in Ihrer App zu erstellen.
Storybook ist eine Entwicklungsumgebung für React UI -Komponenten. Sie können eine Komponentenbibliothek durchsuchen, die verschiedenen Zustände jeder Komponente anzeigen und Komponenten interaktiv entwickeln und testen.
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 einzelnen Seite mit ihren Props -Dokumentations- und -nutzungsbeispielen präsentiert werden, mit einer Umgebung zum isolierten Entwickeln von Komponenten, ähnlich wie das Storybook. In StyleGuidist schreiben Sie Beispiele in Markdown, wobei jedes Code -Snippet als Live -bearbeitbarer Spielplatz gerendert wird.
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:
Die React-App erstellen bietet keine integrierte Funktionen, um eine Komponente für NPM zu veröffentlichen. Wenn Sie bereit sind, eine Komponente aus Ihrem Projekt zu extrahieren, damit andere Personen sie verwenden können, empfehlen wir, sie in ein separates Verzeichnis außerhalb Ihres Projekts zu verschieben und dann ein Tool wie NWB zu verwenden, um sie 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 wird mit der Generierung einer Service-Worker-Datei versorgt, die alle Ihre lokalen Vermögenswerte automatisch präsentiert und sie auf dem Laufenden halten, während Sie Aktualisierungen bereitstellen. Der Servicearbeiter wird eine Cache-First-Strategie verwenden, um alle Anfragen nach lokalen Vermögenswerten zu bearbeiten, einschließlich der anfänglichen HTML, um 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 dann stattdessen unregister() an. Nachdem der Benutzer eine Seite mit unregister() besucht hat, wird der Servicearbeiter deinstalliert. Beachten Sie, dass je nachdem, wie /service-worker.js serviert wird, kann es bis zu 24 Stunden dauern, bis der Cache ungültig wird.
Servicemitarbeiter benötigen HTTPS, obwohl die Richtlinien für lokale Tests nicht für localhost Angaben gelten. Wenn Ihr Produktions -Webserver HTTPS nicht unterstützt, bleibt die Registrierung von Service Worker fehl, der Rest Ihrer Web -App bleibt jedoch funktional.
Servicearbeiter werden derzeit nicht in allen Webbrowsern unterstützt. Die Registrierung von Service Worker wird nicht bei Browsern versucht, die Unterstützung fehlen.
Der Servicearbeiter ist nur in der Produktionsumgebung aktiviert, z. B. die Ausgabe des npm run build . Es wird empfohlen, einen Offline-First-Service-Mitarbeiter in einer Entwicklungsumgebung nicht zu aktivieren, da dies zu Frustrationen führen kann, wenn zuvor zwischengespeicherte Vermögenswerte verwendet werden und nicht die neuesten Änderungen enthalten, 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 einen einfachen HTTP-Server aus Ihrem Build-Verzeichnis aus. Nach dem Ausführen des Build-Skripts gibt create-react-app Anweisungen für eine Möglichkeit, Ihre Produktion Build lokal zu testen, und die Bereitstellungsanweisungen haben Anweisungen zur Verwendung anderer Methoden. Verwenden Sie immer ein inkognito -Fenster, um Komplikationen mit Ihrem Browser -Cache zu vermeiden.
Wenn möglich, konfigurieren Sie Ihre Produktionsumgebung so, dass sie den generierten service-worker.js mit deaktiviertem HTTP-Caching bedienen. Wenn das nicht möglich ist service-worker.js beispielsweise können Sie die Standard-HTTP-Cache-Lebensdauer von 10 Minuten nicht ändern. HTTP -Cache erhalten Sie weiterhin die zuvor zwischengespeicherten Vermögenswerte vom Servicearbeiter. Wenn Sie sofort Ihre aktualisierte Produktionsbereitstellung anzeigen müssen, deaktiviert die Durchführung eines Shift-Refresh den Servicearbeiter vorübergehend und ruft alle Vermögenswerte aus dem Netzwerk ab.
Benutzer sind mit Offline-First-Web-Apps nicht immer vertraut. Es kann nützlich sein, den Benutzer mitzuteilen, wann der Servicearbeiter Ihre Caches beendet hat (zeigt eine "diese Web -App funktioniert offline!"). Wenn sie das nächste Mal die Seite laden (angezeigt, dass ein "neuer Inhalt verfügbar ist; bitte aktualisieren". Das Zeigen dieser Nachrichten wird derzeit als Übung für den Entwickler überlassen. Als Ausgangspunkt können Sie jedoch die Logik verwenden, die in src/registerServiceWorker.js enthalten ist, was zeigt, welche Service Worker Lifecycle -Ereignisse für jedes Szenario erkennen und nach Belieben zu hören, um jedes Szenario zu erkennen und zu erkennen und zu erkennen und zu erkennen, und welche Szenario - Anhand eines Standards protokollieren Sie einfach geeignete Nachrichten an der JavaScript -Konsole.
Standardmäßig wird die generierte Service-Worker-Datei keinen Querverkehr wie HTTP-API-Anforderungen, Bilder oder Einbettungen aus einer anderen Domäne abfangen oder zwischenspeichern. Wenn Sie eine Laufzeit -Caching -Strategie für diese Anfragen verwenden möchten, können Sie die Option runtimeCaching im Abschnitt SWPrecacheWebpackPlugin von webpack.config.prod.js eject und konfigurieren.
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 Branding -Farben verwendet werden, wenn die Web -App angezeigt wird. Die Web App Manifest -Handbuch bietet mehr Kontext darüber, was jedes Feld bedeutet und wie sich Ihre Anpassungen auf die Erfahrung Ihrer Benutzer auswirken.
Quell Map Explorer analysiert JavaScript -Bündel mit den Quellkarten. Dies hilft Ihnen zu verstehen, woher Code -Bloat kommt.
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 ein build -Verzeichnis mit einem Produktionsaufbau Ihrer App. Richten Sie Ihren bevorzugten HTTP -Server ein, damit ein Besucher auf Ihrer Website index.html serviert wird, und Anfragen nach statischen Pfaden wie /static/js/main.<hash>.js werden mit dem Inhalt des /static/js/main.<hash>.js serviert /static/js/main.<hash>.js Datei.
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 Projekt für Erstellen von React App in der Produktion auszuführen. Es funktioniert genauso fein in eine vorhandene dynamische.
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. Da Create React App vollständig plattform-agnostisch ist, müssen Knoten nicht explizit verwendet werden.
Der build -Ordner mit statischen Vermögenswerten ist die einzige Ausgabe, die durch Erstellen von React App erzeugt wird.
Dies reicht jedoch nicht aus, wenn Sie das clientseitige Routing verwenden. Read the next section if you want to support URLs like /todos/42 in your single-page app.
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory ), many static file servers will fail. For example, if you used React Router with a route for /todos/42 , the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
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 next:
{
"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 completely. | |
| 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 fails to minifySome 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!
