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.
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
>
?ts(1382)
‘</’ expected.ts(1005)
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>;
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?
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.
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}
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}
export default Hello;
