2

Buenas, estaba probando los export por default en , pero al momento de usar el servidor que trae , no me visualiza los componentes, ni nada por el estilo.

Este es el código que uso en el index.js.

var React = require('react');
var ReactDOM = require('react-dom');

import tablaProductos from "./componentes/tablaProductos.js";

const app = document.getElementById('app');

ReactDOM.render(<tablaProductos/>, app);

Y aquí esta el código que uso en la clase tablaProductos:

var React = require('react');

import busqueda from "./busqueda.js";
import products from "./products.js";

export default class tabaProductos extends React.Component{
    constructor(){
        super();
    }

    render(){
        return(
            <div>
                <busqueda/>
                <products/>
            </div>
        );
    }
}

El problema es que no lo muestra en la página.

2
  • Primero, npm no tiene ningún servidor, no sé a qué te refieres. Segundo, React no usa la sintaxis de JavaScript, si no, JSX, que es una extensión de JavaScript especial para la inclusión de HTML en JavaScript. Tercero, necesitas un transpilador que convierta código JSX a JavaScript, ya que el navegador no entiende JSX. Por consiguiente, ¿Dónde está tu configuración de Webpack, Gulp, FuseBox o Grunt para transpilar JSX?
    – gugadev
    Commented el 19 may. 2017 a las 13:43
  • que error te muestra en los devtools? tal vez es un "typo", tu clase se llama tabaProductos y en tu index.js estas importando tablaProductos.
    – bntzio
    Commented el 22 may. 2017 a las 0:28

1 respuesta 1

3

El problema queda en que los componentes de React tienen que ser capitalizados. Los componentes que no lo son serán interpretados por Babel como elementos nativos del DOM. O sea:

<tablaProductos/>

Será transpilado así:

React.createElement("tablaProductos", null)

y no así:

React.createElement(tablaProductos, null)

cual es una referencia a la clase tablaProductos y es lo que quieres. Para arreglarlo, cambia el nombre de la clase tablaProductos a TablaProductos (cosa que debes hacer ni modo, ya que es lo normal capitalizar los nombres de las clases). Entonces, haz:

import TablaProductos from "./componentes/TablaProductos.js";

const app = document.getElementById('app');

ReactDOM.render(<TablaProductos/>, app);

Y Babel lo transpilará correctamente.

Igual con las clases busqueda y products. Cámbialos a Busqueda y Products.

Tu Respuesta

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

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