SIGN IN

JSX vs HTML: Overview + Answers to FAQs

Stay Informed

It's important to keep up
with indusctry - subscribe!

Stay Informed

Looks good!
Please enter correct name
Please enter correct email
Looks good!
JSX vs HTML

JSX vs HTML

Let’s talk about the JSX as opposed to HTML. We’ll brush over the basics of JSX, overview the main differences between JSX and HTML, and finish with some frequently asked questions about particular issues often encountered when writing JSX.

What is HTML?

HTML is a Hypertext Markup Language, the standard markup language for documents designed to displayed and viewed on the web in a web browser.

What is JSX?

JSX (JavaScript + XML) is an extension of JavaScript that allows you to write HTML directly within JavaScript, which has a few benefits of making your code more readable and exercising the full power of JavaScript within HTML.

JSX is not intended to implemented by browsers, it also doesn’t signify a proposal to incorporate JSX into the ECMAScript spec. JSX’s main intention is to be used by transpilers or preprocessors to transform these tokens into standard ECMAScript.

JSX is in many ways similar to HTML, however, it does come with certain conspicuous differences which we’ll cover in the next section.

Since JSX is not a valid JS code, it needs to be compiled into JS with a tool like Babel or similar.

A simple example of JSX:

or

Another example of JSX which looks like plain HTML but, in fact, is JavaScript:

translates to:

Since JSX is a syntactic extension of JS, you can write JS directly within JSX. To do so, you’ll need to brace your code within the curly braces for it to be treated as JS:

{ 'insert your JavaScript code here' }

To specify string literals as attributes, use quotes:

You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

A few more examples of using expressions in JSX.

Example 1:

Or example 2:

Babel compiles JSX to React.createElement() calls.

For example:

same as

and then this:

All these objects are called “React elements” and represent descriptions of what you want to see on the screen.

Fundamentally speaking then, JSX provides syntactic sugar for the React.createElement(component, props, ...children) function.

For example,


Compiles to:

JSX vs HTML: overview

The first and one of the most important differences of JSX as opposed to HTML is that nested JSX must return a single element, which we’ll call a parent element that wraps all other levels of nested elements:


Without the wrapper element, JSX will not transpile.

In React, we can render JSX directly into HTML DOM using React rendering API, aka ReactDOM. The formula for rendering React elements looks like this:
ReactDOM.render(componentToRender, targetNode)
ReactDOM.render() must be called after the JSX elements declarations.

Another important difference is that in JSX you can’t use the world class to define HTLM classes, since class is a reserved word in JavaScript, instead, use — className.

Moreover, all HTML attributes and event references in JSX become camelCase, this way, onclick event becomes onClick and onchangeonChange.

Another important difference between JSX and HTML is the closing tag. In HTML almost all tags have an opening and a closing tag except probably a few like

…in JSX, however, any element can be written as a self-closing tag, for example:

Example:

Since the JSX component represents HTML, you can put several components together to create a more complex HTML page.

The fact that JSX looks like HTML doesn’t make it any more of HTML, in fact, you can still write normal functions bypassing the HTML-like syntax.

The bottom line is that JSX is not HTML or a template engine. Let’s briefly outline the differences between those template engines and JSX in the next section.

JSX and templates

With template engines, such as those used in Angular and Vue, you feed the library a string, which is then converted into JavaScript which, in turn, generates virtual DOM structures when executed. In templates, importing helper functions or call methods is only possible through directives, which are the bridge between the HTML and JS.

Here’s how it works:
JSX/JS: javascript -> vdom
Template: string -> javascript -> vdom or string ->JSX/JS

Compare 2 syntaxes below.

JSX

HTML templating:


While both examples convert to plain JavaScript, JSX is still a preferable option if compared with HTML templating, since the former allows taking advantage of the expressiveness of JavaScript at any point in the code.

FAQ:

FAQ

FAQ

Is JSX HTML?

No, JSX is JavaScript XML, an extension of JavaScript that allows writing HTML in React. HTML is a standard markup language for documents designed for the web browser.

How to convert HTML to JSX? // How to convert HTML formatted string to JSX?

There are a bunch of solutions to convert HTML to JSX/React, some of which are:

How to define an HTML class in JSX in React?

Since class is a reserved name in JavaScript, use className instead.

How to append HTML to the JSX variable? // How to put HTML as a string value JSX?

Using dangerouslySetInnerHTML:

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

How to run an external JSX?

To run the script with JSX need just configure @babel/plugin-transform-react-jsx

Input

Output

How to comment out in JSX?

To comment out something inside JSX, use the syntax {/* */} to wrap around the text that you’d like to comment out.
For example,

JSX element not appearing in HTML console {inspector}: what to do?

React uses a Virtual DOM to optimize the rendering process while using the developer tools by default you can inspect a standard DOM only.
For example, React Developer Tools extension can be used for that.

How to add bootstrap HTML to JSX?

You can’t just copy bootstrap templates into React, in order to do so, you’ll first need to convert bootstrap HTML into JSX (please, see above for the available converters) and then copy that code into React

How to style HTML? vs How to style JSX?

1. External CSS files

The main way to use styles for an HTML page is to attach a separate file (using CSS-preprocessors or not) The same approach can be applied to JSX with the only difference that instead of class attribute in JSX used className.

HTML

JSX

2. Inline CSS

Using the style attribute is not the most convenient solution for HTML, but it works for JSX. In this case, styles can be flexibly controlled, including the component level.

HTML

JSX

Given that the JSX is a syntax extension to programming language there are several additional approaches for creating and controling styles: CSS in JS, Styled Components and CSS Modules.

Further reading on the blog:

Building React Components Using Children Props and Context API
React Hooks and RxJS
React vs Angular


Also published on Medium.

About the author

Stay Informed

It's important to keep up
with indusctry - subscribe!

Stay Informed

Looks good!
Please enter correct name
Please enter correct email
Looks good!

Related articles

NextJS Tutorial: Getting Started with NextJS

In this article, we’ll tackle one of those solutions, namely NextJS, cover the differences between NextJS and other available frameworks, answer>>>

Fundamentals

Monthly Digest of the Most Popular and Trending JS GitHub Repos

In the following blog post, we’ll cover the most popular GitHub JavaScript repositories as of October>>>

JavaScript

JSON WEB Authentication with Angular 8 and NodeJS

The article is about interfacing an Angular 8 Project with a secure backend API. The Backend will be running on Node.JS. The security that will>>>

JavaScript

No comments yet

Sign in

Forgot password?

Do not have account yet? You can create one

Or use a social network account

 

By clicking Sign Up, you agree to our privacy policy

Sign up

Already have an account? Please

Or use a social network account

 

By clicking Sign Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By clicking Sign Up, you agree to our privacy policy