Piotr Perak Piotr Perak - 1 month ago 6
React JSX Question

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

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(&ltFirstHigh /&gt, 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

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.

Source (Stackoverflow)
Comments