Components are not displayed in ReactJS

Question

Components are not displayed in ReactJS

Navigation

#1 by (3 votes)

2

Hi, I was testing the export by default in reactjs , but when using the server that brings npm , it does not visualize me the components, or anything like that.

This is the code I use in 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);

And here is the code that I use in class 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>
        );
    }
}

The problem is that it does not show on the page.

javascript reactjs

asked by Carlos Alexander Lemus Mojica 19.05.2017 в 15:20

source

1 answer

Error in Javascript ternary operator fill in input from dropdownlist selection ASP.NET MVC5

score 3 · Answer 1

The problem is that the React components have to be capitalized. The components that are not will be interpreted by Babel as native elements of the DOM. That is:

<tablaProductos/>

It will be transpiled like this:

React.createElement("tablaProductos", null)

and not like this:

React.createElement(tablaProductos, null)

which is a reference to the class tablaProductos and is what you want. To fix it, change the name of the class tablaProductos to TablaProductos (which you should do neither way, since it is normal to capitalize the names of the classes). So, do:

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

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

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

And Babel will transpile it correctly.

Same with the busqueda and products classes. Change them to Busqueda and Products .