Wie schwer ist React?

Einfach 67%

Schwer 33%

3 Stimmen

3 Antworten

Valentin1720653

15.02.2023, 17:28

Schwer

Schwer worauf bezogen?

Von den JS Frameworks sicherlich eines von denen die mit am schwierigsten sind, da es meiner Ansicht nach einfache Dinge häufig komplizierter macht als es sein müsste.

Andersrum, es ist & bleibt JS im Frontend, es gibt definitiv komplizierteren stuff.

Zwnow

15.02.2023, 18:20

Einfach

React vereinfacht viele Dinge und man kann damit wunderbar User Interfaces bauen. Es ist, anders wie schon beantwortet, kein Framework. Man kann React im gewünschten Umfang nutzen und sehr leicht in seine Projekte integrieren. Ist halt einfach eine nützliche Bibliothek

Woher ich das weiß:Berufserfahrung – Ich bin Entwickler.

Recorsi

15.02.2023, 17:16

Das kommt ganz drauf an was du für Vorerfahrung hast. Wenn du dich schon mit JavaScript oder anderen High-Level Programmiersprachen auskennst, sollte es für dich kein Problem sein React zu lernen.

Wenn du noch nie programmiert hast, ist es natürlich schwerer und ich würde erst mal mit simplen Programmieraufgaben anfangen.

Woher ich das weiß:eigene Erfahrung

Ähnliche Beiträge

Welche Sprache soll ich danach lernen?

Also ich kann JavaScript jetzt gut. Bin dabei Node.js zu lernen. Danach React/React Native.

Ihr entscheidet. Welche Sprache soll ich danach lernen? Python oder C#?

...zum Beitrag

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...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

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

React Js App Deployen auf Webserver?

Ich habe jetzt mit

 npm run build

einen Ordner namens "build", wenn ich den über den FTP Zugang hochlade und die URL aufrufe erscheint nur eine Leere Weiße Seite.

Jedoch wenn ich es über andere Anbieter Deploye die das für mich übernehmen dann funktioniert alles einwandfrei.

Wie genau kriege ich das auch hin ?
Nutze All Inkl.

...zum Beitrag

Floating Window in React Native?

Hallo,

villeicht nicht der beste ord um das zu fragen, aber wie könnte man ein

Foating Window(Fenster das über alle anwendungen ist, auch wen sie minimiert ist)
machen?

...zum Beitrag

Webentwickler Freelancer - wer kümmert sich um DSGVO?

Ist es üblich das ich als Webentwickler mich auch um Datenschutz texte und funktionierenden cookie banner kümmere (nur notwendige akzeptieren, nur marketing cookies, alle akzeptieren) usw. ?

Und je nachdem verändert sich die seite weil googoe fonts oder maps zugestimmt wurde.

Wenn ich davon nichts genau erwähnt habe im veertrag nur von home, contact page und solchen sachen die rede ist.

Wie der Name sagt bin ich Webentwickler nicht jurist.

Ich würd die ins netz stellen für die person oder offline zuschicken aber was danach passiert ist nicht mein Problem sag ich mal.

vorallem wenn ich mit wordpress was mache sind da alle möglichen plugins irgendwelche tracker und der datenschutz problematisch.

wenn ich die von Grund auf selber programmiere mit zb. react hab ich da zumindest vollen überblick.

oder wie würdet ihr da vorgehen ?

engagiert man da einen Anwalt ? Mach ich das und sollte mit 200€ extra rechnen für diese Implementierung oder der Kunde macht das alleine ?

Aber wie kennt der Anwalt sich aus mit react js oder wordpress plugins ? Und dann kann er garantieren/haften das die seite konform ist ?

Bei diesen generatoren ist das ja nicht gegeben und cookie banner muss auch ordnungsgemäß funktionieren, kann nicht sein das er unter der haube garnichts macht.

...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

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

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

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...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

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

JavaScript "window is not defined"?

Ich möchte dieses Beispiel hier in meine Next.js (React) App übernehmen:

https://codesandbox.io/s/knhlr?file=/src/index.tsx:0-691

Dazu mein Next.js (React) Code, der eine weiße Seite wiedergibt und in der console schreibt: "window is not defined"

"use client";

import ReactGlobe from "react-globe";

import markers from "./markers";
import markerRenderer from "./markerRenderer";

const options = {
    markerRenderer,
};

export default function App() {
    return (
        <div className="App">
            <ReactGlobe
                height="100vh"
                globeTexture="https://raw.githubusercontent.com/chrisrzhou/react-globe/main/textures/globe_dark.jpg"
                markers={markers}
                width="100vw"
                options={options}
            />
        </div>
    );
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen