reactjs - uso - La importación no funciona cuando el nombre no comienza con la letra mayúscula

uso de las mayusculas ejercicios

Question

Después de transpilar este código no funciona

import React from ''react'';
import ReactDOM from ''react-dom'';
import firstLow from ''./moniesApp.js'';

ReactDOM.render(<firstLow />, document.getElementById(''content''));

pero esto no

import React from ''react'';
import ReactDOM from ''react-dom'';
import FirstHigh from ''./moniesApp.js'';

ReactDOM.render(<FirstHigh />, document.getElementById(''content''));

en primer caso, Babel produce

_reactDom2.default.render(_react2.default.createElement(''firstLow'', null), document...

y en la página hay un elemento <firstLow data-reactroot><firstLow/> procesado.

Y en segundo caso

_reactDom2.default.render(_react2.default.createElement(_moniesApp2.default, null), document...

y funciona. Mi componente está renderizado.

¿Que esta pasando?

Answer 1

¿Que esta pasando?

Esta es una convención en JSX / React. Los nombres minúsculos se convierten en cadenas (etiquetas), los nombres en mayúscula se resuelven como variables (componentes).

De los documentos :

Advertencia:

Siempre comience los nombres de los componentes con una letra mayúscula.

Por ejemplo, <div /> representa una etiqueta DOM, pero <Welcome /> representa un componente y requiere que Welcome esté dentro del alcance.

Answer 2

En React, los nombres de los Component comienzan con letras mayúsculas. Las minúsculas etiquetas JSX representan etiquetas HTML literales. Esto es parte de la especificación React .

Esta es la razón por la cual <foo> se traduce a createElement(''foo'') , mientras que <Foo> produce createElement(module.Foo) .

Debe nombrar sus componentes con letras mayúsculas. No hay mucho más que hacer.