Detaillierte Schritte zum Erstellen einer React-Entwicklungsumgebung mit der Create-React-App

Dieses Mal gebe ich Ihnen eine detaillierte Schritt-für-Schritt-Anleitung zur Verwendung von Create-React-App zum Erstellen einer React-Entwicklungsumgebung. Was sind die Vorsichtsmaßnahmen für die Verwendung von Create-React-App zum Erstellen? Eine React-Entwicklungsumgebung. Hier sind praktische Fälle.

Häufig verwendetes Gerüst

1. React-Boilerplate

2. React- redux-starter-kit

3. create-react-app (am häufigsten auf Git verfolgt)

Verwenden Sie create-react -app erstellt schnell eine React-Entwicklungsumgebung

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

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

Führen Sie den folgenden Befehl ausProjekt erstellen:

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

Tipps:

Wenn die Verwendung von npm sehr langsam ist, können Sie Taobaos angepasste cnpm (gzip-Komprimierung) verwenden Support) Befehlszeilentool anstelle des Standard-npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

So kompilieren Sie weniger

1 Stellen Sie die Konfigurationsdatei

npm run eject

2.

Installieren Sie less-loader und less

npm install less-loader less --save-dev

3. Ändern Sie die Webpack-Konfiguration

Ändern Sie webpack.config.dev.js und webpack. config-prod.js Konfigurationsdatei

test: /\.css$/ 改为 /\.(css|less)$/

Finden Sie die Verwendung unter diesem Test, fügen Sie den Loader hinzu

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

und führen Sie das Projekt erneut aus, sobald es kompiliert wurde

Projektstruktur

src-Verzeichnis

Das src-Verzeichnis wird zum Speichern unseres eigenen Codes verwendet, nur unter src src Dateien im Stammverzeichnis werden von Webpack kompiliert, daher müssen die Dateien im src-Stammverzeichnis abgelegt werden, sonst werden sie nicht erkannt.

öffentliches Verzeichnis

Nur ​​Dateien im öffentlichen Verzeichnis werden von public/index.html referenziert

Tipp: Index unter public und src Die HTML-Datei muss vorhanden sein und kann nicht umbenannt werden.

Allgemeine Befehle

1 Startbefehl

npm start

2 Befehl zum Kompilieren und Packen. Kompilieren Sie den Code in der Produktionsumgebung und platzieren Sie ihn im Build-Verzeichnis, um den Code korrekt zu verpacken, zu optimieren, zu komprimieren und Hash zum Umbenennen der Datei zu verwenden

npm run build

3 Testen Sie nach der Dateiänderung

npm test

4 .Strukturbefehl. Der Konfigurationsbefehl von webpck ist ursprünglich im Gerüst verfügbar, das Konfigurationselement ist unsichtbar und muss vor der Ausführung dieses Befehls geändert werden (dies ist ein einzelner Befehl, der nach seiner Strukturierung irreversibel ist).

npm run eject

5 . https-Vorgang

set HTTPS=true&&npm start

6. Online-Kompilierung

Dies ist ein großes Highlight der Create-React-App. Es ermöglicht Ihrer Anwendung, den Code zu täuschen und die Dateien zu kompilieren, die in der Online-Produktion ausgeführt werden Die Umgebung ist sehr klein und der Dateiname hat auch einen Hash-Wert, der für uns bequem zwischenzuspeichern ist. Außerdem stellt er einen Server bereit, sodass wir ähnliche Effekte wie in der Online-Produktionsumgebung lokal sehen können, was wirklich sehr praktisch ist .

Nur ​​eine Befehlszeile:

npm run build

7.api-Entwicklung

Fügen Sie einfach ein Konfigurationselement in die Datei package.json ein.

"proxy": http://localhost:3001/,

8.ajax?

Durch fetch ersetzen

npm install whatwg-fetch

rrreeDebug-Tool React Developer Tools (https://github.com/facebook/react-devtools)

Fügen Sie die Erweiterung React Developer Tools in Chrome hinzu, denken Sie an Neustart Der Browser wird neu gestartet (neu starten, neu starten, neu starten, wichtige Dinge dreimal sagen) und die Reaktionsoption wird in den Chrome-Entwicklungstools angezeigt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie AngularJS, um den Tab-Wechsel zu implementieren

So verwenden Sie Koa2, um WeChat 2D Scan zu entwickeln den QR-Code zum Bezahlen

Das obige ist der detaillierte Inhalt vonDetaillierte Schritte zum Erstellen einer React-Entwicklungsumgebung mit der Create-React-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!