React-Skripte starten in React

Es ist technisch möglich, eine React-Anwendung von Grund auf neu zu erstellen, aber Sie müssen alle Dateien erstellen und die Konfiguration anpassen, was zeitaufwändig sein kann. Stattdessen können Sie die create-react-app verwenden, die eine freundliche Umgebung für die Entwicklung Ihrer React-App bietet. Es enthält auch Skripte und Konfigurationen, die Sie verwenden können, um den Entwicklungsserver zu starten, das Hot-Reloading und andere wichtige Funktionen zu aktivieren.

react-scripts in create-react-app

Durch die Installation des Pakets create-react-app können Sie mit einem Befehl eine voll funktionsfähige React-Anwendung einrichten. Als Entwickler müssen Sie nur npm run start in die Kommandozeile eingeben, um eine Live-Anwendung auf Ihrem localhost-Server zu erstellen. Die Basiskonfiguration create-react-app beinhaltet auch eine ganze Reihe von Skripten, die zum Ausführen einer Anwendung erforderlich sind. Es ist so konfiguriert, um Anfängern die Mühe zu ersparen, Projekte selbst zu konfigurieren. react-scripts können jedoch in der Datei package.json angepasst werden.

react-scripts start

Um dieses Skript auszuführen, führen Sie in Ihrer Kommandozeile npm run start aus. Sie können auch den Kurzbefehl npm start verwenden. Es weist create-react-app an, eine Entwicklungsumgebung einzurichten, einen lokalen Server zu starten und ein heißes Modul neu zu laden.

Ihre Datei package.json sollte ein scripts-Objekt mit Schlüssel-Wert-Paaren enthalten, die auf den Skriptnamen und eine Referenz für die Ausführung verweisen. Dies ist lediglich eine einfachere Möglichkeit, React anzuweisen, den Befehl npm-run-all -p watch-css start-js auszuführen, der mehrere Aktionen ausführt. In diesem Fall löst npm run start die Ausführung von zwei Skripten aus: watch-css und start-js. Ersteres stellt sicher, dass .scss-Dateien in normale .css-Dateien übersetzt werden und Ihre Stiländerungen automatisch in Ihrer Anwendung widergespiegelt werden. Letztere weist React an, die Anwendung im Entwicklungsmodus einzurichten und mit localhost:3000 zu hosten.

Anpassung

npm start ist einfach ein Befehl. Sie können die Aktionen bei Bedarf anpassen. Sie können beispielsweise den localhost-Port zum Hosten der Anwendung konfigurieren. Hier ist ein Beispiel:

'scripts': {
  'start': 'set PORT=8000 && react-scripts start',
  'build': 'react-scripts build',
  'test': 'react-scripts test',
  'eject': 'react-scripts eject'
}

Hier weisen wir das Skript explizit an, den localhost:8000-Port anstelle des Standard-Ports zu verwenden.

Sie können auch andere Skripte ausführen, indem Sie in der Befehlszeile npm run scriptName eingeben. Wenn Sie eine create-react-app-Anwendung ausführen und nicht herausfinden können, was ein Skript macht, schauen Sie in die Datei package.json.