3

file:server.js

const express = require('express');

    const express = require('express');
const app = express();

    const app = express();
app.use(express.static(__dirname + '/public'));

    app.use(express.static(__dirname + '/public'));
app.listen(3000, function () {

    app.listen(3000, function () {
    console.log('server on port 3000');

        console.log('server on port 3000');
});

    });

file: index.jsx

import React,{Component} from 'react' import {render} from 'react-dom';

class Prueba extends Component{ render(){ <h1>Plantilla React</h1> }} render(< Prueba/>,document.getElementById('app'));

3 respuestas 3

3

Primer problema

En ningún momento estás mapeando una ruta para renderizar el HTML. Deberías mapear toda petición GET para renderizar el index. Para eso usa el wilcard all (*):

const express = require('express');

const app = express();
app.use(express.static(__dirname + '/public'));
const root = <>; // directorio en donde está el index
app.get('*', (req, res) => res.sendFile('index.html', { root }));
app.liste(3000);

Segundo problema

El método render debe retornar un elemento; tú no estás retornando nada:

render() {
  return (
    <h1>Hola mundo</h1>
  );
}
5
  • Al usar return, se soluciona el mensaje del error, Cannot GET al aplicar su respuesta,modificando: *const root =__filename+'/public/index.html'; * Queda en blanco el browser sin errores... aún no se ve el mensaje de Plantilla React
    – Developer
    el 9 ago. 2017 a las 3:14
  • @Developer, asegurate de que tu index.html tenga un elemento con id = "app". Lo incluí en mi respuesta
    – Ramses
    el 9 ago. 2017 a las 15:53
  • Si revise y lo tiene ok, el problema ahora es el siguiente: ** Error: listen EADDRINUSE :::3000**
    – Developer
    el 9 ago. 2017 a las 16:43
  • Ya solucione el Error: listen EADDRINUSE :::3000, pero sigue apareciendo en blanco el browser, sin enviar el mensaje
    – Developer
    el 9 ago. 2017 a las 16:51
  • SOLUCIONADO: compile de nuevo, npm react-dom y todo funciona perfecto!
    – Developer
    el 9 ago. 2017 a las 17:18
0

El problema no está en React, sino en express. No has definido una ruta para que atienda los request que llegan a la raíz.

Aqui modifique tu archivo para incluir una función que enviará el archivo index.html a todos los request que reciba.

file: server.js

const express = require('express'); 
const app = express(); 
app.use(express.static(__dirname + '/public')); 

app.get('/*', function(req, res, next) {
   res.sendFile('index.html', { root: __dirname });
});

app.listen(3000, function () {
    console.log('server on port 3000');
});

Suponiendo que existe un archivo index.html al mismo nivel que server:

<div id="app"> <!-- la plantilla react debería aparecer aqui --> </div>

Asegúrate de que tu index.html tenga un elemento con id="app", dado que ahí es donde le estás indicando a react que realice el Render, con el document.getElementById('app')

0

Agregue el return, inclui la siguiente linea

app.get('/*', function(req, res, next) {
   res.sendFile('index.html', { root: __dirname });
});

Reinicie el ordenador,compile de nuevo por npm install react react-dom --save, corri de nuevo el server y todo funciona perfecto!

1
  • Te dejo un tip por experiencia: cuando trabajas con express, aunque tengas un HRM (hot reload module) para refrescar automáticamente tu código o hagas CTRL + F5 para refrescar tu navegador, a veces hace falta pararlo y rearrancarlo para que vuelva a coger todos los cambios. el 14 oct. 2020 a las 8:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.