Crearea de interfețe dinamice: o tutorie React cu staună completă …

În epoca dezvoltării web, crearea de interfețe dinamice și receptive nu mai este doar o preferință; Este o necesitate. Cu React.js pe front-end și node.js cu Express on the Back End, dezvoltatorii pot construi aplicații web puternice, care sunt atât performante, cât și ușor de utilizat. Acest tutorial își propune să vă ghideze prin construirea unei aplicații cu stivă completă folosind React și Express, cu accent pe crearea de interfețe de utilizator dinamice.

Cuprins

1. Premise
2. Configurarea proiectului
3. Construirea backend -ului

   • Configurarea serverului
   • Crearea de API -uri odihnitoare

4. Construirea frontend -ului

   • Configurarea reacționează
   • Preluarea datelor
   • Interfețe de utilizator dinamice

5. Integrarea Frontend și Backend
6. Concluzie

1. Premise

Înainte de a vă scufunda în tutorial, asigurați -vă că aveți următorul instalat:

• Nod.js
• NPM (Nod Package Manager)
• Cunoașterea de bază despre JavaScript și React
• Familiaritatea cu principiile odihnitoare

2. Configurarea proiectului

Configurare backend

1. Creați un nou director pentru proiectul dvs. și navigați în el:

   mkdir fullstack-react-tutorial
   
   cd fullstack-react-tutorial

2. Inițializați un proiect Node.js:

   npm init -y

3. Instalați Express și Cors:

   npm install express cors

Configurare frontend

1. Creați aplicația React Utilizarea aplicației Create React:

   npx create-react-app client
   
   cd client

2. Instalați axios Pentru efectuarea de solicitări HTTP:

   npm install axios

3. Construirea backend -ului

Configurarea serverului

1. Creați un nou fișier numit server.js În directorul rădăcină al proiectului dvs .:

   const express = require("express");
   
   const cors = require("cors");
   
   
   
   const app = express();
   
   const PORT = 5000;
   
   
   
   app.use(cors());
   
   app.use(express.json());
   
   
   
   app.listen(PORT, () => {
   
    console.log(`Server is running on port ${PORT}`);
   
   });

2. Porniți serverul:

   node server.js

Crearea de API -uri odihnitoare

1. Adăugați rute pentru a gestiona datele (de exemplu, pentru o aplicație simplă de a face):

   let todos = ();
   
   
   
   app.get("/todos", (req, res) => {
   
    res.json(todos);
   
   });
   
   
   
   app.post("/todos", (req, res) => {
   
    const newTodo = { id: Date.now(), text: req.body.text };
   
    todos.push(newTodo);
   
    res.json(newTodo);
   
   });

4. Construirea Frontend

Configurarea reacționează

1. Navigați la client/src director și deschis App.js. Înlocuiți -l conținutul:

   import React, { useState, useEffect } from "react";
   
   import axios from "axios";
   
   
   
   const App = () => {
   
    const (todos, setTodos) = useState(());
   
    const (input, setInput) = useState("");
   
   
   
    useEffect(() => {
   
      const fetchTodos = async () => {
   
        const response = await axios.get("http://localhost:5000/todos");
   
        setTodos(response.data);
   
      };
   
      fetchTodos();
   
    }, ());
   
   
   
    const addTodo = async () => {
   
      const response = await axios.post("http://localhost:5000/todos", { text: input });
   
      setTodos((...todos, response.data));
   
      setInput("");
   
    };
   
   
   
    return (
   
      <div>
   
        <h1>To-Do List</h1>
   
        <ul>
   
          {todos.map((todo) => (
   
            <li key={todo.id}>{todo.text}</li>
   
          ))}
   
        </ul>
   
        <input
   
          type="text"
   
          value={input}
   
          onChange={(e) => setInput(e.target.value)}
   
          placeholder="Add a new todo..."
   
        />
   
        <button onClick={addTodo}>Add Todo</button>
   
      </div>
   
    );
   
   };
   
   
   
   export default App;

Preluarea datelor

În useEffect Cârlig, preluăm ToDO -urile existente de pe server atunci când componenta se montează. Când utilizatorul adaugă un nou TODO, trimitem o solicitare de postare către server și actualizăm statul în consecință.

Interfețe de utilizator dinamice

Cu React, putem crea cu ușurință interfețe dinamice. Ca stare a todos Modificări de matrice, React redactează componenta pentru a reflecta aceste modificări. În acest fel, utilizatorii primesc feedback imediat atunci când adaugă sau elimină articole.

5. Integrarea frontend și backend

Pentru a rula simultan atât backend, cât și frontend, puteți configura un proxy în aplicația React. În client/package.jsonadăugați:

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

Apoi, din rădăcina proiectului dvs., începeți atât backend -ul, cât și frontend:

# In one terminal

node server.js



# In another terminal

cd client

npm start

6. Concluzie

Construirea interfețelor dinamice cu React și Express permite dezvoltatorilor să creeze aplicații responsive și puternice. Urmărind acest tutorial, ați configurat o aplicație de bază cu stivă completă, care se poate actualiza dinamic pe baza interacțiunii utilizatorului. Simplitatea și puterea React combinată cu robustetea Express oferă o bază solidă pentru următorul dvs. proiect.

Explorați în continuare adăugând mai multe funcții, cum ar fi ștergerea ToDOS, folosind o bază de date precum MongoDB sau încorporarea autentificării utilizatorului!

Codificare fericită!