0

this is my first question on Stackoverflow. I am trying to make a simple 'Hello World' project using React and Node. But it appears the browser is just not executing my code. I feel so stupid. Please help.

I expected to print 'Hello world' on a blue background. There is a blue background but no 'hello world'.

Installed React using the terminal: npm i react Installed ReactDom: npm i react-dom

index.html file:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="index.js" type = "text/jsx " defer></script>
</head>
<body>
    <div id="root">       

    </div>
  
</body>
</html>

index.js file:

import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<p>hello world</p>, document.getElementById("root"));

server.js file:


const express=require("express");
const app = express();
app.use(express.static('public'));

app.get("/", function(req,res) {
    res.sendFile(__dirname+"/index.html");
});

app.listen(3000, function(){
    console.log("server running");
});

styles.css file:


body {
    background-color: blue;
}

package.json file:

{
  "name": "try",
  "version": "1.0.0",
  "description": "Trial to check if everything--html,css,js,server-- connects.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "Rohit",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "nodemon": "^2.0.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.20.5"
  }
}

Message in console:

Message in Chrome console

Node version:

v18.12.0

Rohit Ranjan
  • 1
  • 1
  • 2
    If you've installed React 18 [the render code has changed](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) from React 17. There will probably be an error message in the console log in your dev tools. – Andy Dec 11 '22 at 07:39
  • Based on your package.json, Andy is right. See also: [Deprecation notice: ReactDOM.render is no longer supported in React 18](https://stackoverflow.com/q/71668256) (I also would've expected that you would've seen the deprecation warning) – Nick Parsons Dec 11 '22 at 07:43
  • Seems your server is only serving one static asset, `index.html`. Assuming `index.js` is also meant to be served, you should be using `express.static()` – Phil Dec 11 '22 at 07:55

0 Answers0