React.JS simple component not rendering nested html tag

Question

This is a simple piece of code. I am trying to get my first component to run and I followed the tutorial and this is their code for creating the component.

It works in that it does inject the first into the html document but the is missing.

For some reason it worked perfectly for the instructor in the video, as you can see here: https://youtu.be/G40iHC-h0c0?t=392

import React from "react";
import { render } from "react-dom";

class basicDiv extends React.Component {
    render(){
        return(
            <div>
                <h1>Hi my friend</h1>
            </div>
        );
    }
}

render(<basicDiv/>, window.document.querySelector(".componentPlaceHolder"));

here is the index.html file:

<!doctype html>

<html>

<head>

</head>
<body>
    <div class="componentPlaceHolder" style="border:1px solid black;min-height:100px;">

    </div>

    <script src="/app/bundle.js"></script>
</body>

</html>

Could you update your answer to show the relevant HTML of the page this is being rendered on? If you don't have an element with a class called .componentPlaceHolder then this won't render anything. — Soviut
– Soviut, Commented Jun 6, 2017 at 3:55
@Mr.Alien no errors. I do get the first <div> in the right spot. Just no <h1> — Badrush
– Badrush, Commented Jun 6, 2017 at 3:59
Possible duplicate of Html is not rendering in the browser - React js — Mayank Shukla
– Mayank Shukla, Commented Jun 6, 2017 at 5:01

Mμ. · Accepted Answer · 2017-06-06 04:07:08Z

4

React component class has to be capitalised. Change that and your code will work. See this doc for more details on JSX.

class BasicDiv extends React.Component {
    render(){
        return(
            <div>
                <h1>Hi my friend</h1>
            </div>
        );
    }
}

ReactDOM.render(<BasicDiv/>, window.document.querySelector(".componentPlaceHolder"));

<!doctype html>

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

</head>
<body>
    <h2>This is a Skeleton React Build</h2>
    <p>It uses babel to convert ES6 code to ES5</p>
    <p>This is a good place to start building your app. This is a blank canvas.</p>

    <h2>Below is where my first component will be injected</h2>
    <p>If you see anything in the box below... it works!</p>
    <div class="componentPlaceHolder" style="border:1px solid black;min-height:100px;">

    </div>

    <script src="/app/bundle.js"></script>
</body>

</html>

answered Jun 6, 2017 at 4:07

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Badrush Over a year ago

Thanks reaper. It's always the smallest of details that brings everything down.

Joshua Maddox · Accepted Answer · 2017-06-06 04:27:56Z

1

D-reaper is correct. You should also return the render function to an ID in your html rather than to a .class

In your html change:

<div class=componentPlacholder>
to <div id="componentPlaceholder">`

Then at the bottom of your React component change:

render(<basicDiv/>, window.document.querySelector(".componentPlaceHolder"));
to render(<BasicDiv />, getElementById(componentPlacholder));

Don't forget to rename your component from basicDiv to BasicDiv as D-reaper mentioned

You can technically return to a .class but since it looks like you are learning it seemed helpful to alert you that you will cause yourself a lot of issues if you are not returning to an ID.

answered Jun 6, 2017 at 4:27

Joshua Maddox

1411 silver badge5 bronze badges

3 Comments

Badrush Over a year ago

only use IDs? never classes? Will using classes break anything?

Joshua Maddox Over a year ago

Its not that you can't and there will likely be some use cases where using a class could be helpful but only if you know exactly why you are choosing a class over the id. One of the great things about React compared to Ember or Angluar is that it is a lot less "opinionated" and therefore you can choose not to follow all of the conventions, however, its best to know exactly why you are choosing not to follow a convention and what the subsequent implications are before doing so.

Joshua Maddox Over a year ago

Here is an example of using the class instead of id if it is helpful: blog.komand.com/…

Collectives™ on Stack Overflow

React.JS simple component not rendering nested html tag

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related