Lernen Sie die grundlegenden Schritte zum Einrichten einer React-Anwendung mit Flexbox, um ein responsives Raster zu erstellen.
In unserem vorherigen Artikel Erstellen eines responsiven Layouts in React haben wir damit begonnen, zu lernen, wie man ein grundlegendes responsives Layout in unserer React-Anwendung mit Flexbox und Medienabfragen einrichtet. Wir haben ein React Hooks npm-Paket verwendet, um bei Breakpoints zu helfen, und ein weiteres Paket, um bei responsiven Bildern (Bild-Tag) zu helfen. Wir haben auch die KendoReact Menu-Komponente vorgestellt und am Ende hatten wir eine ziemlich ansprechende Demo, auf der wir in diesem Artikel aufbauen werden.
Nicht anders als bei der Benutzeroberfläche braucht das Layout Zeit und kleine Schritte. Wir können weiter bauen und daran arbeiten, das, was wir bereits gebaut haben, umzugestalten und zu verbessern, sowie einige neue Techniken rund um responsives Layout lernen und diese Ideen langsam integrieren. Das nächste, woran wir in dieser Anwendung arbeiten sollten, ist das Einbringen einer Art reaktionsfähiges Raster. Ich würde dazu gerne ein anderes npm-Paket verwenden, es heißt react-simple-flex-grid .
Unser Ausgangspunkt wird eine StackBlitz-Demo sein, die einfach ein Fork der Demo ist, bei der wir im letzten Artikel aufgehört haben. Ich würde empfehlen, einen Fork dieser Demo zu machen, wenn Sie vorhaben, mitzumachen. Ansonsten lesen Sie einfach weiter und verstehen Sie, dass Sie jede der von mir bereitgestellten Demos öffnen können, um mit dem Code an jedem Haltepunkt im Beitrag zu spielen. Ich werde an verschiedenen Stellen unten mehrere Demos bereitstellen.
Unsere Anwendung sollte zunächst wie das folgende Bild aussehen:
Es wird keine Preise gewinnen, aber wir konzentrieren uns noch nicht wirklich auf Look and Feel, wir bekommen immer noch unsere Seebeine in dieser sich ständig bewegenden und skalierenden, reaktionsschnellen Welt. Und wir haben bereits einige sehr grundlegende Layouttechniken gelernt, auf denen wir aufbauen können. Vor diesem Hintergrund möchte ich mich in diesem Teil der Blogserie auf die Erstellung eines reaktionsschnellen Rasters konzentrieren, das wir in unserer Anwendung verwenden können, damit wir nicht so etwas wie Bootstrap einführen müssen, nur um ihr Raster zu verwenden.
Ich werde etwas nachbauen, das wir versuchen und bauen können, das dieses Gitter für viele Haltepunkte nutzt. Die Idee wird ein Raster aus Logos von Unternehmen sein, die unser Produkt verwenden. Dies ist eine ziemlich übliche Sache, die Unternehmen auf ihrer Website machen, und das gleiche Konzept kann auf viele verschiedene Zwecke angewendet werden. Ich muss zuerst eine Reihe von Logos besorgen, die wir verwenden können. Ich werde sie auf imgur hochladen, damit wir sie problemlos mit StackBlitz verwenden können. Wir zeigen diese Bilder in einem Raster an, das vier breite Bilder bei hoher Auflösung, drei breite Bilder bei mittlerer Auflösung und zwei breite Bilder bei kleiner Auflösung zeigt.
Ich werde unsere Demo forken und mit der Arbeit an unserem ersten Satz von Änderungen beginnen.
Die erste Aufgabe besteht darin, eine Liste von Unternehmen in einem .json zu erstellen Datei. Bevor wir die Liste der Logos zu einem Raster machen, sollten wir uns zuerst darum kümmern, Code zu schreiben, der jedes Unternehmen aus unserer Namensliste einem Markup in unserem JSX zuordnet. Unsere companyList.json Dateien enthalten einfach ein Array von Objekten. Jedes Objekt ist ein Unternehmen und hat einen Namen und eine Bild-URL. Ich werde für jedes Unternehmen ein Bild auf imgur.com hochladen die wir für unser Bild verwenden können.
Fügen Sie companyList.json hinzu Datei.
[
{ "name": "Nasa", "image": "https://imgur.com/RTFOOHR" },
{ "name": "Microsoft", "image": "https://imgur.com/yln0oYC" },
{ "name": "Phillips", "image": "https://imgur.com/ZHKnVr8" },
{ "name": "Fox", "image": "https://imgur.com/Hrzbo49" },
{ "name": "Sony", "image": "https://imgur.com/Ld5Ux3g" },
{ "name": "IBM", "image": "https://imgur.com/rg7RAdm" },
{ "name": "Toshiba", "image": "https://imgur.com/aj9vfmu" },
{ "name": "Volvo", "image": "https://imgur.com/hTkpXvw" }
]
Wir müssen einen Companies.jsx erstellen Seite. Diese Komponentendateien müssen nicht den .jsx verwenden Format, sie könnten genauso gut .js verwenden als Dateiendung. Wenn ich eine neue Komponente erstelle, verwende ich normalerweise .jsx .
import React from 'react';
import companyList from './companyList.json';
const Companies = () => {
return (
<div className="companies">
{companyList.map(co => <div>{co.name}</div>)}
</div>
);
}
export default Companies;Nichts zu komplexes hier, wir importieren React und unsere Firmenliste. Wir erstellen eine funktionale Komponente, die einfach die Firmenliste abbildet und den Namenswert in ein Div einfügt. Dies wird für jedes Unternehmen wiederholt, und jetzt können wir darüber nachdenken, wie wir stattdessen ein flexibles Raster für jedes der Bilder erstellen.
Nun fügen wir den folgenden Import zu main.js hinzu Seite:
import Companies from './Companies';
Und dann zeigen wir unsere Unternehmenskomponente unter unseren Informationen über die Kendo-Benutzeroberfläche an. Das div mit dem Klassennamen kendo-details sieht nun wie im folgenden Codebeispiel aus:
<div className='kendo-details'>
<h2>React Components</h2>
<p>Building UI for business apps is hard, even on React. Make it easy with our native React UI and DataViz components.</p>
<h2>Companies Using Kendo</h2>
<Companies />
</div>Zu diesem Zeitpunkt und wenn Sie mitverfolgt haben, stimmt Ihre Demo mit dem StackBlitz unten überein:
Reden wir über die Bilder
Die Bilder in dieser Liste sind 600 x 600 px und wir wollen sie nicht in dieser Auflösung zeigen, also wollte ich nur die Namen durchlaufen, um sicherzustellen, dass unsere Logik und unser Code funktionieren. Eigentlich möchte ich für jeden Haltepunkt ein anderes Bild haben, aber lassen Sie uns kleine Schritte unternehmen, um dorthin zu gelangen. Dies würde bedeuten, dass 600 Pixel die Größe unserer Bilder haben, die über großen Haltepunkten angezeigt werden. 300 Pixel wären die Größe unserer Bilder über dem mittleren Haltepunkt und bis zum großen Haltepunkt. Und schließlich wären unsere Bilder im Kleinformat 150 Pixel breit.
Aber im Moment können wir sie einfach so skalieren, dass sie 100 % ihres Platzes einnehmen.
Lassen Sie uns das Paket hinzufügen, das wir für eine Flexbox-Grid-Lösung verwenden möchten:react-simple-flex-grid . Ich habe dieses Paket aufgrund seiner Benutzerfreundlichkeit ausgewählt. Ich habe mehrere Pakete für React ausprobiert, die ein ähnliches Komponentenmodell bereitstellten. Anstatt divs zu erstellen, erstellen wir <Row></Row> und <Col></Col> Stichworte. Obwohl diese Bibliothek einfach ist, können wir einige komplexe Dinge tun. Um ein Raster zu erstellen, verwenden wir nur eine Zeile. Innerhalb dieses Row-Tags wiederholen wir unsere a Col-Komponente für jedes Element in unserer Liste. Wir können dann Anweisungen für jeden Haltepunkt bereitstellen.
So möchte ich ihre Komponenten-API verwenden:
Das Flex-Grid
Ich arbeite mit dem standardmäßigen 12-Spalten-Raster und möchte:
- Bei XSmall:Jede Col-Komponente nimmt 6 Spalten jeder Zeile ein
- Klein:Jede Col-Komponente nimmt 4 Spalten jeder Zeile ein
- Bei Medium:Jede Col-Komponente nimmt 3 Spalten jeder Zeile ein
- Im Großen und Ganzen:Jede Col-Komponente nimmt 2 Spalten jeder Zeile ein
- Bei XLarge:Jede Col-Komponente nimmt 2 Spalten jeder Zeile ein
Dies bedeutet auch:
- Bei XSmall:Es gibt 2 Bilder pro Zeile
- Klein:Es gibt 3 Bilder pro Zeile
- Bei Medium:Es gibt 4 Bilder pro Zeile
- Allgemein:Es gibt 6 Bilder pro Zeile
- Bei XLarge:Es gibt 6 Bilder pro Zeile
Dazu aktualisieren wir den JavaScript-Teil, der die companyList abbildet, um zu generieren, was wir benötigen, um die von react-simple-flex-grid bereitgestellten Komponenten zu verwenden . Standardmäßig sind die Breakpoints:
- XSmall:0-767
- Klein:768–991
- Mittel:992-1199
- Groß:1200–1599
- XLarge:1600-unendlich
In Anbetracht all dessen genügt ein Blick auf die GitHub- oder NPM-Seite für react-simple-flex-grid , sollten Sie sehen, dass die JSX, die wir schreiben müssen, wie folgt wäre:
<Row gutter={40}>
{companyList.map(co =>
<Col
xs={{ span: 6 }} sm={{ span: 4 }} md={{ span: 3 }}
lg={{ span: 2 }} xl={{ span: 1 }}
>{co.name}</Col>
)}
</Row>Wenn wir beschreiben müssten, wie unser Raster über dem mittleren Haltepunkt und unter dem großen Haltepunkt aussehen würde, würde es so aussehen:
Aber mit nur Text in jeder Spalte sieht es nicht so aus, wie wir es wollen, also fügen wir die Bilder hinzu. Aktualisieren Sie Ihren Code in der Companies-Komponente, um den folgenden JSX zurückzugeben:
const Companies = () => {
return (
<Row gutter={40}>
{(companyList).map(co =>
<Col
xs={{ span: 6 }} sm={{ span: 4 }} md={{ span: 3 }}
lg={{ span: 2 }} xl={{ span: 1 }}
><img src={`${co.image}.jpg`} width="100%"/></Col>
)}
</Row>
);
}
Zu diesem Zeitpunkt und wenn Sie mitverfolgt haben, stimmt Ihre Demo mit dem StackBlitz unten überein:
Jetzt, da wir unsere Seite besser gestalten können, möchte ich unser Flexbox-Layout überdenken. Die benutzerdefinierte Arbeit, die wir mit den Medienabfragen in unserem CSS gemacht haben, ist nicht so hübsch und es ist viel besser, klaren, prägnanten Code zu schreiben, einschließlich CSS. Wenn ich auf die Navigationsleiste und den Hauptcode zurückblicke, kann ich mir nicht vorstellen, es wirklich zu verstehen, wenn ich es nicht geschrieben habe. Ich glaube auch nicht, dass es unser Ziel ist, das CSS, das wir für das Grid brauchen, selbst zu schreiben. Das könnte ein ganzer Artikel für sich sein. Was wir wollen, ist eine Art Komponente, die die Details des Aufbaus eines Flexbox-Grids abstrahieren und diese Technologie in einem einfachen React-Komponentensystem verfügbar machen kann. Ich scheue mich nie davor, Code wegzuwerfen. Bringen wir also den Müll raus.
Ich denke, dass wir mit diesem neuen einfachen Grid-System ein ähnliches Layout erreichen können, außerdem können wir einige der verwirrenden CSS, die wir zuvor geschrieben haben, loswerden und stattdessen diese Row- und Col-Komponenten von React Simple Flex Grid verwenden. Wir werden etwas CSS-Code haben und er wird einige Haltepunkte enthalten, aber lassen Sie uns die Haltepunkte verwenden, die standardmäßig im React Simple Flex Grid enthalten sind. Nachdem ich mit dem Bildschirm in verschiedenen Größen herumgespielt habe, denke ich, dass meine anfängliche Idee, mehrere Haltepunkte bei so kleinen Größen zu haben, am Ende nicht genau das ist, was ich will. Also werde ich den Haltepunkt bei 415 Pixel entfernen. Sehen wir uns noch einmal an, was die Standard-Haltepunkte für dieses Grid-System sind.
- XSmall:0-767
- Klein:768–991
- Mittel:992-1199
- Groß:1200–1599
- XLarge:1600-unendlich
Wenn ich mir diese Reihe von Breakpoints anschaue, denke ich, dass wir mit nur zwei Header-Grafiken davonkommen können. Einer von ihnen wird bis zu 768 Pixel angezeigt. Dann wechseln wir zu einem kleineren quadratischen Bild. Ich habe zwei neue Bilder zur Verwendung erstellt:
Unser Kleiner Das Bild muss 767 Pixel breit sein, denn 767 Pixel breit ist die größte Breite, die angezeigt werden kann, bevor der Haltepunkt bei 768 Pixel erreicht wird
Unser Medium-Up Das Bild wird 300 Pixel breit sein, da dies das Größte zu sein scheint, das ich dieses Bild vorerst anzeigen möchte. Wir könnten jederzeit ein anderes Bild erstellen, um viel größere Bildschirme zu bedienen, aber der Kürze halber gehen wir zurück, um nur kleine vs. mittlere und höhere Bildschirme zu bedienen.
Klein:
Mittelhoch:
Um viele mühsame Schritte zu sparen, denke ich, dass der beste Weg, diese neuen Änderungen mit dem React Simple Flex Grid zu präsentieren, darin besteht, dass ich einen Zauberstab schwinge und Ihnen ein aktualisiertes StackBlitz-Beispiel zeige, das umgestaltet wurde. Aber ich werde erklären, was ich in diesem Refactor gemacht habe:
Meine Idee hier ist, unsere React Simple Flex Grid-Komponente anstelle des benutzerdefinierten Flexbox-Codes zu verwenden, den wir uns ausgedacht haben. Es wird unser CSS und unser HTML bereinigen. Ich werde auch den Informationsabschnitt der Kendo-Benutzeroberfläche in eine eigene Komponente namens KendoInfo verschieben , genau wie Companies eine eigene Komponente hat. Unser main.js Datei sollte ziemlich einfach zu betrachten sein. Aus diesem Grund werde ich das Responsive-Image auch in eine eigene Komponente packen, damit es den JSX nicht überfrachtet.
Umzug unseres ResponsiveImage -Komponente in einen Wrapper ermöglicht es uns auch, bei Bedarf Requisiten an sie zu übergeben. Wir werden das jetzt nicht tun, aber es ist eine gute Idee für die Zukunft. Beispielsweise könnten wir ein Array von Bildern mit jeweils einer Mindestbreite übergeben. Diese Daten könnten verwendet werden, um den ResponsiveImageSize zu generieren Komponenten in ResponsiveImage Komponente. Aber jetzt haben wir zumindest den Code abstrahiert und ihn außerhalb von main.js verschoben Datei und getrennt.
Sehen wir uns an, was unser aufgeräumter main.js ist Datei sieht jetzt so aus:
const App = () => {
const checkIfMediumPlus = useMediaPredicate("(min-width: 768px)");
return (
<Row gutter={40}>
<Col xs={{ span: 12 }} sm={{ span: 2 }}>
<MenuWrapper isMediumPlus={checkIfMediumPlus} />
</Col>
<Col xs={{ span: 12 }} sm={{ span: 10 }} >
<Row gutter={0}>
<Col xs={{ span: 12 }} sm={{ span: 3 }} md={{ span: 3 }}>
<KendoImage />
</Col>
<Col xs={{ span: 12 }} sm={{ span: 9 }} md={{ span: 9 }}>
<KendoInfo />
</Col>
<Col span={12}>
<Companies />
</Col>
</Row>
</Col>
</Row>
);
}Dies ist für jeden viel einfacher zu betreten und zu verstehen, was vor sich geht. Solange sie ein grundlegendes Verständnis dafür haben, wie andere 12-Spalten-Raster funktionieren, oder vielleicht in der Vergangenheit mit Bootstrap oder Foundation gearbeitet haben, kommt ihnen das bekannt vor.
Wie für custom.css -Datei habe ich einige Breakpoints eingerichtet, die mit react-simple-flex-grid übereinstimmen defaults und ich ging sorgfältig jeden Haltepunkt durch und schrieb einige Stile für jede Komponente. Wir erhöhen auch die Textgröße insgesamt, wenn wir auf mittel und höher steigen. Es ist nicht perfekt, aber es ist besser als das, was wir vorher hatten, und einfach zu lesen und zu verfolgen, während Sie das Dokument durchblättern.
.navbar {
background-color: #fff;
}
.component-responsive-image img {
padding: 1em;
width: 100%;
}
.kendo-info {
padding: 1em;
}
.companyList {
padding: 1em;
background-color: #efefef;
}
@media screen and (min-width: 0px) {
.component-responsive-image img {
padding: 0;
width: 100%;
}
.companyList h2, .kendo-info h2 {
margin-top: 0;
}
}
@media screen and (min-width: 768px) {
.navbar {
height: 100vh;
padding-top: 1em;
background-color: #efefef;
}
.component-responsive-image {
height: 100%;
}
.component-responsive-image img {
padding: 1em;
max-width: auto;
height: 100%;
}
.companyList {
background-color: #fff;
}
.kendo-info {
font-size: 1.25em;
}
}
@media screen and (min-width: 992px) {
.kendo-info {
font-size: 1.5em;
}
}Schließlich habe ich einige grundlegende Anordnungen der Dateien in den jeweiligen Verzeichnissen vorgenommen:
Abschluss
Damit sind wir am Ende dieses Teils der Serie angelangt. Bisher haben wir in unserem ersten Artikel beschrieben, wie man manuell mit Flexbox arbeitet, sowie gebrauchsfertige React-Komponenten aus dem Ökosystem untersucht, die uns helfen, ein reaktionsfähiges Verhalten zu erreichen, ohne die ganze Arbeit manuell zu erledigen. In diesem Artikel haben wir uns weiterhin auf das Ökosystem gestützt, um ein einfaches und benutzerfreundliches Rastersystem zu finden, mit dem wir ansprechende Layouts und Raster für andere Zwecke wie eine Bildergalerie erstellen können. Ich hoffe, Sie haben das Gefühl, dass Sie sich jetzt ein wenig besser mit Responsive React auskennen.
Es lohnt sich immer zu wissen, wie dieses Zeug unter der Haube funktioniert, aber es gibt heutzutage keinen Grund, ein eigenes Flexbox-Grid zu rollen - dies einmal zu tun, um das Grundverständnis zu erlangen, ist großartig, aber es gibt viele Komponenten, die das tun kann dir dabei helfen. Es spart viel Zeit und Ärger und es ist nicht schwer zu ändern, wenn Sie zu einer anderen Lösung wechseln.
Nachfolgend finden Sie unsere letzte StackBlitz-Demo und das Ergebnis dieser Refactoring-Übung. Wenn ich für die vollständige Erstellung dieser Anwendung verantwortlich wäre, wäre dies ein großartiger Ausgangspunkt, und wir hätten Tools, die uns dabei helfen können, das alltägliche Reaktionsverhalten und Layout in unserer Anwendung zu bewältigen.