React con Node

ref.

Backend con node:

• Creamos directorio de proyecto y nos metemos dentro
• Creamos node project, npm init -y
• Creamos una carpeta server y el archivo index.js que nos menciona el package.json
• Instalamos Express como dependencia, npm i express
• En package.json, añadimos:

                       "scripts": {
                          "start": "node server/index.js"
                      },
              

• npm start
• Añadimos una extension a nuestro servidor, con un mensaje

                  app.get("/api", (req, res) => {
                      res.json({ message: "Hello from server!"});
                  })
              

• Reiniciamos el servidor, npm restart
• ...:3001/api, aparecera nuestro mensaje

Front-end, con react:

• Desde la raiz del proyecto, npx create-react-app client

HTTP request from react to node:

• fetch data desde el punto final /api:

  // client/src/App.js
      
      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;

• De parte del servidor enviamos la respuesta: