React Components mit .jsx oder .js endung?

Ich sehe bei manchen die Endung für JSX anstatt .'js'

aber ändert das überhaupt was ? Oder ist das nur Schönheit.

2. Frage)

Kann ich irgendwie konfigurieren was genau mit

npx create-react-app

alles erstellt werden soll ?

Denn App.js App.css und App.test.js Stören mich und sie zu löschen ist auch aufwendig. Lieber eine Leere Seite von anfang an statt dem drehenden React Logo.

ich hätte gerne schon unterordner unter 'src' wie zb img, audio, style,components,video usw.

2 Antworten

Functional

13.08.2022, 17:20

Du kannst den Dateinamen auch mit ".pdf" oder ".mp3" enden wenn du willst, das ist dem Bundler / Transpiler völlig schnuppe (sofern er entsprechend konfiguriert ist). Ein anderer Entwickler, der sich den Code dann vielleicht mal anschaut, wird dann nur keine Ahnung haben, was das für eine Datei sein soll und wozu sie gut ist. Genau deshalb gibt es in der Softwareentwicklungen Konventionen. Dinge, die du zwar nicht tun musst, damit dein Programm funktioniert, aber tun solltest, damit andere Entwickler (und auch du, wenn du den Code Monate später wieder vor dir hast) deinen Code besser verstehen und er einem gewissen Schema folgt. Die Dateiendung .jsx bzw. .tsx bei TypeScript ist so eine Konvention. Musst du nicht, ist aber gute Sitte. Da JSX (das "HTML"-Markup in React-Code) kein normales JavaScript ist, macht es Sinn, einer Datei, die dieses enthält, auch eine andere Dateiendung zu geben.

create-react-app musst du nicht verwenden. Du kannst einen leeren Ordner erstellen, "npm init" ausführen, und die benötigten Packages wie React selbst, aber auch Babel, Webpack usw. mit einem Package Manager (NPM / Yarn) selbst installieren und konfigurieren. Siehe hier.

Ist aber, v.a. wenn du noch nicht so viel Erfahrung hast, 1000x mehr Aufwand, als create-react-app und die entsprechenden Dateien, die du nicht benötigst, raus zu werfen.

Ansonsten gibt es für create-react-app auch diverse Templates.

Woher ich das weiß:Berufserfahrung – Inhaber einer App-Agentur & 15+ Jahre Programmiererfahrung

Anonym13592

14.08.2022, 16:46

.js = dort kommt nur Logik rein, keine HTML Syntax

.jsx = React Files, dort kannst du z.B. <h1>Hallo</h1> schreiben, zwar auch mit Logik (JS)

Ähnliche Beiträge

React Js Props State unterschied?

Was Props sind weiss ich aber State will ich nicht so ganz verstehen.

Die Dokumentation von React ist sowieso komisch.
Habe gehört das es ähnlichkeiten hat.

Props würde ich so benutzen in der index.js

import App from irgendwas…
<App name="Max"/>
Und in der App.js
const App = (props)=>{
<h1> {name.props} </h1>} 
export default …

kann man das gleiche jetzt auch mit state machen oder wie kann ich mir das vorstelle. ?

...zum Beitrag

ReactJs wie kann ich einzelne html Seiten erstellen die uber React laufen?

Ich probiere zur Zeit ein ReactJs Tutorial und frage mich gerade wie man es hinbekommt mit dem Aufruf von verschiedenen Urls verschiedene html Seiten zu laden wo dann auch so wie jetzt in der index.html die Seite mit React Componenten aufgebaut wird.

Zur Zeit wird immer die index.html geladen wenn man nach localhost plus port im Browser surft und diese index.html ist ja mit React Componenten aufgebaut, ich will jetzt aber beispielweise fuer alle verschiedenen Funktionen von React eine eigene Beispielseite bauen, z.b. ich erstelle zwei html Seiten mit Namen "functinalcomponent.html" und "classcomponent.html" dann will ich ein Link zu diesen beiden Seiten platzieren und wenn man den link klickt soll anstelle von index.html die jeweilige HTML Seite geladen werden mit React Compnenten die nur speziell fuer diese HTML Seite erstellt sind, wie macht man das oder geht das nicht?

Soweit ich das bis jetyt verstanden habe wird die index.html mit der app.js Datei gerendert und den Inhalt der index.html baut man in der app.js Datei mit Componenten auf, logisch betrachtet wuerde ich dann jetzt gerne fuer alle anderen HTML Seiten eine eigene app.js Datei erstellen damit die dann auch mit den zugehorigen React Componenten aufgebaut wird.

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

Wo am besten kostenlos React Js Lernen?

Die meisten Playlisten auf Youtube gehen nur 10 videos wovon 3 über die installation gehen

2 videos gehen über jsx

2 über props , components

2 über state und 1 über deployment

Dann hören die auf.

Ist ja alles Toll aber jetzt weiss ich nichtmal was ich nach dem absoluten Basics lernen soll.

So einen roten faden.

Dann könnte ich immerhin Irgendwelche Dokumentationen lesen

Nach 10 videos und ein wenig herumspielen hab ich sicher nicht react gemeistert.

ich hab auch keine 100 euro für einen Udemy kurs rumliegen.

...zum Beitrag

JavaScript ESLint Fehler?

