Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ein Freund erzählte mir, dass er seinen Abschluss gemacht und ein Praktikum begonnen hatte.Aber das Unternehmen nutzt es immer nochAusblick, sagte der Anführer, dass er es nach einer Weile benutzen dürfeReagierenBevor Sie ein Projekt durchführen, lernen Sie es zunächst selbst.

Da ich übrigens auch einen Blog schreibe, hoffe ich, dass er Menschen in Not helfen kann.

Inhaltsverzeichnis

1 Projektinstallation

1.1 Wählen Sie das Verzeichnis aus und starten Sie das Terminal

1.2 Installieren Sie den Befehl „create-react-app“.

1.3 Projekt erstellen

1.4 Verzeichnisdateien anzeigen

1.5 Starten Sie das Projekt

2 Bibliotheken von Drittanbietern, die auf jeden Fall verwendet werden

2.1 js-tool-große-box

2.1.1 Zeit- und Datumsklasse

2.1.2 Webshop-Klasse

2.1.3 Ereignisklasse

2.1.4 Zahlenklasse

2.1.5 String-Klasse

2.1.6 Regelmäßige Verifizierungsklasse

2.1.7 Ajax-Klasse

2.1.8 Datendatenklasse

2.1.9 Browser-Browserklasse

2.2 weniger oder Sass-Präprozessor

2.3 Axios-Anforderungsbibliothek

2.4 UI-Bibliothek

---

1 Projektinstallation

1.1 Wählen Sie das Verzeichnis aus und starten Sie das Terminal

Sie können einen Ordner auf Ihrem Computer als Verzeichnis zum Üben dieses React-Projekts finden. Geben Sie dann „cmd“ in die URL des Ordners ein. Das Terminal wird angezeigt. Sie können auch das Zielverzeichnis angeben:

 

Geben Sie hier „cmd“ ein und drücken Sie die Eingabetaste, um das Terminal-Popup-Fenster aufzurufen.

1.2 Installieren Sie den Befehl „create-react-app“.

Führen Sie den folgenden Befehl aus: -g bedeutet, es global zu installieren

npm install -g Erstellen-Reagieren-App

1.3 Projekt erstellen

Beispielsweise möchten wir eine Datei mit dem Namen erstellen JS-Tool-Big-Box-Reagieren Projekt, dann können Sie den folgenden Befehl ausführen:

Erstellen-Reagieren-App JS-Tool-Big-Box-Reagieren

Anschließend wird das Terminal installiert,Die Installation kann etwas langsam seinWarten Sie geduldig, wie in der folgenden Abbildung gezeigt, nachdem die Installation abgeschlossen ist:

1.4 Verzeichnisdateien anzeigen

• Das öffentliche Verzeichnis speichert bekannte HTML-Dateien und einige statische erforderliche Dateien.
• Das src-Verzeichnis ist ein wichtiges Verzeichnis für die Projektentwicklung.
• Weiter unten ist index.js die Eintragsdatei.
• Sie können versuchen, einige Änderungen in App.js vorzunehmen und dann den Webseiteneffekt zu überprüfen

1.5 Starten Sie das Projekt

Im Bild oben verwenden wir den VSCode-Editor, um das React-Projekt zu öffnen. Geben Sie zu diesem Zeitpunkt den Befehl in die Konsole ein:

npm starten

Dann wird uns das Projekt aktiv dabei helfen, den Browser zu aktivieren.http://localhost:3000/Geben Sie die Adresse ein, und dann sehen Sie das rotierende React-Symbol und das Projekt ist installiert.

 

2 Bibliotheken von Drittanbietern, die auf jeden Fall verwendet werden

Nachdem die Projektinstallation abgeschlossen ist, beginnt die Projektentwicklung. Wie das Sprichwort sagt: Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Energie schärfen.Lassen Sie uns vor der Projektentwicklung über einige Dinge sprechen, die bei der Front-End-Projektentwicklung definitiv zum Einsatz kommen werden.Bibliotheken von Drittanbietern .Mithilfe dieser Bibliotheken von Drittanbietern können sie uns bei der Entwicklung helfeneffizienter。

2.1 js-tool-große-box

Kommen Sie zuerst zur Lernadresse von js-tool-big-box und klicken Sie hier:Lernadresse für die Werkzeugbibliothek js-tool-big-box

js-tool-big-box ist eine fast unverzichtbare NPM-Bibliothek für Front-End-Entwicklungsprojekte. Sie verfügt über umfangreiche Funktionen und ist einfach zu verwenden, was die Front-End-Entwicklung äußerst effizient macht. Zu seinen aktuellen Funktionen gehören unter anderem:

2.1.1 Zeit- und Datumsklasse

