Import doesn't work when name doesn't start with capital letter

Question

After transpiling this code doesn't work

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

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

but this does

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

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

in first case babel produces

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

and on page there is an empty <firstLow data-reactroot><firstLow/> element rendered.

And in second case

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

and it works. My component is rendered.

What's going on?

Answer 1

What's going on?

This is a convention in JSX/React. Lower case names are converted to strings (tags), capitalized names are resolved as variables (components).

From the docs:

Caveat:

Always start component names with a capital letter.

For example, <div /> represents a DOM tag, but <Welcome /> represents a component and requires Welcome to be in scope.

Answer 2

In React, Component names start with capital letters. Lower-case JSX tags represent literal HTML tags. This is part of the React specification.

This is why <foo> is translated to createElement('foo'), while <Foo> yields createElement(module.Foo).

You should name your components with capital letters. Not much else to do.