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/domena domeny:
```
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

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.

Odnośniki zewnętrzne¶

Kategoria:Poradniki Kategoria:Node.js