HTML vs JSX

Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page.

HTML is a very important language in web development. Your code is either in HTML originally or compiles to it so browsers can read it.

JSX, on the other hand, means JavaScript Syntax Extension or JavaScript XML as some like to put it.

It was created as a syntactic sugar for React.createElement(). It is an extension of JavaScript that allows developers to write HTML right within JavaScript. So when you're writing JSX, technically you're writing JavaScript and HTML together.

Also, that means JavaScript's reserved keywords must be kept intact. And that is why the “for” attribute in HTML is “HTMLFor” in JSX, since "for" is one of the commonest JavaScript reserved keywords.

In terms of support by browsers, HTML is supported by all of them. JSX, on the other hand, was never really intended to be, so you need a compiler like Babel or Webpack to transpile JSX into the JavaScript that browsers understand.

The Main Differences Between HTML and JSX

You need to return a single parent element in JSX

One of the major differences between HTML and JSX is that in JSX, you must return a single parent element, or it won't compile.

A lot of devs use <div>...</div>, but a better one that many people use is “fragment”, <>...</> which makes the code more readable.

In HTML, you are free to do whatever you want as you don’t have to return a single parent element.

jsx1
Here you can see that JSX is not compiling because there's no parent element.

jsx2
And here JSX is compiling because there is a parent element (fragment).

You can implement JS directly in JSX

In JSX, it is possible to write JavaScript directly. You can do this by putting the JavaScript in curly braces {...}. Whereas in HTML, you need a script tag or an external JavaScript file to implement JavaScript:

const Article = () => {
  return (
    <>
      <div>
        <p>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
      </div>
    </>
  );
};
export default Article;

All Tags Self-close in JSX

Tags can self-close in JSX. That is, it is possible to have <div></div> as <div /> and <span></span> as <span />. You don't want to do that, but its possible.

Self-closing tags in HTML can self-close without the slash before the right angle bracket, that is <br /> could work as <br>. But in JSX, you need to include the slash. This should bring something to mind – JSX heavily relies on HTML 4 syntax.

jsx3
Here you can see that JSX is not compiling because there's no forward slash before the right angle bracket of the line break tag.

jsx4
And here you can see that JSX is compiling because there is a forward slash in the line break tag.

ClassName and HTMLFor, not class and for in JSX

To define class names and for attributes in JSX, you don't do it as class or for, since both are reserved keywords in JavaScript.

You actually create class components with the class keyword. So, to define class names in JSX, you do it as "className" and for attributes for labels you write "HTMLFor":

const Article = () => {
  return (
    <>
      <div className="container">
        <p>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
        <form>
          <label htmlFor="name">Name</label>
          <input type="text" />
        </form>
      </div>
    </>
  );
};

export default Article;

Write all HTML Attributes in camelCase in JSX

You need to write all HTML attributes and event references in camelCase while writing JSX. So, onclick becomes onClick, onmouseover becomes onMouseOver, and so on:

const Article = () => {
  const sayHI = () => {
    alert("Hi Campers");
  };

  return (
    <>
      <div className="container">
        <p>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
        <button onClick={sayHI}>ALert Hi</button>
      </div>
    </>
  );
};
export default Article;

Write Inline Styles as Objects in JSX

And lastly, to define inline styles for JSX, you write it as an object, with the properties in camelCase, the values in quotes, and then you pass it inline to the JSX.

This means you have to open up a style attribute and use curly braces instead of quotes. This is opposed to HTML where you're free to define millions of styles right inside the opening tag without writing them as objects and putting them in quotes:

const Article = () => {
  const inlineStyle = {
    color: "#2ecc71",
    fontSize: "26px",
  };
  return (
    <>
      <div className="container">
        <p style={inlineStyle}>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
        <button onClick={sayHI}>ALert Hi</button>
      </div>
    </>
  );
};
export default Article;

You can choose to write the object directly in the style attribute – that is, by opening up two curly braces and putting the properties and values inside.

But a cleaner way is to define the object outside of the JSX, and then pass it into the opening tag.

const Article = () => {
  return (
    <>
      <div className="container">
        <p style={{ color: "#2ecc71", fontSize: "26px" }}>Hi campers</p>
        <p>How's coding going</p>
        <p>What is up?</p>
        {new Date().toDateString()}
        <br />
        <br />
        {2 + 5} is seven in word
        <br />
      </div>
    </>
  );
};

export default Article;

Note that you should not use inline styling in plain HTML – you don't want to ruin your website's SEO.

That's it!

Thank you for reading. To connect with me, checkout my portfolio, or follow me on Twitter, where I spend most of my time tweeting and engaging in anything web development.