Tag 20: React Router & SonarCloud

React-Router

Link zu Folien

Bisher war die ganze Webseite auf 1 Seite. Mit React-Router und im Frontend dem Befehl npm install react-router-dom im Terminal laden wir das Tool herunter und können nun beliebig viele Pfade und Unterseiten erstellen.

Die Syntax sieht vereinfacht so aus:

<BrowserRouter>
  <Routes>
     <Route path='/Komponente'/>

     <Route path='/Komponente/Komponente'/>

     <Route path='/Komponente/Komponente'
     element={<Funktion funktion={objekt} funktion={objekt}/>}/>

     <Route path='/Komponente/:variabel' element={<Funktion/>}/>
  </Routes>     
</BrowserRouter>

• <BrowserRouter> gibt es nur 1x im Projekt, ist für die ganze Navigierung zuständig. Dadurch wird das clientseitige Routing für unsere Web-App aktiviert. Die 'App.tsx' (main) ist unser Einstiegspunkt.
• <Routes> ist eine Gruppierung von Routen
• <Route> Unterseite unserer Seite
• path die URL unserer Seite
• element was auf der Seite dargestellt werden soll
• :variabel gibt dynamische Pfade an

Beispiel:

Navigation der Seiten

In den Seiten navigieren wir hin und her mit Links und der Navigate Funktion und dem Hook useNavigate(). Wir brauchen onClick für die Links, damit wir beim Draufklicken auf die gewünschten Seiten geleitet werden.

const navigate = useNavigate()

<Route path='/todos/:id element={<TodoDetail />}/> Durch die Pfadvariable landen wir mit unserer Id auf die Seite.

Um auf die Id zugreifen zu können, brauchen wir den React-Hook useParams(), die wird genutzt, um Variablen aus der URL zu lesen. Dann nutzen wir den Axios-Netzwerkrequest, um die Id auszulesen und erstellen dabei gleich eine schicke Fehlermeldung mit Toast.

Unsere "Einkaufsliste":

• BrowserRouter, Routes, Route, path
• useNavigate()
• Links mit onClick
• Buttons
• weitere React-Hooks wie useParams()
• Axios
• Spreading
• evtl. Toast von react-toastify

---

Code Analyse mit Sonar Cloud

SonarCloud ist ein Dienst, um die Code-Qualität permanent während der kollaborativen Entwicklung analysieren zu lassen.

Step-by-Step Anleitung zum Konfigurieren von SonarCloud bei bestehendem GitHub Repo mit Front- und Backend:

Step 0. benötigte Ordnerstruktur im Projekt:

Project Folder

Backend Folder
Frontend Folder
.github Folder (manuell erstellen!)

.workflows Folder erstellen (ggf. von GitHub Actions mit Maven-Setup schon vorhanden)

sonar-backend.yml (leer erstellen!)
sonar-frontend.yml (leer erstellen!)

sonar-project.properties (leer erstellen!)

Step 1. Neues Projekt als Monorepo aufsetzen

. . .Screenshots folgen. . .

Video-Anleitung aus dem Bootcamp