Jak używać React JS z Node.js i Express?

Integracja Express JS NodeJS z Reactem otwiera przed programistami możliwość tworzenia pełnych aplikacji webowych, łącząc frontend z backendem w jednym projekcie. W tym artykule pokażemy, jak połączyć React JS z Node.js i Express, a także jak wykorzystać MongoDB jako bazę danych. To idealne wprowadzenie dla osób chcących zrozumieć, jak stworzyć aplikację full-stack w ekosystemie JavaScript. # express js nodejs # react js with mongodb # react js with node js

Czym są frameworki programistyczne? Przewodnik po narzędziach

Dlaczego warto łączyć React JS z Node.js i Express?

React JS to popularna biblioteka JavaScript służąca do budowy interfejsów użytkownika. Z kolei Node.js umożliwia uruchamianie JavaScript po stronie serwera, a Express to minimalistyczny framework dla Node.js, ułatwiający tworzenie aplikacji webowych i API.

Łącząc te technologie, możemy:

• Używać jednego języka (JavaScript) na frontendzie i backendzie.
• Tworzyć wydajne i skalowalne aplikacje webowe.
• Ułatwić sobie pracę dzięki bogatemu ekosystemowi narzędzi i bibliotek.

Konfiguracja środowiska

Wymagania wstępne

• Zainstalowany Node.js i npm.
• Podstawowa znajomość React JS i JavaScript.
• Zainstalowany MongoDB lub dostęp do MongoDB Atlas.

Tworzenie aplikacji React

1. Utwórz nowy projekt React za pomocą Create React App:

   npx create-react-app moja-aplikacja
   cd moja-aplikacja

2. Uruchom aplikację:

   npm start

Tworzenie serwera Node.js z Express

1. Przejdź do katalogu głównego projektu i utwórz folder backend:

   mkdir backend
   cd backend

2. Zainicjuj projekt Node.js:

   npm init -y

3. Zainstaluj Express i inne potrzebne pakiety:

   npm install express mongoose cors

   • express: framework do tworzenia serwera.

   • mongoose: biblioteka do komunikacji z MongoDB.

   • cors: middleware do obsługi CORS (Cross-Origin Resource Sharing).

4. Utwórz plik server.js i dodaj podstawową konfigurację serwera:

   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');
   
   const app = express();
   const port = process.env.PORT || 5000;
   
   app.use(cors());
   app.use(express.json());
   
   app.get('/', (req, res) => {
     res.send('Serwer działa!');
   });
   
   app.listen(port, () => {
     console.log(`Serwer działa na porcie: ${port}`);
   });

5. Uruchom serwer:

   node server.js

Integracja MongoDB z Node.js i Express

Konfiguracja bazy danych

1. Połącz się z MongoDB za pomocą Mongoose:

   mongoose.connect('mongodb://localhost:27017/mojabaza', {
     useNewUrlParser: true,
     useUnifiedTopology: true,
   });
   
   const db = mongoose.connection;
   db.on('error', console.error.bind(console, 'Błąd połączenia z MongoDB:'));
   db.once('open', () => {
     console.log('Połączono z MongoDB');
   });

2. Utwórz schemat danych (np. dla użytkowników):

3. Dodaj routy do obsługi API:

Łączenie frontendu z backendem

Konfiguracja proxy w React

Aby umożliwić aplikacji React komunikację z serwerem Express bez problemów z CORS, dodaj w pliku package.json w katalogu moja-aplikacja:

"proxy": "http://localhost:5000"

Wykorzystanie fetch lub axios

1. Zainstaluj axios (opcjonalnie):

   npm install axios

2. Przykład pobierania danych w React:

Dodawanie nowych użytkowników z poziomu frontendu

Dodaj formularz w React:

// Kontynuacja pliku src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [uzytkownicy, setUzytkownicy] = useState([]);
  const [imie, setImie] = useState('');
  const [email, setEmail] = useState('');

  useEffect(() => {
    pobierzUzytkownikow();
  }, []);

  const pobierzUzytkownikow = () => {
    axios.get('/uzytkownicy').then((response) => {
      setUzytkownicy(response.data);
    });
  };

  const dodajUzytkownika = (e) => {
    e.preventDefault();
    axios
      .post('/uzytkownicy', { imie, email })
      .then(() => {
        setImie('');
        setEmail('');
        pobierzUzytkownikow();
      })
      .catch((error) => {
        console.error('Błąd podczas dodawania użytkownika:', error);
      });
  };

  return (
    <div>
      <h1>Lista użytkowników</h1>
      <ul>
        {uzytkownicy.map((uzytkownik) => (
          <li key={uzytkownik._id}>
            {uzytkownik.imie} - {uzytkownik.email}
          </li>
        ))}
      </ul>
      <form onSubmit={dodajUzytkownika}>
        <input
          type="text"
          placeholder="Imię"
          value={imie}
          onChange={(e) => setImie(e.target.value)}
        />
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <button type="submit">Dodaj użytkownika</button>
      </form>
    </div>
  );
}

export default App;

Przetestuj aplikację, dodając nowych użytkowników i obserwując, jak są wyświetlani na liście.

Podsumowanie

Łącząc React JS z Node.js i Express, możemy stworzyć pełnoprawną aplikację full-stack, w której frontend i backend komunikują się ze sobą w sposób płynny i efektywny. Dodając do tego MongoDB jako bazę danych, otrzymujemy potężny zestaw narzędzi do tworzenia nowoczesnych aplikacji webowych.

Dzięki temu podejściu możemy:

• Uczyć się jednego języka programowania na obu końcach aplikacji.

• Szybko prototypować i wdrażać nowe funkcjonalności.

• Skalować aplikację w miarę rozwoju projektu.

Jeśli chcesz dowiedzieć się więcej o integracji tych technologii, warto zajrzeć do oficjalnej dokumentacji:

• Dokumentacja Express

• Dokumentacja MongoDB

Zapraszamy do eksperymentowania i tworzenia własnych projektów, wykorzystując moc React JS, Node.js i Express! # express js nodejs # react js with mongodb # react js with node js