Von Grund auf neues Erstellen eines React-Projekts

  • 7 Minuten

In diesem Modul haben wir ein Starterprojekt verwendet, um schnell loslegen zu können. Mit diesem Setup konnten wir uns auf React und einige Aspekte der neuen Syntax konzentrieren. Sie können das Starterprojekt für Ihre eigenen Aufgaben verwenden.

Versuchen Sie, ein Projekt von Grund auf neu zu erstellen. Um mit einem leeren Ordner zu beginnen, führen Sie die Schritte in dieser Einheit aus. In den Schritten wird Snowpack verwendet, wie im Starterprojekt.

Diese Einheit ist optional. Wenn Sie kein eigenes Projekt erstellen müssen, fahren Sie mit der nächsten Einheit fort.

Verstehen der Projektstruktur

Unser Kernsetup weist zwei Hauptordner auf, in denen Code gespeichert wird:

  • public
    • Enthält HTML, CSS, Bilder oder andere statische Dateien.
    • Speichert unsere Dateien index.html und index.css.
  • src
    • Enthält alle Dateien, die gerendert werden müssen.
    • Speichert alle .jsx-Dateien.

Wir erstellen auch zwei Dateien, um die Anwendung zu konfigurieren:

  • package.json enthält die Liste der Pakete und Skripte für unsere Anwendung.
  • snowpack.config.js enthält Konfigurationsoptionen für Snowpack.

Wir benötigen drei Hauptpakete für unsere Anwendung:

  • Snowpack wird zum Rendern von JSX in HTML und JavaScript verwendet.
  • React wird zum Erstellen unserer Komponenten verwendet.
  • React-DOM wird zum Einbinden unserer Anwendung verwendet.

Erstellen der ursprünglichen Struktur

Beginnen Sie in einem leeren Verzeichnis mit der Installation der erforderlichen Komponenten mithilfe von npm. Konfigurieren Sie dann Snowpack, und fügen Sie die Skripts der package.json-Datei hinzu.

  1. Öffnen Sie ein Terminal oder Befehlsfenster. Führen Sie dann die folgenden Befehle aus, um das Verzeichnis und die Datei package.json für npm zu erstellen. Verwenden Sie unter Mac oder Linux mkdir und unter Windows md, um ein Verzeichnis zu erstellen.

    # Windows
md react-recipes && cd react-recipes
md src
md public
touch package.json
echo "{}" > package.json

# Linux or macOS
mkdir react-recipes && cd react-recipes
mkdir src
mkdir public
touch package.json
echo "{}" > package.json

  2. Führen Sie den folgenden Code im selben Terminal oder Befehlsfenster aus.

    npm install --save-dev snowpack
npm install react react-dom

    Hinweis

    Snowpack ist eine Entwicklerabhängigkeit. Das heißt, es ist für die Produktion nicht erforderlich, da es während des Buildprozesses die erforderlichen JavaScript- und HTML-Dateien generiert.

  3. Öffnen Sie das Verzeichnis in Visual Studio Code, indem Sie den folgenden Befehl ausführen.

    code .

Einrichten von Snowpack

Einer der Vorteile eines Tools wie Snowpack ist, dass es sich weitgehend selbst konfiguriert. Wir müssen jedoch die Ordnerstruktur des Codes angeben. Um die Ordnerstruktur anzugeben, legen wir Optionen in der snowpack.config.js-Datei fest.

  1. Erstellen Sie in Visual Studio Code eine neue Datei, indem Sie Datei>Neue Datei auswählen.

  2. Nennen Sie die Datei snowpack.config.js.

  3. Fügen Sie der neuen Datei folgenden Code hinzu.

    module.exports = {
    mount: {
        'public': '/',
        'src': '/dist'
    }
}

Dieser Code weist Snowpack an, den public-Ordner als Stamm der Anwendung zu verwenden. Außerdem wird das src-Verzeichnis als virtueller Speicherort für die zu generierenden JavaScript- und HTML-Dateien festgelegt.

Erstellen der npm-Skripts

Zur Unterstützung unserer Entwicklungsarbeit verwenden wir zwei Skripts mit Snowpack. Mit dem ersten Skript wird der Entwicklungsserver gestartet. Mit dieser Aktion wird unsere Seite automatisch aktualisiert, wenn wir die Anwendung ändern. Das zweite Skript wird verwendet, wenn wir bereit sind, alle Dateien für die Bereitstellung zu erstellen.

  1. Öffnen Sie in Visual Studio Code die Datei package.json.

  2. Fügen Sie am Ende der Datei oberhalb der letzten geschweiften Klammer (}) den folgenden Code hinzu. Mit diesem Code werden die Start- und Buildskripts erstellt.

    {
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build"
    }
}

    Ihre gesamte Datei sollte jetzt wie folgender Code aussehen:

    {
  "devDependencies": {
    "snowpack": "^2.18.5"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
      "start": "snowpack dev",
      "build": "snowpack build"
  }
}

  3. Speichern Sie alle Dateien, indem Sie Datei>Alle speichern auswählen.

Sie haben nun Ihr Starterprojekt eingerichtet! Sie können index.html, App.jsx und andere Dateien genau wie in den vorherigen Einheiten hinzufügen.