helloworld not showing

1

I am following along with the tutorial and got stuck at video 13. Easily Creating Your React Dev Environment. The browser won’t display the “Hello,world!”

Here is the code bellow:

code: index.js

import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./HelloWorld";
import "./index.css";

ReactDom.render(
    <HelloWorld/>,
    document.getElementById("root")
);

code for index.html

<html>
    <body>
        <div id=root></div>

    </body>
</html>
2

Hi @alyo - Do you see any error messages in your Developer Tools’ console?

3

Nope. I did put quotation mark inside the root. <div id="root"></div>. But still not working.

4

Can you share your HelloWorld source?

5 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
 
</head>
<body>
    <div id="root"></div>
    
</body>
</html>

import React, {Component} from "react";
import "./HelloWorld.css"

class HelloWorld extends React.Component {
    render() {
        return (
            <div className="helloContainer">
                <h1>Hello, world!</h1>
            </div>
        );
    }
}

export default HelloWorld;

import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./HelloWorld";
import "./index.css";


ReactDOM.render(
    <HelloWorld/>,
    document.getElementById("root")
);

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
6

I just tried out your code and markup, and everything works correctly for me. This is what I see when I ran your version of the app:

image
image1426×1230 117 KB

When you create a new app via Create React App, are you able to preview that in your browser and see the default starting page?