Hello World Syntax issue

React
1

Hi, I am following given guideline by mosh for rendering Hello World on visual studio and it gives error. I am not getting the issue, find below my code syntax and error message respectively.

Code
import React from “react”;

import ReactDOM from “react-dom”;

const element = < h1 > hello world < /h1>;
console.log(element);

Error Message

ReactDOM’ is declared but its value is never read.ts(6133)

JSX element ‘h1’ has no corresponding closing tag.ts(17008)

Identifier expected.ts(1003)

‘>’ expected.ts(1005)

Unexpected token. Did you mean {'>'} or &gt;?ts(1382)

‘</’ expected.ts(1005)

2

Hello.
Seems you’re using TS.
I think your problem may come from spaces within the tags.
The parser may not interpret tags correctly because of that.

But this is weird because there is an error message about h1 JSX element.

I just made a fiddle and it works in here.

Hello = (props) => {
const element = <h1>Hello {props.name}</h1>;

   return <div>{element}</div>;
}
3

Hi, Thank you, Issue is that I just began the course “Mastering React” by mosh. I followed the instruction and syntax introduced by Mosh in lecture. I am afraid I would not be able to keep up with the rest of course. I installed latest version of node.js. Can you tell me how to fix it? The code shared by Mosh is outdated?

4

Is the code above your App.js file ?

5

I am using visual studio code and I believe it is!

6

I am not using type script, It is javascript! There are issues with react version.

7

The error stacks tells about ts files which is typescript. Now you can perfectly code JS in there. Just you are TS ready.

Quickly created a sample app and it works fine in here.

image
image1274×657 37.6 KB

App.tsx

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [name, setName] = useState("World");
  const element = <h1>Hello {name}</h1>;
  return (
    <div className="App">
      {element}
    </div>
  );
}

export default App;

The same but with extracted Hello component

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <Hello name="World" />
  )
}

export default App;

import React, { useState } from 'react'

function Hello(props: any) {
    const [name, setName] = useState(props.name);

    const element = <h1>Hello {name}</h1>;
    return (
        <div className="App">
            {element}
        </div>
    );
}

export default Hello;