Lista Todos los archivos en el directorio React

Question

Estoy usando React.js con Node.js y estoy tratando de servir al cliente una lista de todos los archivos en mi (el servidor) public carpeta. He creado la aplicación usando create-react-app. Traté de usar fs pero entendí que React se ejecuta en un entorno del navegador y que bloquea el acceso a la manipulación de archivos para que no funcione. Después de explorar alrededor de SO y tantos otros foros, lo más cercano que tuve fue usar require.context pero devolvería objetos con los nombres correctos (de los archivos) pero no pude encontrar ninguna manera de extraer el texto de esos objetos. Mi código es const importAll = r => r.keys().map(r); const files = importAll(require.context('./path/to/folder/', false, / .*$/)); console.log(files); Soy nuevo en React y Web Dev en general, así que podría estar perdiendo algo. ¡Gracias por adelantado!

Gpt · Accepted Answer

El problema que estás enfrentando es que, al ejecutar una aplicación React en el navegador, no puedes acceder directamente a los archivos del sistema de archivos del servidor. Esto se debe a que JavaScript en el navegador se ejecuta en un entorno sandboxed para mayor seguridad y no tiene acceso directo a los archivos del sistema.

La solución a este problema es que el servidor proporcione la lista de archivos al cliente a través de una API. El servidor puede leer los archivos en la carpeta public y luego enviar esa información al cliente cuando se realice una solicitud.

Aquí hay un ejemplo sencillo de cómo podrías lograr esto:

En el servidor (Node.js), puedes utilizar el módulo fs para leer los archivos en la carpeta public y luego enviar esa información al cliente a través de una ruta de API.

Ejemplo en el servidor (Node.js):

javascript
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.get('/files', (req, res) => {
  const publicPath = path.join(__dirname, 'public');
  fs.readdir(publicPath, (err, files) => {
    if (err) {
      console.error(err);
      res.status(500).send('Error reading files');
    } else {
      res.json(files);
    }
  });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

En este ejemplo, cuando el cliente realiza una solicitud a la ruta '/files', el servidor lee los archivos en la carpeta public y los envía como una respuesta JSON al cliente.

En el cliente (React), puedes hacer una solicitud a esta ruta de API para obtener la lista de archivos y mostrarlos en tu aplicación.

Ejemplo en el cliente (React):

javascript
import React, { useEffect, useState } from 'react';

const App = () => {
  const [files, setFiles] = useState([]);

  useEffect(() => {
    fetch('/files')
      .then(response => response.json())
      .then(data => setFiles(data))
      .catch(error => console.error(error));
  }, []);

  return (
    
      Lista de archivos en la carpeta public:
      
        {files.map(file => (
          {file}
        ))}
      
    
  );
};

export default App;

En este ejemplo, se utiliza el hook useEffect para hacer una solicitud a la ruta de la API del servidor cuando el componente se monta. Una vez que se reciben los datos, se actualiza el estado de files con la lista de archivos y se muestran en una lista.

Espero que esta información te sea útil y te ayude a resolver tu problema. ¡Déjame saber si necesitas más ayuda!

Respondida el Dec 17, 2020 a las 20:52 - por Gpt

Gemini · Answer

Tu código está casi correcto. El problema es que require.context devuelve un objeto con claves que son rutas a los archivos requeridos, pero no los archivos reales. Para obtener el contenido de los archivos, puedes utilizar la función fetch de JavaScript, que te permite realizar solicitudes HTTP.

Aquí tienes un código modificado que debería funcionar:

javascript
const importAll = r => r.keys().map(r);

const files = importAll(require.context('./path/to/folder/', false, /\.*$/));

Promise.all(files.map(file => fetch(file).then(res => res.text())))
  .then(texts => {
    // Aquí tienes una matriz de cadenas que contienen el contenido de todos los archivos.
    console.log(texts);
  });

Este código utiliza Promise.all para esperar a que todas las solicitudes fetch se completen antes de registrar el contenido del archivo en la consola.

Respondida el Dec 17, 2020 a las 20:54 - por Gemini

Lista Todos los archivos en el directorio React

2 Respuestas:

Lista de archivos en la carpeta public: