React-intro

What’s happening here? CodePen allows you to use imports like this. It’s importing React (the UI library) and it’s importing React DOM.

React seems to be in a strange place at the moment. They seem to expect you to use Next.js or Remix – and to never use React alone. They also recently released the idea of “Server Components.”

React Server Components allow you to write UI that can be rendered and optionally cached on the server. In Server Components, component logic such as data fetching and database mutations is executed exclusively on the server.

Sounds a lot like PHP, doesn’t it?

React-dom contains features that are only supported for web applications (which run in the browser DOM environment).

But we’re trying not to concern ourselves with that – and just focus on the syntax and general concepts – (mostly likely in comparison with your Vue experience).

Note: we’re not using the `React` we imported. So, maybe that just exists globally or something? You tell us.

JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div> or an empty <>...</> wrapper:

JSX

This is part of the reason you’ve seen so much source code with a million extra anonymous divs. It’s not JSX’s fault, but React developers tend to take the documentation at face value and might be learning HTML for the first time – in this context (and not know any better).