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.

1 Antwort

BeamerBen

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

16.08.2021, 22:38

Vielleicht hast du create react app oder so verwendet? Das ist meines Wissens dafür da eine Single Page Application zu erstellen. Wenn man da verschiedene Seiten haben will würde man die im Browser handlen, dafür gibt es z.B. react router.

Bei create react app hättest du in deinem src eine index.js und in dieser wird quasi react initialisiert. Theoretisch kannst du so etwas in jede Seite einbauen solange du halt da react rein lädst.

Wie du ein create react app, falls du das verwendest, projekt abänderst um mehrere getrennte html Seiten zu haben kann ich dir leider aber auch gerade nicht sagen.

Woher ich das weiß:Berufserfahrung – Software Entwickler / Devops

alberttomasusw

Beitragsersteller

17.08.2021, 10:35

ich habe gesehen das man das mit react Router machen kann. in der index.js Datei baut man das auf, die verschiedenen url Aufrufe gehen dann zu den verschiedenen Componenten die man wiederum als einzelne javacsript datei erstellt hat.

BeamerBen

17.08.2021, 11:42

@alberttomasusw

Ja, ich hab react router ja selber erwähnt, ich kenne das.

Du hast technisch gesehen eben trotzdem nur eine html Seite, also nicht ganz das wonach du gefragt hast, aber wenn du einfach nur verschiedene Seiten haben willst in verschiedenen JS Files, dann reicht das und wäre vermutlich sogar der beste Ansatz.

Ähnliche Beiträge

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.

...zum Beitrag

React Vite Server Side Rendering?

Ich habe meine React-Website mit Vite erstellt und habe die Option React-SSR genommen, damit sie auf dem Server gerendert wird. Bis jetzt funktioniert alles, der Code wird im HTML-Seitenquelltext angezeigt. Aber zwei Dinge funktionieren noch nicht so gut. Die API-Daten werden noch nicht auf dem Server gerendert und ich habe es bereits gemäß der Dokumentation getan, aber es funktioniert nicht. Und die styled-components werden auch nicht auf dem Server gerendert, was eine Verzögerung von 1-2 Sekunden beim Aktualisieren verursacht.

...zum Beitrag

CSS möchte nicht laden?

Hallo,

es geht darum, dass ich ein Projekt habe in dem Java, Spring boot, ReactJS, CSS, JS und RestAPI mit inbegriffen sind. Mein Problem liegt lediglich darin, dass die html beim laden der Seite: localhost:8080/login.html den inhalt der html datei anzeigt aber die css datei garnicht übernimmt. Die Pfade zu den einzelnen Dateien stimmen ebenfalls, da sie verlinkt sind, doch das stylen über css funktioniert nicht

login.html: https://codefile.io/f/uD0jP33Wef
style.css: https://codefile.io/f/AGN6ENmt6t
script.js: https://codefile.io/f/unKOx5NUi6

Wäre echt top, wenn mir jemand dabei behilflich sein könnte.

...zum Beitrag

Node.js: Werte an HTML Datei übergeben?

Ich habe etwas mit Node.js angefangen und komme einfach nicht mehr weiter. Ich habe das Server erstellen usw. gut verstanden, aber jetzt komme ich nicht mehr weiter. Es kann sein, dass das total einfach ist.

Ich habe anfangs einen Server erstellt. Nun habe ich eine MySQL-Verbindung hergestellt (was auch funktioniert) und mit dem SELECT-Befehl Daten daraus bekommen. Nur stellt sich mir nun einfach die Frage, wie zum Teufel ich den Wert in meine HTML Datei bekomme, um sie auszugeben.

app.js:

var express = require("express");
var app = express();
var mysql = require("mysql");
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "test"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected to Database!");
});

app.listen(8080, function() {
  console.log("Server is running!");
});

con.query("SELECT id, Zahl FROM test", function(err, result, fields) {
  if (err) throw err;
  console.log(result);
});

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

Also, wie gesagt, bekomme ich in der Konsole "result" ausgegeben. Aber wie bekomme ich das jetzt z.B. in einen div in meiner index.html?

Und noch eine kleine Nebenfrage: Ist das so richtig, wenn ich einfach andere Seiten so

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.get("/test", function(req, res) {
  res.sendFile(__dirname + "/test.html");
});

erzeugen kann?

Also wenn ich einfach nur mehrere HTML Dateien haben möchte.

Und noch eine kleine Frage: Ich kenne es so, dass man in PHP eigentlich immer MySQL-Datenbanken verwendet. In Node.js geht das ja auch, aber gibt es da auch eine Art vorgesehene Datenbank?

Die kleinen Fragen sind nebensächlich, die erste Frage ist mir erst einmal am wichtigsten. Aber wer es weiß ...

MfG

Tom

...zum Beitrag

Strato Html Datei Hochladen?

Hey, meine Datei heißt index.html und diese liegt auch im server verzeichnis, aber es erscheint nur "Diese Domain wurde soeben freigeschaltet. Es wurden noch keine Inhalte hinterlegt." Ich habe sie in keinem Unterverzeichnis gespeichert, sondern direkt auf dem Server. Was könnte das Problem sein?

...zum Beitrag

Wie benutzt man Javascript mit Node.js Dateien?

