Wie React Icons ausfüllen / Alternative?

In meiner React Component (siehe unten) ist leider das Icon ArrowUpCircleSharp von "react-icons" innen unausgefüllt was nicht schön aussieht wenn es sich über Text und Bilder bewegt, andere Icons wie von FontAwesome Material Icons haben das gleiche Problem. Ich habe es versucht mit den Props Stroke, Fill und mit CSS background, ändert aber nur das Schwarze außen und nicht innerhalb vom Icon.
Was kann ich tun ? Will jetzt nicht umbedingt eine ganze Library einbinden für das Icon, bei react-icons hab ich den Vorteil das es nur die benutzen auch wirklich nutzt,

Bild zum Beitrag

'use client';
import { useEffect, useState } from "react";
import "../.././assets/styles/components/ScrollToTop/ScrollToTop.scss";
import { IoArrowUpCircleSharp} from "react-icons/io5";


export const ScrollToTop = () => {

const [ScrollY,setScrollY] = useState<number>(0);

useEffect(() => {
    window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))

    return () => {
        window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))
    }
}, [ScrollY])

    return(

        <div
            onClick={()=>{ScrollY > 100 ?
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : 0})
            :
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : document.body.scrollHeight});
            }}
        className={`ScrollToTop ${ScrollY > 100 ? " ScrollToTop_Up" : "ScrollToTop_Down"}`}>
                <IoArrowUpCircleSharp/>
        </div>
    )
}

14.07.2024, 11:50

Mein SCSS: @import "../../globals/_css-resets.scss";
@import "../../globals/_mixins.scss";
@import "../../globals/_variables.scss";
@import "../../globals/_media-queries.scss";
@import "../../globals/_font-face";

.ScrollToTop{
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    z-index: 1000;
    cursor: pointer;
    color: #000;
    font-size: 56px;
    @media screen and (max-width : $Mobile_Breakpoint_L) {

    }
    &::before{
  /*top left content usw.*/
  @include pseudo_positionieren();
        background-color: red;
        border-radius: 100%;
        aspect-ratio: 1/1;
    }
}

.ScrollToTop_Up{
    svg{
        rotate: 0deg;
        transition: all .5s;
    }
}
.ScrollToTop_Down{
    svg{
        rotate: -180deg;
        transition: all .5s;
    }
}

2 Antworten

timlg07

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

14.07.2024, 11:33

Ich denke die schnellste Lösung in diesem Fall wäre einfach einen weißen Kreis hinter das Icon zu legen. Dafür könntest du ggf. ein Pseudo-Element (::before / ::after) verwenden, oder einfach ein div, das du um das <IoArrowUpCircleSharp> wrappst.

Mit `aspect-ratio: 1` oder für ältere Browser auch `padding-bottom: 100%` ist das quadratisch und mit `border-radius: 50%` ein schöner runder Kreis. Background-color geben, hinter dem Icon platzieren (falls du ein Pseudo-Element verwendest, ansonsten passt das eh schon) und dann sollte das klappen :)

Woher ich das weiß:Berufserfahrung

johndont

Beitragsersteller

14.07.2024, 11:36

Danke aber das hatte ich schon versucht hat leider nicht so geklappt, man sieht den gleichen Effekt wie wenn ich sage

border: 3px solid white;

Innen ist es weiß aber da wo das schwarze ist bekommt außen nochmal weißen Rand.

timlg07

14.07.2024, 11:39

@johndont

Weil das Icon nicht den kompletten Container ausfüllt, also quasi nicht alles überdeckt?

johndont

Beitragsersteller

14.07.2024, 11:53

@timlg07

Das ist mit den Dev Tools zu sehen, kenne mich leider garnicht aus mit SVG Grafiken und wie man diese Editieren kann.

<div class="ScrollToTop ScrollToTop_Up"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm80.09 224L272 208.42V358h-32V208.42L175.91 272l-22.54-22.7L256 147.46 358.63 249.3z"></path></svg></div>

Das mit der Border habe ich gerade nachträglich in die Frage ergänzt, vielleicht kannst du es bei dir Nachstellen und was erkennen. Und dazu habe ich ein Bild ergänzt.
Ich weiß ehrlich nicht was da fehlt

iQa1x

14.07.2024, 11:54

Hindert dich was daran, den Pfeil einfach selbst einzufügen?

