Why Qwik use JSX syntax

If attention had been paid to the previous example, it would have been noticed that the procedure for writing a Qwik component is not at all different from that used to write a React, SolidJS, or Preact component. All these frameworks mentioned use JSX, and the Qwik team's choice to use the same system is driven by the desire to lower the learning curve of the framework and attract as many developers as possible.

This choice was made not only because most front-end developers know it but also because there are many tools and an ecosystem already available for this syntax. For example, consider the various linters for the code, the most famous of which is Prettier, which already offers support for JSX. There was no need to adapt or create extra features to support Qwik; it already worked by default because the syntax is the same as other frameworks that have already been widely adopted. Hence, if this syntax is already known, it will not be difficult to start writing the first component.

But what is JSX?#

JSX is an HTML-like syntax that was seen in the example of a real Qwik component, and it is very useful because it adds dynamic expressions that allow referencing variables and functions within the HTML using the { } syntax. This allows writing HTML-like code inside JavaScript.

Here's an example:

xxxxxxxxxx

export default component$(() => {

    // Logic and style should be implemented here

​

    return (

        <button

            class='...'

            onClick$={() => {

                console.log('Hi!');

            }}

        >

            Greetings

        </button>

    );

});

In this example we have written HTML, we see the <button> element, and it is easy to understand that with this syntax we can create our Qwik application in a very similar way to what we could do by writing Standard HTML. Like normal HTML elements, it is also possible to use standard HTML attributes in JSX, so we can use class to style our application, aria-label for accessibility or just to give another example we can use disabled to disable a particular button that we don't want the user to click. But not all frameworks use JSX there are other templating systems in the frontend ecosystem and to make you understand what I'm talking about I want to give you some examples, React with JSX, Vue.js, and Angular with a different templating system. Let's try to compare the same component seen before with Qwik but with the syntax of React, Vue.js, and Angular.

• React

Here is the example with React: