Starten einer React-Anwendung im Jahr 2020

2020 war eine emotionale Achterbahnfahrt! Eine Sache, auf die ich mich sehr freue, ist eine neue App hier bei FloQast, an der wir gearbeitet haben, und ich würde gerne einige der interessanten Herausforderungen teilen, vor denen wir mit dieser Greenfield-Anwendung standen, insbesondere im Frontend.

Wenn Sie eine App von Grund auf neu erstellen, gibt es wichtige Entscheidungen, die die Verwaltbarkeit Ihres Codes beeinflussen können. Und wenn diese Entscheidungen nicht zu Beginn der Entwicklung getroffen werden, kann es sein, dass Sie in ein massives Refactoring-Loch geraten.

Stylesheets: Brauchen wir sie?

Als die App nur ein Machbarkeitsnachweis war, war meine Hauptpriorität einfach, sie zum Laufen zu bringen. Um mir das Leben zu erleichtern, hatte ich diese tolle Idee für das CSS (wirklich ziemlich schrecklich):

1. Ein einziges Master-Stylesheet, das alle gängigen CSS-Klassen enthält
2. Ein einzigartiges Stylesheet für jede Ansicht, das Stile im allgemeinen CSS überschreiben kann.

Ich dachte, das würde zu DRY und wiederverwendbarem Code führen, aber am Ende hatte ich Spaghetti. Hier ist ein Ausschnitt aus der Master-CSS-Datei:

.section-header button {
  background: #084683';
  padding: 7px 15px;
  margin-left: 10px;
  transition: all 0.1s ease;
}
.section-header button:hover {
  background: #0a2950;
}
.email-group button {
  font-size: 20px;
  cursor: pointer;
  color: #0f3c76;
  margin: 0px 10px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease-in-out;
}
.email-group button:hover {
  color: #bb4c4c;
}

Und hier ist ein weiterer Ausschnitt von unserer Anforderungsseite, der das Design dieser Schaltfläche etwas ändern würde:

.requests-section .section-header button {
  padding: 10px 20px;
  margin-left: 10px;
}

Stellen Sie sich nun vor, dass sich das über Tausende von Zeilen wiederholt, was wir hatten — nur riesige, lebensfragende CSS-Dateien.

Das war ein Albtraum! Jedes Mal, wenn ich ein Update an diesem Master-Stylesheet vornehmen wollte, wie zum Beispiel die Aktualisierung eines CSS-Klassennamens, musste ich mir schmerzlich bewusst sein, dass ich woanders nichts kaputt gemacht habe. Als wir einen neuen Ingenieur in das Team holten, wurde besonders deutlich, dass wir dieses Paradigma nicht weiter ausbauen konnten.

Geben Sie Styled-Components ein

Gestalterte Komponenten waren die perfekte entwicklerfreundliche Lösung. Dies ist ein Beispiel für eine Schaltflächenkomponente, die zuvor in diesem Master-Stylesheet existierte:

import React from 'react';
import styled from 'styled-components';


const Button = styled.button`
  color: #fff;
  font-size: 13px;
  background: ${props => (props.isError ? '#FF2722' : '#084683')};
  border-radius: 4px;
 box-shadow: 0 1px 3px 1px #E1E6EA;  
 padding: 7px 15px;
 width: 72px;
 text-align: center;
`;


const SquareButton = ({
  id, onClick, children, className, isError,
}) => (
  <Button
    id={id}
    className={className}
    onClick={onClick}
    isError={isError}
  >
    { children }
  </Button>
);


export default SquareButton;

export default squareButton; Was ich an gestylten Komponenten liebe, ist, wie man alle Zustände und Eigenschaften, die das Aussehen von etwas wie einer Schaltfläche beeinflussen, in einer einzigen Datei kapseln kann. Das war ein frischer Wind, denn wir mussten uns wirklich nur auf die Versandfunktionen konzentrieren.

