CODEWITHSUNDEEP
reactjsdom
Persian
Persian

Reputation: 23

ReactDOM Hello World

struggling with this simple example of React for 3 hours :C . The "mainDiv" works fine as it should, but i see no HELLO WORLD there. here is the code:

<html>
<head>
    <title>REACT</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="mainDiv" class="divstyle"></div>
    <script type="text/babel">

        let A = <div className="HW">HELLO WORLD!</div>;
        let B = document.getElementById("mainDiv");
        reactDOM.render(A,B);

    </script>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/browse/[email protected]/babel.min.js"></script>
</body>

======================= CSS =======================

.divstyle {
text-align: center;
background-color: #4285F4;
color: white;
height: 300px;
width: 100%;
font-size: 30px;

}

.HW {
text-align: center;
color: white;

}

Upvotes: 0

Views: 80

Answers (2)

Jayce444
Jayce444

Reputation: 9063

Ok so here's some minor tweaks I made to get it working.

  1. Put loading of Babel/React libs in the head tag
  2. Use current, official Babel CDN, your one was giving me some issues in Chrome
  3. Looks like you had a typo, you had reactDOM instead of ReactDOM

I tried this and it worked just fine:

<html>
<head>
    <title>REACT</title>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="mainDiv" class="divstyle"></div>
    <script type="text/babel">

        let A = <div className="HW">HELLO WORLD!</div>;
        let B = document.getElementById("mainDiv");
        ReactDOM.render(A,B);

    </script>
</body>

Upvotes: 1

zahra zamani
zahra zamani

Reputation: 1375

in file public/index.html

 <html>
    <head>
        <title>REACT</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
     <div id="root"></div> 
       
        <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/browse/[email protected]/babel.min.js"></script>
    </body>

in file index.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Index extends Component {

  render() {
    return (
    <div className="HW">HELLO WORLD!</div>;
    )
  }
}

ReactDOM.render(<Index />, document.getElementById('root'));

Upvotes: 0

Related Questions