create react app
v5.0.1
Erstellen Sie React-Apps ohne Build-Konfiguration.
„React App erstellen“ funktioniert unter macOS, Windows und Linux.
Wenn etwas nicht funktioniert, reichen Sie bitte ein Problem ein.
Wenn Sie Fragen haben oder Hilfe benötigen, wenden Sie sich bitte an die GitHub-Diskussionen.
npx create-react-app my-app
cd my-app
npm start Wenn Sie create-react-app zuvor global über npm install -g create-react-app installiert haben, empfehlen wir Ihnen, das Paket mit npm uninstall -g create-react-app oder yarn global remove create-react-app zu deinstallieren, um sicherzustellen dass npx immer die neueste Version verwendet.
(npx wird mit npm 5.2+ und höher geliefert, siehe Anweisungen für ältere npm-Versionen)
Öffnen Sie dann http://localhost:3000/, um Ihre App anzuzeigen.
Wenn Sie für die Bereitstellung in der Produktion bereit sind, erstellen Sie mit npm run build ein minimiertes Bundle.
Sie müssen keine Tools wie Webpack oder Babel installieren oder konfigurieren.
Sie sind vorkonfiguriert und ausgeblendet, sodass Sie sich auf den Code konzentrieren können.
Erstellen Sie ein Projekt und schon kann es losgehen.
Sie benötigen Node 14.0.0 oder eine neuere Version auf Ihrem lokalen Entwicklungscomputer (auf dem Server ist dies jedoch nicht erforderlich). Wir empfehlen die Verwendung der neuesten LTS-Version. Sie können nvm (macOS/Linux) oder nvm-windows verwenden, um Node-Versionen zwischen verschiedenen Projekten zu wechseln.
Um eine neue App zu erstellen, können Sie eine der folgenden Methoden wählen:
npx create-react-app my-app(npx ist ein Paket-Runner-Tool, das mit npm 5.2+ und höher geliefert wird, siehe Anweisungen für ältere npm-Versionen)
npm init react-app my-app npm init <initializer> ist in npm 6+ verfügbar
yarn create react-app my-app yarn create <starter-kit-package> ist in Yarn 0.25+ verfügbar
Es wird ein Verzeichnis namens my-app im aktuellen Ordner erstellt.
In diesem Verzeichnis wird die anfängliche Projektstruktur generiert und die transitiven Abhängigkeiten installiert:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
Keine Konfiguration oder komplizierte Ordnerstrukturen, nur die Dateien, die Sie zum Erstellen Ihrer App benötigen.
Sobald die Installation abgeschlossen ist, können Sie Ihren Projektordner öffnen:
cd my-appInnerhalb des neu erstellten Projekts können Sie einige integrierte Befehle ausführen:
npm start oder yarn start Führt die App im Entwicklungsmodus aus.
Öffnen Sie http://localhost:3000, um es im Browser anzuzeigen.
Die Seite wird automatisch neu geladen, wenn Sie Änderungen am Code vornehmen.
Die Build-Fehler und Lint-Warnungen werden in der Konsole angezeigt.
npm test oder yarn test Führt den Test-Watcher in einem interaktiven Modus aus.
Führt standardmäßig Tests im Zusammenhang mit Dateien durch, die seit dem letzten Commit geändert wurden.
Lesen Sie mehr über das Testen.
npm run build oder yarn 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 für die Bereitstellung.
Detaillierte Anweisungen zur Verwendung der Create React App und viele Tipps finden Sie in der Dokumentation.
Diese und weitere Informationen finden Sie im Benutzerhandbuch.
Eine Abhängigkeit: Es gibt nur eine Build-Abhängigkeit. Es verwendet Webpack, Babel, ESLint und andere erstaunliche Projekte, bietet darüber hinaus aber ein zusammenhängendes kuratiertes Erlebnis.
Keine Konfiguration erforderlich: Sie müssen nichts konfigurieren. Eine einigermaßen gute Konfiguration von Entwicklungs- und Produktions-Builds wird für Sie übernommen, sodass Sie sich auf das Schreiben von Code konzentrieren können.
Kein Lock-In: Sie können jederzeit zu einem benutzerdefinierten Setup wechseln. Führen Sie einen einzigen Befehl aus und alle Konfigurations- und Build-Abhängigkeiten werden direkt in Ihr Projekt verschoben, sodass Sie genau dort weitermachen können, wo Sie aufgehört haben.
Ihre Umgebung verfügt über alles, was Sie zum Erstellen einer modernen Single-Page-React-App benötigen:
-webkit- oder andere Präfixe benötigen.[email protected] und höher optional .)Sehen Sie sich diesen Leitfaden an, um einen Überblick darüber zu erhalten, wie diese Tools zusammenpassen.
Der Nachteil besteht darin, dass diese Tools so vorkonfiguriert sind, dass sie auf eine bestimmte Art und Weise funktionieren . Wenn Ihr Projekt weitere Anpassungen erfordert, können Sie es „auswerfen“ und anpassen, müssen dann aber diese Konfiguration beibehalten.
Die Create React App eignet sich hervorragend für:
Hier sind einige häufige Fälle, in denen Sie vielleicht etwas anderes ausprobieren möchten:
Wenn Sie React ohne Hunderte von transitiven Build-Tool-Abhängigkeiten ausprobieren möchten, sollten Sie stattdessen die Verwendung einer einzelnen HTML-Datei oder einer Online-Sandbox in Betracht ziehen.
Wenn Sie React-Code in ein serverseitiges Vorlagen-Framework wie Rails, Django oder Symfony integrieren müssen oder keine Single-Page-App erstellen , sollten Sie die Verwendung von nwb oder Neutrino in Betracht ziehen, die flexibler sind. Speziell für Rails können Sie Rails Webpacker verwenden. Probieren Sie für Symfony das Webpack Encore von Symfony aus.
Wenn Sie eine React-Komponente veröffentlichen müssen, kann nwb dies ebenfalls tun, ebenso wie die React-Components-Voreinstellung von Neutrino.
Wenn Sie Server-Rendering mit React und Node.js durchführen möchten, schauen Sie sich Next.js oder Razzle an. Create React App ist unabhängig vom Backend und erstellt nur statische HTML/JS/CSS-Bundles.
Wenn Ihre Website größtenteils statisch ist (z. B. ein Portfolio oder ein Blog), sollten Sie die Verwendung von Gatsby oder Next.js in Betracht ziehen. Im Gegensatz zu Create React App rendert Gatsby die Website zum Zeitpunkt der Erstellung vorab in HTML. Next.js unterstützt sowohl Server-Rendering als auch Pre-Rendering.
Wenn Sie schließlich weitere Anpassungen benötigen, schauen Sie sich Neutrino und seine React-Voreinstellung an.
Alle oben genannten Tools können mit wenig bis gar keiner Konfiguration funktionieren.
Wenn Sie den Build lieber selbst konfigurieren möchten, befolgen Sie diese Anleitung.
Suchen Sie etwas Ähnliches, aber nach React Native?
Schauen Sie sich Expo CLI an.
Wir würden uns über Ihre helfende Hand bei create-react-app freuen! Weitere Informationen darüber, wonach wir suchen und wie Sie beginnen können, finden Sie unter CONTRIBUTING.md.
Create React App ist ein von der Community gepflegtes Projekt und alle Mitwirkenden sind Freiwillige. Wenn Sie die zukünftige Entwicklung der Create React App unterstützen möchten, denken Sie bitte über eine Spende an unser Open Collective nach.
Dieses Projekt existiert dank aller Menschen, die dazu beitragen.
Vielen Dank an Netlify für das Hosting unserer Dokumentation.
Wir danken den Autoren bestehender verwandter Projekte für ihre Ideen und Zusammenarbeit:
Create React App ist eine Open-Source-Software mit der MIT-Lizenz. Das Logo „Create React App“ ist unter einer Creative Commons Attribution 4.0 International-Lizenz lizenziert.