Jetzt musste ich mir keine Gedanken mehr über Dinge wie verschachtelte Klassen und die Organisation von CSS in der gesamten Anwendung machen. Stephanie Chiu, eine andere FloQast-Ingenieurin, hat einen großartigen Artikel über die Vorteile dieses Paradigmas geschrieben: Gestylte Komponenten in React: Abkehr von SCSS.

Als Entwickler ist das großartig, weil es weniger darum geht, sich daran zu erinnern, wo sich der Code befindet, sondern mehr darum, flexible Anpassungen vorzunehmen.

Hab keine Angst vor Hooks

Es ist 2020 und React-Hooks sind aktueller denn je. Egal, wo Sie sich befinden, es wird eine Debatte über funktionale Komponenten im Vergleich zu Klassenkomponenten geben. Der FloQast-Ingenieur Luyao Pan hat einen großartigen Artikel zu genau diesem Thema veröffentlicht: Mit React Hooks den Status einfacher verwalten

Persönlich war ich die längste Zeit Klassistin, aber ich bin auf den Zug der funktionalen Komponenten aufgesprungen. Bitte denken Sie daran, dass diese Änderung nicht über Nacht erfolgt ist. Ein Problem, das ich bei dieser neuen Architektur entdeckt habe, ist die Unfähigkeit, Referenzen einfach von einer übergeordneten an eine untergeordnete Komponente zu übergeben. Natürlich würden Sie so etwas versuchen:

import React, { Fragment, useRef } from 'react';

const ParentComponent = () => {
  const myChildRef = useRef();

  const handleOnClick = () => {
    if (myChildRef.current) {
      myChildRef.current.focus();
    }
  };

  return (
    <Fragment>
      <button onClick={handleOnClick}>
        Focus Input
      </button>
      <ChildComponent ref={myChildRef}>
        Child
      </ChildComponent>
    </Fragment>
  );
};

export default ParentComponent

und

import React from 'react';

const ChildComponent = ({ ref }) => {
  return (
    <input ref={ref}/>
  );
};

export default ChildComponent

Sie hätten Recht, wenn dies Klassenkomponenten wären, aber leider erhalten wir eine Fehlermeldung: Referenz kann nicht an Funktionskomponente übergeben werden 

Das sind wirklich existenzielle Dinge. Warum kann ich nicht einfach auf Methoden zugreifen, die nur in der untergeordneten Komponente verfügbar sind? Fehler wie dieser und die mangelnde Vertrautheit mit dem neuen Paradigma können Entwickler wirklich von der Einführung abhalten. Zum Glück haben die Entwickler von Facebook eine Lösung für uns. Wir führen Forward-Refs ein, eine Erinnerung daran, dass es auf der Welt immer noch Gutes gibt.

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  return (
    <input ref={ref}/>
  )
});

Das war's — keine Fehler mehr! Es ist eine sehr einfache und elegante Lösung für ein häufiges Problem, mit dem Sie bei der Verwendung von Haken konfrontiert werden. Denken Sie daran: Das Internet ist Ihr Freund und React hat buchstäblich zu allem eine Dokumentation. Hooks und funktionale Komponenten helfen uns dabei, wiederverwendbaren Code zu erstellen.

Ein paar Abschiedsworte

Es hat enorme Vorteile, eine Bewerbung von Grund auf zu schreiben. Sie können die Codebasis wirklich beeinflussen und langfristige Strategien fördern. Denken Sie also daran, bei Dingen wie Ihrem CSS-Paradigma und Ihrer Komponentenstrategie entscheidend zu sein. Sie spielen eine wichtige Rolle für den Lebensunterhalt Ihrer Bewerbung. Vor diesem Hintergrund laufen Dinge selten perfekt, wenn sie zum ersten Mal implementiert werden. Die frühen Entwicklungsphasen sind wirklich nicht anders als in der Produktion, es geht nur um Versuch und Irrtum. Finden Sie heraus, was für Ihr Team am besten ist. Wenn Sie sich frühzeitig mit diesen Themen befassen, können Sie gigantische Refaktoren vermeiden und sich auf die Entwicklung von Funktionen konzentrieren.