tm nextjs starter
1.0.0
Dies ist mein minimales, aber funktionsfähiges React-Starterkit und meine Demo-App vom August 2018.
Wenn Sie die Javascript-Müdigkeit satt haben und schnell und einfach loslegen möchten, werfen Sie einen Blick darauf. Die Entwicklung einer modernen SPA React-App kann nicht viel einfacher sein.
Die Demo-App ist eine statische Website, eine einfache Einzelseiten-App mit einigen adressierbaren Seiten, die bei Bedarf verzögert geladen werden. Es demonstriert grundlegende CRUD-Operationen: 1) Filme auflisten, 2) Filmdetails anzeigen, 3) einen Film erstellen/bearbeiten und 4) einen Film löschen.
Die Demo nutzt den Browser localStorage für die Datenspeicherung, läuft also ohne Backend. Die Quellen enthalten ein Modul, das echte AJAX-Aufrufe an ein REST-Backend durchführt – Sie müssen nur das Modul aktivieren und einen Server schreiben, und schon sind Sie auf dem besten Weg, eine echte Web-App zu haben. Ich habe den RESTPie3 Python REST API-Server entwickelt, der diese einfache Film-API als Beispiel implementiert.
Die Demo-App besteht aus einem einfachen, aber leistungsstarken Tech-Stack, der die wesentliche Funktionalität für die Erstellung moderner Web-Apps bereitstellt. Es steht auf den Schultern einiger großartiger Bibliotheken:
├── /components/ # React components used by pages
│ └── /MyHeader.js # Site header component, just as an example
├── /pages/ # pages
│ ├── /_app.jsx # top level layout of the app, loaded once
│ ├── /about.jsx # about page
│ ├── /index.jsx # home page, lists movies
│ ├── /moviedetails.jsx # details page, views a movie
│ └── /movieedit.jsx # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /styles/ # global SASS files
│ └── /layout.sass # main layout
├── config.js # app config, select ajax or localstorage
├── next.config.js # nextjs configuration, almost empty
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
├── serverapi_localstorage.js # API, talks to localStorage
└── store.js # data store, managed by MobX
So führen Sie den Starter auf Ihrem lokalen Computer aus:
$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run devRichten Sie dann Ihren Browser auf http://localhost:3000.
Wenn eine der abhängigen Dateien geändert wird, werden die Änderungen im laufenden Betrieb geladen und sind sofort sichtbar. Viel Spaß mit der Entwicklung!
Nextjs ist ein großartiges Framework, das das richtige Maß an Ordnung in den chaotischen Bereich der Javascript-Entwicklung bringt. Es vereinfacht den Start der React-Entwicklung, indem es sich um die Konfigurationen und Tools kümmert, sodass Sie sich von Anfang an auf die Kernanwendung konzentrieren können. Es bietet eine ausgereifte minimale Kernfunktionalität, die praktisch von allen Web-Apps benötigt wird.
Die Vorteile von Next.js auf einen Blick:
Nextjs ist ausgereift genug, wurde vor etwa zwei Jahren veröffentlicht und verfügt über ein gesundes Plugin-Ökosystem. Für die Bodenarbeit wird Webpack verwendet.
Es ist durchaus möglich und wahrscheinlich, dass Nextjs in Zukunft ersetzt oder mit etwas noch Besserem zusammengeführt wird, aber es enthält jetzt einige Best Practices, die es lohnenswert machen, es auszuprobieren.
Redux ist normalerweise die erste Anlaufstelle als Zustandsverwaltungslösung für React-Apps. Sie war eine der ersten verfügbaren Bibliotheken, wird in so vielen Blogs besprochen und hat daher fast schon Standardstatus erlangt.
Ich hatte von der ersten Begegnung an gemischte Gefühle gegenüber Redux. Ich mag es immer, selbst zu denken und zu recherchieren, und nachdem ich viele React+Redux-Codebasen gelesen und andere Optionen bewertet habe, denke ich, dass sich Redux mit seinem funktionalen und reinen Paradigma für mich etwas abstrakt und überentwickelt anfühlt. (Außerdem wird Redux auch dort eingesetzt, wo es einfach nicht benötigt wird. Es ist zu einfach, es zu übertreiben.)
Meiner Meinung nach bietet MobX eine einfachere und praktischere Lösung für die Zustandsverwaltung als Redux. Es ist leichter zu erfassen und zu verstehen. Es ist weniger Boilerplate-Code erforderlich. Sie haben Ihren Zustand, den Sie für beobachtbar erklären, dann ändern Sie einfach Ihren Zustand und alle Beobachter werden automatisch aktualisiert. MobX funktioniert und bleibt aus dem Weg.
Ingenieure streiten zwar darüber, ob Redux besser für eine größere App oder für eine „echte“ App ist, aber es ist ein nie endender Kampf. Meine Strategie besteht normalerweise darin, meinen Code schlank und gemein zu halten und nicht einmal zu versuchen, überhaupt eine „große“ App zu entwickeln ...
Nextjs bietet Unterstützung für Site-globale und seitenlokale CSS-Stylesheets.
style jsx -Tags geschrieben (siehe beispielsweise about.jsx).In dieser Demo experimentiere ich auch mit der CSS-Rasterfunktionalität, einem aktuellen Standard für Weblayouts. CSS Grid ist ein leistungsstarkes Layout-Tool, das endlich eine robuste Möglichkeit bietet, ein zweidimensionales Raster zu definieren. Es wird die Art und Weise verändern, wie wir Layouts erstellen. Wenn Sie noch nichts über das CSS-Raster gelernt oder gelesen haben, ist 2018 ein guter Zeitpunkt dafür. Die Browserunterstützung ist bereits sehr gut. Es wird bald zum Mainstream werden.
Die Möglichkeit, mit Nextjs eine statische Site zu generieren, ist ein wichtiges Tool, das es ermöglicht, Apps ohne Backend-Server auszuführen. Sie können die Site auf GitHub-Seiten, Netlify oder Amazon S3 exportieren. (Aber überprüfen Sie ein paar Fallstricke mit Site+Link-Präfixen auf Github-Seiten.)
Ein weiterer Vorteil der statischen Generierung besteht darin, dass die App mit jedem REST-Backend verknüpft werden kann, unabhängig von der Sprache des Backends. Die saubere Trennung von Frontend und Backend sorgt auch für eine Modularisierung auf Tech-Ebene und möglicherweise auf Teamebene.
Ein Hinweis zu SEO: Um statische Versionen der Seiten mit dynamischen Daten zu exportieren, müssten Sie alle Seiten in der Konfiguration next.config.js per Skript erstellen, siehe dieses Beispiel.
Um eine statische Site zu generieren, führen Sie einfach Folgendes aus
$ npm run export Und die statischen Dateien werden im out -Ordner generiert.
Um die statische Site lokal über einen lokalen WWW-Server zu testen, führe ich schnell ein Python-Skript aus: (python3 -m http.server)
$ npm run pyserveUnd testen Sie dann die Site unter http://localhost:8000.
Die Größe der Homepage ist anständig, ca. 94 KB verkleinert und komprimiert .
Der Browser lädt die Homepage mit insgesamt 6 Anfragen, und jede neue Seite, die bei Bedarf geladen wird, stellt einmal eine einzelne js-Anfrage (denken Sie daran, dass es bei React nur um Javascript und nicht um HTML geht).
Page Size Inspector Report
URL: https://nextjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________6____94,159
Document________________________________________1_______916
-nextjs.tomicloud.com/ 916
Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js 1,053
-nextjs.tomicloud.com/_next/.../_app.js 2,506
-nextjs.tomicloud.com/_nex.../_error.js 2,490
-nextjs.tomicloud.com/.../main-6a4a..js 86,787
Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css 407(Bericht von meiner Chrome-Erweiterung Page Size Inspector.)
Machen Sie weiter und nehmen Sie diesen React-Starter und vielleicht auch meinen RESTPie3-Python-REST-API-Server und bauen Sie Ihren großartigen Service auf.
Sie können mich auch kontaktieren, um zu fragen, ob ich für eine freiberufliche Tätigkeit zur Verfügung stehe.
Wenn Sie Vue gegenüber React bevorzugen, habe ich denselben Starter auch mit Vue Nuxtjs codiert.
MIT-Lizenz