1. Zeit- und Datumsumwandlung;
2. Flexibleres Zeitformat;
3. Persönlichere Zeiterfassung;
4. Der Zeitraum von einem bestimmten Zeitpunkt bis heute (detailliertere Rückgabeinformationen)
5. Bestimmen Sie, ob es sich um ein gewöhnliches Jahr oder ein Schaltjahr handelt.
6. Wie viele Tage hat ein Monat?
7. Sternzeichen;
8. gesetzliche Feiertage im Jahr;
9. Holen Sie sich die Zeit wichtiger Städte auf der ganzen Welt.

2.1.2 Webshop-Klasse

1. Parameterwert in der URL abrufen
2. Cookies setzen;
3. Holen Sie sich Kekse;
4. Cookies löschen;
5. LocalStorage festlegen;
6. Holen Sie sich localStorage

2.1.3 Ereignisklasse

1. Anti-Shake
2. Gaspedal

2.1.4 Zahlenklasse

1. Tausender durch Komma getrennt;
2. Bestimmen Sie, ob es größer als 0 ist.
3. Bestimmen Sie, ob eine Ganzzahl größer als 0 ist.
4. Generieren Sie Zufallszahlen innerhalb des angegebenen Bereichs.
5. Generieren Sie eine Zufallszahl mit einer angegebenen Anzahl von Ziffern.
6. Zahlen in chinesische Kleinbuchstaben umwandeln;
7. Konvertieren Sie Zahlen in chinesische Großbuchstaben.

2.1.5 String-Klasse

1. String-Reverse;
2. Henggang und kleiner Buckel
3. Der horizontale Hügel verwandelt sich in einen großen Hügel;
4. Vergleich der Versionsnummern;
5. Ermitteln Sie die Bytelänge einer Zeichenfolge.
6. UUID generieren;
7. Geschlecht, Alter und Geburtsdatum anhand der ID-Nummer ermitteln;
8. Fügen Sie in der Mitte der Zeichenfolge spezielle Symbole hinzu, um wichtige Informationen auszublenden.
9. Konvertierung von Zeichenfolgen in Groß- und Kleinbuchstaben;

2.1.6 Regelmäßige Verifizierungsklasse

1. Überprüfung des E-Mail-Formats;
2. Überprüfung des Mobiltelefonnummernformats;
3. Überprüfung des URL-Formats;
4. Überprüfung des ID-Nummernformats;
5. Überprüfung des IP-Adressformats;
6. Validierung des Postleitzahlenformats;

7. Stellen Sie fest, ob es sich um ein Unicode-Zeichen handelt.

8. Ermitteln Sie den Wert der Passwortstärke.

2.1.7 Ajax-Klasse

1. JSONP-Anfrage senden;
2. Laden Sie die rein funktionale Version der Datei herunter;
3. Dateien herunterladen, Funktionsversion abrufen und herunterladen;

2.1.8 Datendatenklasse

1. Holen Sie sich eine zufällige Anzahl von Werten aus dem Array.
2. Text in die Zwischenablage kopieren;
3. Array-Deduplizierung;
4. Erhalten Sie detailliertere Datentypen;
5. Numerische Array-Sortierung (Vorwärts- und Rückwärtsreihenfolge);
6. Sortieren von Objektarrays (Vorwärts- und Rückwärtsreihenfolge)

2.1.9 Browser-Browserklasse

1. Stellen Sie fest, ob der aktuelle Browser mobil ist.
2. Stellen Sie fest, ob das Element im sichtbaren Bereich liegt.

3. Ermitteln Sie, ob der aktuelle Browser nach oben oder unten scrollt, und ermitteln Sie den aktuellen Abstand von oben und unten.

4. Vollbildmodus ein- und ausschalten;

5. Rufen Sie den Browser-UserAgent und detaillierte Informationen ab.

2.2 weniger oder Sass-Präprozessor

Die traditionelle Art, CSS zu schreiben, ist relativ einfach. Die Verwendung von Präprozessoren wie less oder sass kann die CSS-Entwicklung effizienter machen und wird dringend empfohlen.

Studienunterlagen (Less Quick Start |. Less.js Chinesische Dokumentation – Less Chinese Website (bootcss.com))

2.3 Axios-Anforderungsbibliothek

Im Allgemeinen umfassen Projekte die Interaktion mit dem Server. Zu diesem Zeitpunkt können Sie Axios zum Senden von Anforderungen verwenden.

Axios-Lerndokumentation(axios chinesische Dokumentation |. axios chinesische Website |. axios (axios-js.com))

2.4 UI-Bibliothek

Wenn es sich bei React um eine C-seitige Entwicklung handelt, hoffen wir immer noch, einige relativ leichte UI-Bibliotheken von Hand schreiben zu können. Wenn es sich jedoch um eine B-seitige Entwicklung handelt, empfehlen wir Ant Design.

Ant-Design-Lerndokument(Ant Design – Eine UI-Designsprache für Unternehmen und eine React-Komponentenbibliothek)