ReactDOM is not rendering the code that is passed to the root

JavaScript
1

Hi all,

I am currently doing Learn React JS YouTube tutorial “https://www.youtube.com/watch?v=DLX62G4lc44&t=854s”.

I am stuck in the beginning itself. I am working on VS Code instead of Scrimba. I believe it should work despite. I also installed dependencies through npm(react and react-dom). I also installed http-server for local host. It is not throwing any error nor is rendering the DOM elements. Here is the code I have right now…

index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>My React App</title>

        <style rel="stylesheet" src="style.css"></style>

    </head>

    <body>

        <div id="root"></div>

        <script type="text/babel" src="index.pack.js"></script>

    </body>

</html>

index.js

import React from "react"

import ReactDOM from "react-dom"

ReactDOM.render(<h1>Hello</h1> ,document.getElementById("root"))

package.json

{

  "name": "myreactapp",

  "version": "1.0.0",

  "type": "module",

  "description": "My first react app",

  "main": "index.js",

  "dependencies": {

    "html-server": "^0.1.1",

    "http-server": "^0.12.3",

    "install": "^0.13.0",

    "npm": "^6.14.8",

    "react": "^17.0.1",

    "react-dom": "^17.0.1"

  },

  "devDependencies": {},

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

Please help me resolve this

Thank you
NSKP

2

Hey,

Check out pinned comment for the video

To get this code working, there is a little set up not mentioned in the video.
If you are coding on scrimba.com, click the gear icon in the top right corner and select ‘add dependency…’. First add ‘react’, then add ‘react-dom’.
If you are building locally, you should first install create-react-app. Get it here: Create React App

3

I tried that and it has App.js and also index.js files. And it was working…

My doubt is, I already added dependencies using npm and also did npm init, and http-server for loading on loacalhost… all looking just how it should be…But still why this is not working??

4

have you got create -react-app ? ( you re working locally) it installs the whole environment for you , and creates a sample app

upd: You need babel to compile jsx to javasript first( try online compiler to see how it works), create-react-app got it up and running out of the box, you’ll just have to run npm script