React: html Tags get messy in my App.js

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>

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

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

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!

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 (’).

1 Like

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

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

@jwilkins.oboe Still messy :confused:

And you have the react import at the top?

Hmmm look:

Hi, take a look at this stackoverflow thread:

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 :woman_shrugging:

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

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.


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.