React: html Tags get messy in my App.js

[juanjoaranzales]

Hi! I’m learning react so I’m having fun with everything I see, however when I write on my App.js a simple message like this:

function App() {
    return ( 
      <div className = "App" >
          <h1> Hello friends! </h1>
      </div>
    );
}

and when I save it, the code gets messy and turns in:

function App() {
    return ( <
        div className = "App" >
        <
        h1 > Hello friends! < /h1>   <
        /div>
    );

I don’t really know what’s the problem, so could you please help me to solve this problem?. Furthermore here’s the error:

Thanks a lot!

[jwilkins.oboe]

Hi @juanjoaranzales !

Welcome to the forum!

The error message says the h1 needs a closing tag.
It would help to see your code though.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[juanjoaranzales]

Sure I edit it, thanks for your support and that you for your wishes! But may be you know how can I solute this? @jwilkins.oboe

[jwilkins.oboe]

It looks right.
And you are exporting the app.

Can you try it with just the h1 and see what happens?

function App() {
  return ( 
        <h1> Hello friends! </h1>
  );
}
export default App

[juanjoaranzales]

@jwilkins.oboe Still messy

[jwilkins.oboe]

And you have the react import at the top?

[juanjoaranzales]

Hmmm look:

[MatchaCrisp]

Hi, take a look at this stackoverflow thread:

vs code alters jsx when saving .js file

[jwilkins.oboe]

If that is the issue, then that sucks cause you should be able to use js files and jsx files.

CRA comes with the app.js file.
Weird

[juanjoaranzales]

Wow that’s it! Thank you so much @jwilkins.oboe @MatchaCrisp

[juanjoaranzales]

Well what it said too is that you have to press the button where the language goes and I renamed it like: Javascript React, and eventually that worked.