Bringen Sie Ihnen bei, wie Sie ein React+Antd-Projekt von Grund auf erstellen

Bei den vorherigen Artikeln handelte es sich um meine eigenen Lernprotokolle, hauptsächlich um zu verhindern, dass ich die Fallstricke vergesse, auf die ich zuvor gestoßen bin. Dieses Mal beginnen wir mit der grundlegendsten Projektkonstruktion und erstellen ein Hintergrundverwaltungssystem basierend auf React und Antd. Ich werde Schritt für Schritt vorgehen, sodass Sie nach dem Lesen dieses Artikels in der Lage sein sollten, mit React ein einfaches Projekt zu erstellen, auch wenn Sie React nicht kennen. Lassen Sie uns ohne weitere Umschweife loslegen. Bitte besuchen Sie GitHub, um das vollständige Projekt anzuzeigen, und klicken Sie hier, um es zu erleben. Wenn Du es ok findest, vergebe bitte einen Stern, Danke.

1. Entwicklungsumgebung:

node.js -v 12.16.3

Erstellen-Reagieren-App -v 3.4.1

antd -v 4.3.3

Bevor Sie das Projekt starten, installieren Sie create-react-app global. Fügen Sie unter macOS vor dem Befehl sudo hinzu, da sonst eine Fehlermeldung angezeigt wird, dass Sie keine Berechtigung zum Zugriff auf die Festplatte haben.

npm install -g Erstellen-Reagieren-App

2. Projektkonstruktion:

Initialisieren Sie das Projekt direkt mithilfe der Anweisungen des Gerüstwerkzeugs create-react-app. In diesem Artikel wird tsx verwendet. Wenn Sie die jsx-Version benötigen, überspringen Sie bitte die Vorlageneinstellungen. Hier ist eine kurze Einführung in jsx, die einfache Syntax von JavaScript. Es wird von React erstellt. Um Multiplattformfähigkeit zu erreichen, kapselt React einige synthetische Ereignisse auf Basis von JS. Beispielsweise unterscheidet sich das OnClick-Ereignis in React tatsächlich vom Click-Ereignis in nativem JS.

Die jsx-Version der Direktive lautet:

npx create-react-app Projektname

Die TSX-Version lautet wie folgt:

Nachdem Sie auf den Abschluss der Installation gewartet haben, ist die Initialisierung des Projekts abgeschlossen.

Gehen Sie nun zum Projektverzeichnis: cd react-admin (ersetzen Sie dies durch Ihren Projektnamen) und führen Sie den Befehl aus, um in den Entwicklungsmodus zu wechseln.

npm starten 

Kommen wir nun zum Punkt. Da React standardmäßig keine Router-Funktion hat, müssen Sie react-router und react-router-dom installieren.

Wenn Sie eine Statusverwaltung benötigen, können Sie Redux, React-Redux und Redux-Actions installieren.

Studenten, die bei Bedarf laden müssen, können @loadable/component installieren. Beachten Sie, dass die ts-Version möglicherweise einen Fehler meldet. Erstellen Sie eine loadable.d.ts-Datei und schreiben Sie den folgenden Code hinein, um das Problem zu lösen.

Deklarieren Sie das Modul „@loadable/component“.

Studierende, die Loadash verwenden müssen, können Loadash selbst installieren.

Installieren Sie als Nächstes die Antd-Komponentenbibliothek.

npm ich antd react-router react-router-dom redux react-redux redux-aktionen @typen/redux-aktionen @typen/react-router-dom @loadable/komponente axios loadash --speichern

Standardmäßig verwendet create-react-app sass. Wenn Sie andere CSS-Präprozessoren wie Less verwenden müssen, installieren Sie diese bitte selbst.

Lassen Sie mich hier auch kurz abschweifen. create-react-app verwendet standardmäßig React-Scripts und die Webpack-Konfiguration kann nicht geändert werden. Wenn Sie die Webpack-Konfiguration ändern müssen, gibt es zwei Lösungen:

1. Verwenden Sie Drittanbieterbibliotheken aus der Community, beispielsweise react-app-rewired.