Ich kriege einen Fehler wenn ich so einen React Component erstelle

const App = () => {}

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

Warum haben die das so festgelegt und was besagt die Regel?

...zum Beitrag

React Webseite mit Suchfunktion mit mehreren Seiten?

Hallo,

ich hatte mal früher kleine Anwendungen mit VB.NET für Windows-Systeme entwickelt und möchte jetzt mit React anfangen. Ich würde mich komplett als Anfänger bezeichnen und muss deshalb Fragen stellen.

Als Projekt habe ich mir folgendes vorgestellt:

Es gibt ein Kanal auf YouTube und es werden Fragen von Leuten vorgelesen und sie werden im Video beantwortet.

Ich möchte eine Webseite erstellen mit all diese Fragen und zu jeder Frage ein "Button", wenn man ihn anklickt ist unten oder irgendwo an der Seite ein Video-Player von YouTube und das Video wird abgespielt ab dem Zeitpunkt wo die Frage im Video vorgelesen wird.

Ich habe mir alle Fragen bereits aufgeschrieben und hätte alle Links zu den Fragen im Video.

Da es mehrere Videos gibt, möchte ich eine Suchfunktion integrieren, aber ich weiß nicht, ob ich für jedes Video (Teil1, Teil2,...) eine neue Seite im React erstellen soll und wie ich dann die Suchfunktion so programmiere, dass alle Seiten durchgesucht werden. Ich habe im Internet gesucht und viele benutzen .JSON für Suchfunktion, aber ich denke, dass bei mir mit .JSON nicht funktionieren wird.

Es sind über 80+ YouTube-Videos mit jeweils ca. 15-30 Fragen.

Ich möchte alles selber machen/lernen und möchte auch nicht, dass jemand mir alles vorprogrammiert.. Es wäre mir sehr hilfreich mir die richtige Richtung zu zeigen, kurz und grob erklären, mit welchen Komponenten ich arbeiten soll usw.

Hier ein Beispiel wie es ausschauen soll ungefähr:

Das design ist nicht so wichtig wie die Funktion und Struktur der Programmierung.

Vielen Dank schon mal!

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

Welchen Techstack nutzt ihr als Web Developer im Beruf?

und was Techstack ihr. Front end backend fullstack ?

Angular Typescript node js mongo bootstrap oder sowas.
React js java scss
Vue js less php

Was für wichtige libraries nutzt ihr.

Und wenn es für euch ok ist, wo arbeitet ihr genau/ungefähr / welche branche.

Und wie lange/ welche position

Arbeitet ihr fest bei zb Meta oder Freiberuflich

(Kriegt ihr regelmässig aufträge von unternehmen oder kleinere durch fiverr)

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

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 ?
Aber wie kennt der 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

Css Animation bleibt nicht so am ende wie gewünscht?

Warum resettet sich das immer zurück auf width 10% obwohl ich immernoch den Focus auf dem Element #i habe

#i{
    width: 10%;
}
#i:focus{
    animation: tap 2s;
}
@keyframes tap {
    from{width:10%}
    to{width: 20%;}
}
<input type="text" id="i">

Also das soll ein input feld sein das dann halt bisschen breiter werden soll wenn man draufklickt.

Und wenn man es verlässt soll es wieder auf den normalzustand.

...zum Beitrag

Warum entwickeln Firmen wie Google oder Facebook eigene Bibliotheken/Frameworks für Programmiersprachen?

Was genau bringt es ihnen, wenn ich kostenlos React oder Angular benutzen kann?

Marketing?

Mit Programmiersprachen macht das noch ein wenig Sinn.

Die von JetBrains haben auch passend zu Kotlin eine perfekte IDE, die sie für viel Geld "vermieten". Oder WebStorm, PhpStorm, CLion, PyCharm.

Aber ein Framework kann ich doch überall benutzen.

Kurz npx create... oder ng angular in die Konsole eingeben und schon hab ich so ein Gerüst.

...zum Beitrag

Warum benutzt man Tailwind CSS?

Wenn man mitten in den HTML Code , sowas schreibt wie

<p class="bold-900"> test </p>

Dann ergibt das für mich noch keinen sinn aus drei Gründen.

Man kann zwar bei wenig Code schnell im Code sehen was passiert aber schnell wird das doch komplett unordentlich, als würde wenn man <p style="color:red;"> benutzen.
Es ist doch Dumm sich die ganzen Tailwind Klassen auswendig zu lernen anstatt gleich die CSS Eigenschaften. Es macht doch kaum einen unterschied, ob font-size : 50px oder class="fontsize-50".
Tailwind hat auch keine fertige Komponenten wie Bulma oder Bootstrap falls man keine lust hat mal irgendwas selber zu machen.

Oder wie seht ihr das ?

Lerne zurzeit React und in vielen React Tutorials wird Tailwind genutzt.

Lohnt sich das so viel mehr als normales Css/Scss zu benutzen ?

...zum Beitrag

CSS den Text über blur effekt?

Also der body soll verschwommen sein aber nicht der div

(oder nur der div Text).

Hab es schon mit z-index versucht

 <style>
        body{
            filter: blur(5px);
            position: relative;
            z-index: -10;
        }
        div{
            font-size: xx-large;
            filter: blur(0px);
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        Hallo
    </div>
</body>

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen