DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for JSX for beginners (and how it differs from HTML)

JSX for beginners (and how it differs from HTML)

What is JSX

JSX or JavaScript XML is an extension of JavaScript used to write React components.

For example, consider this code snippet below gives an illustration of what JSX typically looks like

const greet = <h1>Hello World</h1>;
Enter fullscreen mode Exit fullscreen mode

So JSX permits us write Javascript and HTML together. However, unlike HTML and Javascript, JSX cannot be interpreted by browsers so it needs a compiler (Babel or Webpack) to transpile it to Javascript

Why use JSX

The very first thing you should know is that JSX is not a necessity. You can write React code without it.

Then why use it? Why mix the logic and the markup? JSX is syntactic sugar. It is designed to make things easier to read and express

For example: Consider a JSX expression

<p color="red" shadowSize={2}>I'm a random sentence</p>
Enter fullscreen mode Exit fullscreen mode

It is compiled by Babel to

React.createElement(
  "p",
  {color: 'red', shadowSize: 2},
  "I'm a random sentence"
)
Enter fullscreen mode Exit fullscreen mode

The later snippet is obviously less pretty πŸ˜€

How JSX differs from HTML

1. Self-closing tags

In HTML, it's okay to write self-closing tags without closing them e.g. <hr /> can be <hr>. This is not permitted in JSX. All tags must be closed.

Also, all tags can be self-close e.g. <div />

2. Adding JavaScript expressions

JavaScript can be added directly into JSX markup using curly braces {...}

{/* Output: Everybody knows 1 + 1 = 2 */}
<p> Everybody knows 1 + 1 = {1+1}<p>
Enter fullscreen mode Exit fullscreen mode

So no need for the <script> tag HTML uses

3. HTML attributes change naming conventions

Remember JSX is writing HTML in JavaScript so certain HTML attributes like class and for which are keyword in JavaScript have to change to className and hmtlFor respectively. Take note of the use of camelCasing in the naming convention.

All JSX attributes follow the camelCase naming convention. So background-color becomes backgroundColor

4. Inline CSS is an object

In HTML, you can directly add your inline CSS styles in the opening tag. However, this is not so in JSX. Here, you pass an object
For example Consider this HTML snippet

<p style="color:red;font-size:14px">Hello there!</p>
Enter fullscreen mode Exit fullscreen mode

In JSX, it could be written as

cont Greet = function() {
  const myStyles = {
    color:"red";
    fontSize:"14px";
    }
  return <p style={myStyles}>Hello there!</p>;
}
Enter fullscreen mode Exit fullscreen mode

OR

return <p style={{color:"red", fontSize:"14px"}}>Hello there!</p>;
}
Enter fullscreen mode Exit fullscreen mode

I'm currently learning React. While transitioning from writing HTML to JSX, I found some key concepts and difference that everyone should be aware of. This is me just documenting my notes. Hope you found it helpful 😊


Header image credit: patterns.dev

Top comments (8)

Collapse
brense profile image
Rense Bakker

Good job on properly learning React! πŸ‘
Btw, there's some good libraries (css in js libraries) that help with doing css styles in react like emotion or styled components

Collapse
babib profile image
ππšπ›π’ ✨ Author

Thanks @brense! I'll check those libraries out

Collapse
erinposting profile image
Erin Bensinger

This post is amazing!! Really well done.

I think it would bring a lot of value to the CodeNewbie Community too:

CodeNewbie Community 🌱

The most supportive community of programmers and people learning to code.

favicon community.codenewbie.org

The CodeNewbie Community is a super supportive & inclusive community of folks from all backgrounds who have gathered together to learn (and help others learn) to code. It's not unlike DEV, but the focus is really on dev newbies! πŸ’»

Would you consider crossposting this article there? Because CodeNewbie is built on the same platform as DEV (Forem) you can fairly easily copy the Markdown and post it there as well. 😁

Collapse
babib profile image
ππšπ›π’ ✨ Author

Hello @erinposting. Of course. I'd love to share my post in the Codenewbie Community

Collapse
andrewbaisden profile image
Andrew Baisden

Great beginners article.

Collapse
babib profile image
ππšπ›π’ ✨ Author

Thank you!

Collapse
philipdeve profile image
Philip Ifeanyi

Awesome Article, you explained it very well

Collapse
babib profile image
ππšπ›π’ ✨ Author

Thank you

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.