2. Führen Sie den Befehl aus: npm run eject. Dadurch werden Skripte und Konfigurationsordner im aktuellen Verzeichnis generiert. Sie können die Webpack-Konfiguration ändern. Hinweis: Dieser Vorgang ist dauerhaft und irreversibel.

Zurück zum Thema, nach der Installation dieser grundlegenden Bibliotheken. Initialisieren Sie Ihr Projektverzeichnis. Sie können die Verzeichnisstruktur nach Ihren Wünschen festlegen. Meine Verzeichnisstruktur sieht wie folgt aus:

Öffnen Sie als Nächstes das Router-Verzeichnis und schreiben Sie den Code für router.tsx. Hier wird nur der Hauptcode angezeigt:

Als Nächstes können Sie das Array verwenden, um die Routenkonfiguration abzuschließen, zum Beispiel:

importiere ladbares Objekt aus „@loadable/component“;
importiere { RouteComponentProps } von „react-router“;

const Index = ladbar(() => import('../pages/index'));
const Login = ladbar(() => import('../pages/login'));

Schnittstelle RouteConfigProps exportieren {
  Pfad: Zeichenfolge,
  genau: Boolesch,
  Komponente: React.ComponentType<RouteComponentProps<beliebig>> | React.ComponentType<beliebig>,
  id: Nummer,
  Name?: Zeichenfolge,
  Routen?: Array<RouteConfigProps>
}
exportiere const routeConfig: Array<RouteConfigProps> = [
  {
    Pfad: '/login',
    genau: wahr,
    Komponente: Login,
    ID: 1,
    Name: 'Login',
    Routen: []
  },
  {
    Pfad: '/index',
    genau: falsch,
    Komponente: Index,
    ID: 2,
    Name: 'Homepage',
    Routen: []
  }
]

Als Nächstes importieren wir die Routing-Konfiguration in app.tsx und sortieren einige Antd-Konfigurationen.

importiere React von „react“;
importiere { Provider } von „react-redux“; // Anbieter bereitgestellt von Redux.
importiere zhCN von „antd/es/locale-provider/zh_CN“; // Antd Chinesisches Paket importiere { HashRouter } von „react-router-dom“; 
importiere { MeinRouter } von './router'; // router.tsx
importiere { ConfigProvider, Nachricht, Benachrichtigung } von 'antd'; 
importiere storeConfig von „./store“; // Redux Warehouseimport Moment von „Moment“; // Momentjs.
importiere 'moment/locale/zh-cn'; // Chinesisches Paket moment.js
importiere 'antd/dist/antd.css'; // Importiere Antds Stylesheet importiere './App.css'
moment.locale('zh-cn'); // Moment.js auf Chinesisch einstellen const store = storeConfig(); // Redux-Store initialisieren. Wenn kein Statusmanager benötigt wird, können Redux-bezogene Informationen ignoriert werden.

message.config({ // Konfiguration der Nachrichtenkomponente von Antd, Dauer in Sekunden, maxcount ist die maximal angezeigte Dauer: 2,
  maxAnzahl: 2
});
Benachrichtigung.config({
  Platzierung: „oben rechts“, // Konfiguration der Antd-Benachrichtigungskomponente, Platzierungsposition des Popups. bottom Der Abstand vom Boden, während der Dauer in Sekunden bottom: 50,
  Dauer: 2,
});
Funktion App() {
  zurückkehren (
    <Anbieter-Store={Store}>
      <ConfigProvider-Gebietsschema={zhCN}>
        <HashRouter>
          <MeinRouter />
        </HashRouter>
      </Konfigurationsanbieter>
    </Anbieter>
  );
}

Standard-App exportieren;

Das war’s. Der nächste Schritt besteht darin, die benötigten Komponenten zu schreiben.

Dies ist das Ende dieses Artikels, in dem ich Ihnen beigebracht habe, wie Sie ein React+Antd-Projekt von Grund auf erstellen. Weitere relevante Inhalte zu React+Antd-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!