React App erstellen: React -Projekte schnell bereit

React App (CRA) Schnelle Ansicht

erstellen

Facebooks Befehlszeilen -Tool erstellen React App (CRA) vereinfacht die Erstellung von React -Projekten. Es konfigurierte den Webpack -Erstellungsprozess und beseitigte die Mühe, komplexe Build -Pipelines zu bauen.

CRA kann von NPM oder Garn ausgeführt werden und richtet eine Projektstruktur mit dem react-scripts -Paket ein, das alle Konfigurations- und Build -Skripte enthält. Das Tool enthält auch einen lokalen Entwicklungsserver und unterstützt ES6- und ES7 -Funktionen, CSS -Module, Scherzentests und Eslint.

Verwenden Sie npm run build, um ein Produktionsumgebungspaket zu erstellen, eine optimierte Anwendungsversion zu generieren und auf die Bereitstellung vorzubereiten. Es unterstützt auch Umgebungsvariablen, Code -Segmentierung, Typenkript, progressive Webanwendungen und Leistungsmessungen mithilfe von Web -Vitalen.

Wenn die CRA unzureichende Funktionen bietet, kann der Benutzer npm run eject ausführen, wodurch die Webpack -Konfiguration kopiert und Skripte in das Projekt erstellt wird, wodurch die Anpassung ermöglicht wird. Alternativ können Benutzer ihre eigenen Filialen veröffentlichen und verwalten und die erforderlichen Funktionen hinzufügen. react-scripts

Wie erstellt React App funktioniert

React App erstellen ist ein eigenständiges Tool, das mit NPM oder Garn ausgeführt werden kann. Generieren Sie eine neue React -Anwendung in einem neuen Ordner mit nur wenigen Befehlen:

in einem neuen Ordner:

Verwenden von NPM:

npx create-react-app new-app
cd new-app
npm start

mit Garn:

yarn create react-app new-app
cd new-app
yarn start

React App erstellen wird die folgende Projektstruktur festgelegt:

<code>new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock</code>

Es fügt Ihrem Projekt auch ein react-scripts -Paket mit allen Konfigurations- und Build -Skripten hinzu. Mit anderen Worten, Ihr Projekt hängt vom react-scripts -Paket ab, nicht vom create-react-app selbst. Sobald die Installation abgeschlossen ist, können Sie den Entwicklungsserver starten und Ihr Projekt verarbeiten.

Hauptfunktionen

• Lokaler Entwicklungsserver: npm start Ein WebPack -Entwicklungsserver wird gestartet, einschließlich eines Beobachters, der die Anwendung automatisch neu lädt, nachdem Sie den Inhalt geändert haben. Beginnend mit V4 erstellen die React App unterstützt die schnelle Aktualisierung von React als Alternative zum HOT -Modulersatz.

• ES6 und ES7 -Unterstützung: Verwenden Sie babel-preset-react-app, um ES6- und ES7 -Funktionen wie async/await, Objektruhe/Spread -Eigenschaften, dynamische import() usw. zu unterstützen.

• Ressourcenimport: CSS -Dateien, Bilder oder Schriftarten können aus JavaScript -Modulen importiert werden. Nachdem die Anwendung erstellt wurde, kopiert die React -App die Dateien in den Build -Ordner.

• Stil: unterstützt das Importieren von CSS -Dateien, und alle CSS -Dateien werden beim Erstellen in ein Paket verschmolzen. Unterstützt CSS -Module (*.module.css) und SASS (.scss Dateien und muss separat installiert werden node-sass).

• Unit -Test: npm test Führen Sie den Test mit dem Scherz aus und starten Sie einen Beobachter, um den Test beim Ändern des Inhalts erneut auszusetzen.

• Eslint: Während des Entwicklungsprozesses wird der Code statisch über Eslint analysiert.

• Erstellen Sie ein Produktionsumgebungspaket: npm run build Erstellen Sie ein optimiertes Produktionsumfeldpaket.

• Bereitstellung: Das generierte Build -Ergebnis ist eine statische Datei, die einfach in verschiedenen Umgebungen bereitgestellt werden kann.

• Umgebungsvariablen: unterstützt die Verwendung von Umgebungsvariablen beginnend mit REACT_APP_.

• Reverse Proxy: Sie können Anforderungen an die Proxy -Anforderungen können, indem Sie das Feld package.json in proxy konfigurieren.

• Codesegmentierung: unterstützt dynamische import() für die Codesegmentierung.

• TypeScript -Unterstützung: TypeScript -Projekte können mit der Option --template typescript erstellt werden.

• Progressive Web Applications (PWA) Support: Sie können die Optionen --template cra-template-pwa oder --template cra-template-pwa-typescript verwenden, um PWA -Projekte zu erstellen.

• Web -Vitals: Verwenden Sie die web-vitals Bibliothek, um Web -Vitals -Metriken zu verfolgen.

Gib mit CRA

auf

Wenn die CRA nicht funktional genug ist, können Sie npm run eject die Webpack -Konfiguration kopieren und Skripte für die Anpassung in Ihr Projekt erstellen. Alternativ können Sie react-scripts Ihre eigenen Filialen packen und verwalten.

Zusammenfassung

React App erstellen ist ein bequemes Werkzeug, um ein neues React -Projekt zu starten, die Build -Prozesse zu vereinfachen und umfangreiche Funktionen bereitzustellen. Egal, ob es sich um einen schnellen Prototyp oder ein großes Projekt handelt, es spart viel Entwicklungszeit.

(Der FAQS -Teil wird weggelassen, weil er mit dem Artikel dupliziert wird und zu lang ist.)

Das obige ist der detaillierte Inhalt vonReact App erstellen: React -Projekte schnell bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!