<svg xmlns="http://www.w3.org/2000/svg" style="width:1em" viewbox="0 0 5 5">
  <circle
     style="fill:#000000;fill-opacity:0.979592;stroke:#000000;stroke-width:0.0360134"
     id="path231"
     cx="2.5"
     cy="2.5"
     r="2.4819932" />
  <path
     style="fill:#ffffff;stroke:#000000;stroke-width:0.0362033px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="M 1.5549134,2.3235735 2.3382928,3.0793488 2.3251167,1.2888531 2.6868601,1.2983891 2.7036294,3.0698122 3.4594588,2.3140371 3.7385519,2.5882142 2.5167683,3.7874409 1.2831558,2.5804655 Z"
     id="path457" />
</svg>

Also dieses SVG-Bild statt <IoArrowUpCircleSharp> verwenden.

Woher ich das weiß:Berufserfahrung – Softwareentwickler & Admin

johndont

Beitragsersteller

14.07.2024, 12:06

Danke daran habe ich garnicht gedacht weil ich keine Ahnung von SVG-Grafiken habe, aber wir haben ja heutzutage ChatGPT.

Muss es damit nur in validen JSX Code wegen dem style umändern und minimal kleiner machen dann passt es.

iQa1x

14.07.2024, 12:07

@johndont

Ich habe das Ding schnell in Inkscape zusammengeklickt, ich habe den Pfeil auch nicht von Hand als Code geschrieben ;)

johndont

Beitragsersteller

14.07.2024, 12:13

@iQa1x

Achso das kannte ich garnicht, dachte immer falsch man macht so simple Icons manuell selber und aufwendige Logos mit Programmen die so teuer sind wie Adobe Canva.
Werde ich mir anschauen aber auch seltsam das react-icons nicht selber die Props hat um das innere auszufüllen.

Hatte mich schon seit Tagen gestört auf meiner Website

Ähnliche Beiträge

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

...zum Beitrag

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zum Beitrag

Portfolio Webseite programmieren, aber welche Technologie sollte ich verwerden?

Hallo,

ich programmiere seit einigen Jahren aktiv in verschiedenen Spielen und studiere zudem Informatik. Nun möchte ich eine Portfolio-Webseite erstellen, um mich intensiver mit dem Thema Webentwicklung auseinanderzusetzen. Ziel ist es, meine Person, Projekte und Ideen ansprechend darzustellen.

Besonders wichtig ist mir dabei ein ansprechendes Design.

Ich habe bereits Erfahrungen mit HTML und CSS gesammelt und frage mich nun, ob ich Frameworks wie React oder Vue.js für dieses Projekt nutzen sollte. Welches Framework würdet ihr mir empfehlen, und welches wäre am besten geeignet für eine Portfolio-Webseite?

Ich plane, mich anschließend in das empfohlene Framework einzuarbeiten.

Vielen Dank im Voraus für eure Unterstützung!

Mit freundlichen Grüßen,
Florian R.

...zum Beitrag

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zum Beitrag

Welches JavaScript Framework?

Hallo zusammen,

ich bringe mir seit ein paar Monaten HTML, CSS und JavaScript bei, habe mir ein Portfolio aufgebaut und lade dort die Projekte hoch, die ich privat entwickle, um einen einfacheren Berufseinstieg zu erhalten. Aktuell fühle ich mich in den drei oben genannten Bereichen fit genug, dass ich mich gerne in ein Framework einarbeiten würde.

Es gibt da draußen mehrere Videos über das Thema Angular, React, Vue.js, aber ich würde gerne von euch, die wirklich beruflich damit arbeiten und eventuell auch vom Hörensagen anderer Entwickler, wissen, was so im deutschen Arbeitsmarkt angesagt ist.

React ist ja, was die Rankings angeht, immer auf Platz 1, weswegen ich in diese Richtung gehen wollte. Jedoch, wenn ich auf Stepstone und anderen Plattformen schaue, werden öfters Angular-Stellen gesucht. Deswegen hat sich mir die Frage gestellt, ob React vielleicht eher im Rest der Welt populär ist und in Deutschland eventuell eher Angular oder gar ein ganz anderes Framework.

Ich bedanke mich im Voraus für eure Zeit und Hilfe.

...zum Beitrag

Wie schwer ist React?

...zum Beitrag

Framework für laravel?

Hallo.

Erstmal ich kann noch kein framwork und kenne mich in php und einigermaßen in js aus.

Weil ich gehört habe, dass laravel ein gutes framework ist ,möchte ich es lernen.

Jetzt die Frage welches framwork am besten für das frontend in laravel ist?
Ich würde als erstes das frontend framwork lernen und dann laravel, ist das eine gute Idee?