Wenn man eine Webseite mit Node.js Webserver betreit werden ja die HTML Dateien ueber den Node.js Webserver aus gegeben. Man kann ja einerseits Node.js Dateien mit Javascript erstellen und auch normale Javascript Dateien welche man in HTML Dateien importiert. Wenn ich jetzt in der index.html eine Javascript Datei importiere, dann wird der Browser das Javascript ausfuehren, wenn man das Javascript aber in einer Node.js Datei speichert wird Node.js das Javascript ausfuehren, ich wuerde mal gerne wissen, ob es irgend ein Vorteil bringt wenn man entweder Javascript nur von Node.js oder groesenteils ueber den Webbrowser ausfuehren laest; beziehungsweise ist es ueberhaupt moeglich das man das Javascript welches man in der index.html importiert auch ueber Node.js laufen laest. Programmiertechnisch mueste man dann denke ich aufjedenfall einiges wieder aendern an der Javascript Datei welche in der index.html importiert wird, weil ich denke mal auch das Javascript in Node.js auch bisjen anders aufgebaut ist.

Aber wie auch immer ich bin da noch bisjen neu und versuche etwas besseren Ueberblick zu bekommen, wenn kann mir den bisjen was dazu erzaehlen?

...zum Beitrag

Unbekannte index.html auf meinem Server?

Hallo, auf meiner Server war gerade eine Html Datei das zu einem link bei w3.org führt. Der code soll Anweisungen dazu haben die Cache und Pragma Header zu kontrollieren. Was kann das sein. Kann das von Ionos sein automatisch sein oder könnte es sein dass icj gehackt wurde

...zum Beitrag

PHP in einer HTML Datei einbauen?

Will eine HTML Seite bauen auf der man Währungen in Euro und anders rum umrechnen kann.

Ich würde gerne, dass ich einzeln senden kann und verschiedene antworten unter nem "zurücksetzen" bekommen kann. Wie baue ich php in meinen code noch ein ohne auf eine andere Seite geleitet zu werden nach dem absenden

...zum Beitrag

Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>

...zum Beitrag

Dateiliste mit Javascript erstellen?

Ich habe ein Laufwerk mit vielen Dateien und Unterverzeichnissen.

Im Stammverzeichnis befindet sich eine html-Datei, in der ich mittels Javascript eine Dateiliste anzeigen möchte.

Wie kann ich das machen?

...zum Beitrag

Node.js/Express - req.body funktioniert nicht?

Ich möchte in meiner app.js-Datei Werte aus meiner HTML-Datei benutzen. In meiner HTML-Datei ist ein TextFeld namens "search". Dazu will ich in app.js

var searchText = req.body.search

verwenden, um den Wert des Feldes zu bekommen. Das klappt aber nicht!

Hier mein app.js-Code:

var express = require("express");
var pg = require("pg");
var bodyParser = require("body-parser");
var CON_STRING = process.env.DB_CON_STRING;

if (CON_STRING == undefined) {
  console.log("Error: Environment variable DB_CON_STRING not set!");
  process.exit(1);
}

pg.defaults.ssl = true;
var dbClient = new pg.Client(CON_STRING);
dbClient.connect();

var urlencodedParser = bodyParser.urlencoded({ extended: false });
const PORT = 80;

var app = express();
app.set("views", "views");
app.set("view engine", "pug");
app.get("/search", urlencodedParser, function (req, res) {
  var searchText = req.body.source;
  console.log(searchText); //HIER IST DER FEHLER: Es spuckt "undefined" aus!

  dbClient.query("SELECT * FROM book LIMIT 50 ", function (dbError, dbItemsResponse) {
    res.render("index", {
      BookList: dbItemsResponse.rows
    });
  });
});
app.listen(PORT, function () {
  console.log(App listening on Port ${PORT});
});

Das

console.log(searchText)

gibt mir immer undefined zurück. Wenn ich in der HTML-Datei über ein Script den Wert vom Textfeld ausgebe, dann ist der das, was da drinnen steht. Nur mit req.body scheine ich nicht darauf zugreifen zu können. Ich bekomme immer undefined.

Was mache ich falsch? Wie kann ich es beheben? Hat jemand eine Idee?

...zum Beitrag

Text aus anderem Dokument in HTML Webseite verknüpfen?

Angenommen, ich hätte 2 HTML Dokumente 1.HTML und 2.HTML und in beiden werden z.B. alle Windows Versionen aufgezählten. Jetzt kommt Windows 12 hinzu. In diesem fall muss ich jetzt überall Windows 12 Hinzufügen.

Gibt es die Möglichkeit eine Datei Windows Versionen.[Dateiformat] zu erstellen, in der die Aufzählung eingetragen ist, so dass ich in 1.HTML und 2.HTML den Link von Windows Versionen.[Dateiformat] einfüge, und beide automatisch auf die Datei zugreifen, wo die Liste drin ist, und die Daten anzeigen?

Geht dass?

Welche Programmiersprache muss ich verwenden?

Wie füge ich die Dateien in HTML ein?

Könnt ihr mir ein Beispiel zeigen?

...zum Beitrag

Wie HTML Animation die aus verschiedenen Dateien besteht einbinden?

Ich habe eine interaktive HTML Animation bekommen. Dieser Ordner besteht aus vielen verschiedenen dateien. Bilder, Videos, CSS, JS. Ich möchte diese Animation nun auf meiner Website einbinden.

Ich bin ehrlich gesagt etwas überfordert. Ich weiß wie ich HTML Code einbinde etc. Aber nicht ein Content Element welches sich aus vielen verschienden Dateien zusammensetzt.

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen