React Erste Schritte – Beispiel-Studiennotizen 1. Hallo Welt

Blogger-Vorstellung: Da Shuangge, der kleine UP-Besitzer der B-Station, Live-Programmierung + rote Polizei drei , Python 1 zu 1 Tutor.

Dieser Blog enthält die Studiennotizen von React in Day1 von MicrosoftsFrontend Bootcamp

Notizenverzeichnis: React Getting Started Beispiel-Studiennotizenverzeichnis
Zu diesem Blog gibt es eine entsprechende Videoversion. Weitere Informationen finden Sie im Verzeichnis.

0 Vorbereitung

Um die Schüler mit Git-Operationen vertraut zu machen, verwenden wir Projekte auf Github, um die Notizen zu verwalten.
Verschiedene Phasen des Projekts werden in verschiedenen Git-Zweigen gespeichert.

Muss installiert werden:

npm
Knoten
git (und Github so konfigurieren, dass Pull und Push möglich sind)
vscode (oder eine andere IDE, die sich zum Schreiben von Code eignet, z. B. Sublime Text oder Atom)

1 Github-Projekt erstellen

Erstellen Sie ein neues Projekt in Github.
Benennen Sie das Projekt. react todoapp study
Sie können ihm auch einen anderen Namen geben, achten Sie jedoch darauf, dass die entsprechenden Teile konsistent bleiben.

ÜberprüfenAdd a ReadMe file
ÜberprüfenAdd .gitignore, insbesondere Knoten auswählen
ÜberprüfenChoose a license, insbesondere Creative Commons auswählen…

Dann erstellen Sie ein neues Projekt, klicken Sie aufCreate repository

2 Ziehen Sie das Projekt auf lokal

Dann ziehen Sie das Projekt lokal.
Der spezifische Vorgang befindet sich auf der Github-Projektseite

Klicken Sie auf die grüne Code-Schaltfläche
wechseln zuSSH
Klicken Sie auf das Kopiersymbol auf der rechten Seite des Eingabefelds unten
, wie unten gezeigt

Sie können die Git-Adresse des Projekts in die Zwischenablage kopieren

Öffnen Sie dann ein Terminal- oder Befehlszeilenfenster im übergeordneten Ordner des Projekts, das Sie erstellen möchten.

Geben Sie darin den folgenden Befehl ein

git clone git_ssh

wobeigit_ssh die Git-Adresse des gerade kopierten Projekts ist
Was ich hier habe, ist[email protected]:BigShuang/react-todoapp-study.git
also der Befehl ausgeführt werden soll ist Ja

git clone [email protected]:BigShuang/react-todoapp-study.git

Öffnen Sie dann das Projekt im vs-Code. (Oder ziehen Sie den Projektordner direkt in den vs-Code)

3 Installieren Sie React

Öffnen Sie das Terminal
Geben Sie den folgenden Befehl ein

npx create-react-app .

Hinweis:
Der Befehl zum lokalen Erstellen eines neuen Reaktionsprojekts lautet ursprünglichnpx create-react-app app_name
, aber dieser Befehl erstellt ein neuesapp_name Ordner als React-Projektordner.
Hier müssen wir den aktuellen Projektordner als Reaktionsprojektordner verwenden
Also müssen wir verwendennpx create-react-app .

Nach der Eingabe des Befehls warten Sie geduldig auf die Installation.
Nach erfolgreicher Installation
sollte der Projektpfad wie folgt lauten

react-study-notes
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

4 Schreiben Sie eine „Hallo Welt“.

LöschenpublicAlle Dateien im Ordner
LöschensrcAlle Dateien im Ordner

Hinweis: Löschen Sie nicht die Ordner public und src, sondern nur die Dateien im Ordner.

aktuellpublicTextartikel, Neubauindex.htmlwie unten

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

aktuellsrcTextartikel, Neubauindex.jswie unten

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

Öffnen Sie dann das Terminal und geben Sie den folgenden Befehl ein

npm start

Sie können das Projekt ausführen
und dann können Sie sehen, wie der Browser die Webseite öffnetlocalhost:3000, der Effekt ist wie folgt
Bitte fügen Sie eine Bildbeschreibung hinzu

Wenn Sie das Projekt nach dem Ausführen des Projekts im Terminal schließen möchten
, können Sie Ctrl + C und dann die Eingabetaste drücken

Senden Sie abschließend die Änderungen an Github