Uncaught SyntaxError: Unexpected token '<' (at index.js:1:1) REACT APP

Question

I'M A NEW IN REACT AND FROM THE BEGINING I HAVE A BROBLEM ANYBODY CAN HELP ME PLEASE! I'M JUST TRY THE HELLO WORD BUT DOESN'T WORKING

import React from "react";
import ReactDOM from "react-dom";

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

body {
    margin:0;
    min-height: 100vh;
    
}

<!DOCTYPE html>
<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> Our React App</title>
    <link rel="stylesheet" href="styles.css"/>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
   
</head>
<body>
    <div id="root"></div>
    <script src="..\src\index.js" type="text/JSX"></script>
   
   
</body>
</html>

score 0 · Accepted Answer · answered Aug 27 '22 at 00:15

Please, next time don't use CAPS on the question description.

The way you are doing is to add react to an existing project, is it what you really want? Or do you want do build a brand new full react application?

I would recommend for you to follow some react tutorial on youtube.

This is a working version of what you are trying to do:

.html

<!DOCTYPE html>
<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>Our React App</title>
    <link rel="stylesheet" href="styles.css" />

    <!-- ##### AS YOU ARE STARTING TO LEARN, USE THE NEWER VERSION (18) #######-->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="..\src\index.js"></script> <!-- ##### REMOVED TYPE=TEXT/JSX  ######-->
  </body>
</html>

index.js

const root = ReactDOM.createRoot(document.getElementById("root"));

const el = React.createElement("h1", { className: "class1 class2", id: "identity" }, "ALLAH");

root.render(el);

thanks, For you... I'm really following the course Oline, the problem was I just have to turn off and restart the Node — Sarah Awik, Aug 28 '22 at 12:18

Uncaught SyntaxError: Unexpected token '<' (at index.js:1:1) REACT APP

1 Answers1