Question about React

I’m new to coding and React, I have a question about HTML and React, I can’t get the point that we can write HTML in JSX. If we did this, do we need to write another .html to save it. Like the following:

const JSX = <div>
  <h1>Hello JSX</h1>
  </div>;

Do we need to repeat the div element in HTML file? or we just need .js and .css to be rendered? (Maybe this is a little stupid to you, but I don’t really have much experience at web development) Thanks!

No, in React you don’t put yur html in htnl files, you put it in JS files. It iteringles your html and JS, but allows you to break things into smaller, easier to manage and reuse chunks. React will take care of assembling your html for you.

React is confusing at first, give it time.

1 Like

Hi @RaymondGuo !

Not quite.
JSX has HTML like syntax but it is important to remember that it is not HTML.

The cool thing about react is that you can create components, which will use JSX and nest them inside other components.
All of that will be rendered to the page.
You won’t need to touch the HTML file at all.

You will learn about how to create components later.

To gain a fuller understanding of JSX and why we use it, I would highly suggest you watch the first couple of videos in Kent Dodds Beginner React course. Each lesson is only a few minutes long.

It is free to watch and he does an incredible job of breaking everything down and making learning React much easier.
You can watch those videos while going through the fcc course.

Eventually, you should watch the entire course which is just 2 hrs long.
But for now you can just watch the first 5 videos.

You should never feel bad about asking questions.
That is how you learn :slight_smile:

Plus, learning react is a different way of thinking and it will take some time to get used to.
When I was first learning react, I hated it because I didn’t understand it at all.
But after a lot of practice , building stuff and reading articles/ watching videos it finally started to make sense.
Now I love it and that is what I primarily use on the job.

Hope that helps!

1 Like

The JSX code is basically instructions to render the HTML code you’re describing with it into the app you are building.

You’ll have one HTML file, and that will have an element that you tell React to render your app to. It like an empty box that you’re the going to fill with your application.

React will then take care of rendering any HTML you’re describing in your JavaScript files using JSX.

1 Like

hahahaha, thanks, you really cheered me up, thanks!

Can I take it as HTML is a structure of the documents, and shows the markup to react where to render?

Thanks, I’m getting better after I watched video and browsed other websites.