JSX

Characteristics of JSX

• JSX or JavaScript XML is an extension to the JavaScript language syntax.

• Allows you to write XML-like code for elements and components

• JSX tags have a tag name, attributes and children

• Not necessary to write React applications

• Makes React code simpler and elegant

• Ultimately transpiles to pure JavaScript which is understood by the browsers

Using JSX vs. without JSX

import React from 'react';

const Hello = () => {
    return (
        <h1> Hello Anagh! </h1>
    )
}

export default Hello

Without JSX, the above code would look like this:

import React from 'react';

const Hello from () => {
    // React.creatElement(parent tag, attributes, children)
    return React.createElement('div', { id: 'hello', className: 'testClass' }, React.createElement('h1', null, "Hello Anagh!")) 
}

export default Hello

As you can see, JSX is a much simpler approach. JSX translates into React.createElement, which is imported by the React library.

Differences between JSX and HTMl

• class -> className

• for -> htmlFor

• camelCase property naming convention

  • onclick -> onClick

  • tabindex -> tabIndex