React
React.js jest biblioteką języka oprogramowania JavaScript, która wykorzystywana jest na przykład do tworzenia interfejsów graficznych aplikacji internetowych. Poniższy przewodnik wskazuje szybkie uruchomienie backendu oraz frontendu z użyciem express.
Kroki wstępne
- Odblokuj Binexec.
- Wykonaj konfigurację środowiska Node.js wskazując wersję node na 14.
- Dodaj domenę typu Node.js wskazując wersję 14.
- Przejdź do folderu
domains/domenadomeny:cd ~/domains/domena/public_nodejs
Instalacja
Wygeneruj plik package.json za pomocą polecenia:
npm init -y
Instalacja express
npm install express
Utwórz plik app.js
touch app.js
Wklej do niego zawartość
const express = require("express");
const PORT = process.env.PORT || 3000;
const app = express();
// Poniższy kod spowoduje odpowiedź API o treści "Witaj świecie!" do strony utworzonej w React.
app.get("/api", (req, res) => {
res.json({ message: "Witaj Świecie!" });
});
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});
Stwórz frontend React poleceniem
npx create-react-app frontend
Zmień zawartość frontend/src/App.js na poniższy kod (wykorzystanie API)
import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
fetch("/api")
.then((res) => res.json())
.then((data) => setData(data.message));
}, []);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>{!data ? "Loading..." : data}</p>
</header>
</div>
);
}
export default App;
Przejdź do katalogu frontend/ i zbuduj zawartość poleceniem
cd frontend/ && yarn build
Po wykonaniu buildu, stwórz dowiązanie symboliczne do ~/domena/public_nodejs/public (jeśli katalog public/ istnieje, należy go usunąć)
cd ~/domains/domena/public_nodejs && ln -s ~/domains/domena/public_nodejs/frontend/build public
Uwaga!
W przypadku hostowania strony statycznej, bez użycia node, zalecamy utworzenie strony typu PHP
Następnie zrestartuj aplikację poleceniem
devil www restart domena.pl
Po przejściu na adres swojej strony, powinieneś ujrzeć tablicę powitalną z napisem "Witaj Świecie" i logiem React.