Bitte auch mit Begründung.

Danke im voraus

Ps.: Ich nutze immer SCSS, bitte berücksichtigen.

...zum Beitrag

Nutz ihr Frameworks in JavaScript und warum?

Ich habe 2004 mit Frameworks in JavaScript angefangen und viele, viele Jahre mit unterschiedlichen Framework gearbeitet. Seite ca. 5 Jahren arbeite ich bevorzugt ohne Frameworks oder vermeide diese so gut es möglich ist.

Meine Frage an die Community, nutzt ihr JavaScript-Frameworks und wenn ja, welche Frameworks und in welchen Umfang?

Ich freue mich auf euren Antworten und bin gespannt wieviel von euch Frameworks in welchen Umfang ihr nutzt.

...zum Beitrag

Ist es noch sinnvoll, NextJS zu lernen?

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

...zum Beitrag

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zum Beitrag

Inwiefern unterscheiden sich React und Angular bzw. ist Angular schwerer zu erlernen, wenn man React beherrscht?

Hallo, ich habe bereits eine einjährige Weiterbildung zum Softwareentwickler abgeschlossen bzw. werde es am 07.11. mit einem Abschlussprojekt abschließen.

Nun habe ich eine Praktikumsstelle für zwei Monate gefunden und habe bei denen auch unterschrieben und fange dort am 08.11. an. Die meinte zu mir, dass die mit Angular arbeiten und ich habe in meiner Weiterbildung nur mit React gearbeitet. Das wissen die natürlich auch.

Meine Frage wäre: Inwiefern unterscheiden sich die beiden bzw. ist Angular schwerer zu erlernen, wenn man React beherrscht?

Ich muss es leider in der Praktikumszeit erlernen. Ich finde es natürlich cool, neue Technologien zu lernen, weil Angular auch gefragt ist, aber ich wollte generell wissen, wie die Unterschiede sind und ob es leicht zu verstehen ist.

Manche behaupten auch, dass React schwerer ist und das kann ich natürlich nicht bestätigen, weil ich von Angular keine Ahnung habe.

...zum Beitrag

Web Framework Battle?

Moin moin meine Lieben,

React oder Angular? Oder doch lieber die Newcomer Vue.js oder Svelte? Oder etwas ganz anderes?? Ich weis, das ist eine niemals endende Diskussion, aber mich würde interessieren welches Framework ihr benutzt und warum ihr von diesem Framework überzeugt seit.

Ich fang mal an:

Ich benutzte React mit TypeScript, da es mir vom Aufbau und der Struktur gefällt. Ich kann mich mit React als funktionales Framework besser anfreunden als mit Angular, welches auf objektorientierte Programmierung setzt.

Vor allem in Verbindung mit NextJS überzeugt mich das Framework mit starker Performance und exzellentem SEO. Mit diesem Stack erziele ich bei jeder Website knapp ein 100er Ranking in allen Kategorien bei Google PageSpeed Insights.

Ein solch gutes Ranking hab ich z.B. bei einer Angularseite bisher noch nicht gesehen.

Auch bei der Weiterentwicklung des Frameworks sehe ich eine sehr gute Entwicklung bei React, z.B. bekommt React in der nächsten Version einen Compiler, worauf ich bereits sehr gespannt bin.

...zum Beitrag

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

...zum Beitrag

Nach HTML und CSS nun JavaScript oder TypeScript?

Guten Tag zusammen,

ich habe mich nun mit HTML und CSS beschäftigt ein Portfolio erstellt und würde nun den nächsten Schritt wagen und mir JavaScript oder TypeScript anschauen und aneignen.

Würdet Ihr mir eher raten Javascript zu lernen, weil darauf TypeScript aufbaut oder sagt ihr keine Zeit verschwenden direkt TypeScript da später Beruflich TypeScript mehr Sinn macht kann man ja mit React auch nutzen und Angular sogar ausschließlich soweit ich weis.

Ach ja wäre nett wenn Erfahrene Entwickler im Frontendbereich auch sagen könnten was man sich noch alles beibringen sollte im Anschluss.
Aktuelles Ziel wäre es eben JavaScript oder Typescript zu lernen dann mit React anzufangen aber was sollte man alles drauf haben bevor man zu React geht.
z.B. höre ich immer wie wichtig REST-APIs sind gibt es da vllt eine Seite wo man es verständlich erlernen kann? Bin für jeden Tipp sehr dankebar.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen