[RESOLVED] Not seeing expected component?

Hi everyone! First time posting, hopefully this is in the right area.

I’m following along a great tutorial at LevelUpTutorials.com but it’s for Meteor 1.4 and React. I’m using Meteor 1.5. I’m not new to software development overall, but JavaScript is fairly new to me as is the Meteor framework. The author’s video tutorial works perfectly with the code you see below, so maybe it’s a 1.4 vs 1.5 thing?

One of the very first things I’m doing is just trying to render the H1 header. Maybe somebody can tell me why I’m not seeing anything at all? No errors in the Meteor output, no console errors, and nothing in the source code.

Here’s my client/main.js code:

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

Meteor.startup(() => {
    render(<App/>, document.getElementById('render-target'));
});

class App extends Component {
    render() {
        return (
            <H1>Hello!</H1>
        );
    }
}

And here is my client/main.html code:

<head>
    <title>React Meteor Voting</title>
</head>
<body>
    <div id="render-target"></div>
</body>

I’m sure it’s something embarrassingly simple but I’m already a little lost. Is there anything else I can look at to see if there is an error somewhere?

Maybe try lowercase <h1>Hello!</h1>

Wow, that was it @townmulti, thank you!

What in the world?! It’s hard to believe that valid HTML like that cannot be used. At any rate, thank you again!

1 Like

It’s not HTML, it’s JSX that compiles to JavaScript in the build…

Thanks @jpalmer - you are right, of course. My assumption was that you could include almost any HTML into the JSX file but apparently there are some constraints in there, like case sensitivity. Thanks for pointing this out :slight_smile: