JSX (JavaScript XML) is a syntax extension to JavaScript used to write HTML-like structures in JavaScript code. It was popularized by the React framework and is used extensively in React applications. JSX allows developers to write HTML-like syntax directly in their JavaScript code, making it easier to create and manipulate user interfaces.

JSX History

JSX (JavaScript XML) was first introduced by Facebook as a syntax extension to JavaScript in 2013. It was created to be used with React, a popular JavaScript library for building user interfaces.

Before JSX, developers had to write JavaScript code to generate HTML elements, which often resulted in verbose and hard-to-read code. With JSX, developers could write HTML-like syntax directly in their JavaScript code, making it easier to create and manipulate user interfaces.

At first, there was some resistance to JSX among developers who were used to separating HTML and JavaScript. However, as React grew in popularity, more and more developers began to embrace JSX.

Today, JSX is widely used in React applications and has become an integral part of the React development ecosystem. It has also inspired other frameworks, such as Vue.js and Svelte, to adopt similar syntax for their template languages.

Over the years, JSX has evolved to include new features and improvements, such as support for fragments, conditional rendering, and spread attributes. It has also been adopted by other JavaScript tools and libraries, such as Babel and TypeScript, which offer additional features and support for JSX.

Overall, JSX has had a significant impact on the way developers write JavaScript code and has helped make it easier to create complex user interfaces with React.

JSX Syntax

1. Elements

   Elements are the building blocks of JSX. They are used to represent the structure of the user interface. In JSX, elements are written using HTML-like tags, such as <div>, <span>, and <button>.

   For example:

const element = <div>Hello, world!</div>;

1. Attributes

   Like in HTML, JSX elements can have attributes. These attributes are specified in the same way as in HTML, using the attributeName="attributeValue" syntax.

   For example:

const element = <img src="logo.png" alt="Logo" />;

1. Expressions

   JSX also allows developers to embed JavaScript expressions within elements using curly braces {}. These expressions can be variables, functions, or any other valid JavaScript expression.

   For example:

const name = "John Doe";
const element = <h1>Hello, {name}!</h1>;

1. Components

   In React, components are reusable pieces of code that represent parts of the user interface. JSX syntax is used to define components. Components can be either function components or class components.

   For example:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Welcome name="John Doe" />;

1. Fragments

   Sometimes it is useful to return multiple elements from a component. In JSX, this can be achieved using fragments. Fragments are a way to group a list of children without adding extra nodes to the DOM.

   For example:

function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </>
  );
}

These are just some of the basic concepts of JSX syntax. With this knowledge, you can start creating React/React Native applications using JSX syntax.

JSX Best Practises

JSX has a set of rules that must be followed in order to write valid code. Here are some of the basic rules to keep in mind when writing JSX:

1. Every JSX element must have a closing tag, except for self-closing elements.

   For example:

    // Valid
    <div></div>
    <img src="image.png" />
   
    // Invalid - missing closing tag
    <div>
   
    // Invalid - no self-closing tag
    <img src="image.png">
   

2. JSX expressions must have one root element. This means that all the JSX elements must be nested inside a single parent element.

   For example:

    // Valid
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
   
    // Invalid - two root elements
    <h1>Hello</h1>
    <p>World</p>
   

3. JSX expressions can contain JavaScript expressions inside curly braces {}. This allows you to interpolate variables, call functions, and perform other operations.

   For example:

    // Valid
    const name = "John Doe";
    const element = <h1>Hello, {name}!</h1>;
   
    // Invalid - missing curly braces
    const name = "John Doe";
    const element = <h1>Hello, name!</h1>;
   

4. JSX attributes must be wrapped in quotes. The most common way is to use double quotes, but single quotes are also valid.

   For example:

    // Valid
    <img src="image.png" alt="A picture" />
   
    // Valid - using single quotes
    <img src='image.png' alt='A picture' />
   
    // Invalid - missing quotes
    <img src=image.png alt=A picture />
   

5. JSX is case-sensitive. This means that the tags and attribute names must be written in the correct case.

   For example:

// Valid
<div className="container"></div>

// Invalid - using lowercase class
<div class="container"></div>

These are some of the basic rules to keep in mind when writing JSX. By following these rules, you can ensure that your code is valid and can be rendered properly by the browser.

How does it work?

When you write JSX code, it is transformed into regular JavaScript code by a tool called a transpiler, such as Babel. The transpiler takes your JSX code and converts it into React.createElement() function calls that create and render the elements in the browser.

For example,

this JSX code:

const element = <h1>Hello, world!</h1>;

Is transformed into this JavaScript code:

const element = React.createElement("h1", null, "Hello, world!");

Use Cases of JSX

JSX (JavaScript XML) is primarily used with React, a popular JavaScript library for building user interfaces. Here are some of the main use cases for JSX:

1. Creating User Interfaces:

   JSX allows developers to write HTML-like syntax directly in their JavaScript code, making it easier to create and manipulate user interfaces. With JSX, developers can define the structure of their user interface using elements, attributes, and expressions, and then use React to render it in the browser.

2. Reusable Components:

   In React, components are reusable pieces of code representing parts of the user interface. JSX syntax is used to define components, making it easy to create complex UIs by composing smaller, reusable pieces of code.

3. Server-Side Rendering:

   Server-side rendering is the process of rendering a web page on the server instead of the client. With JSX, developers can write code that can be executed on both the server and the client, making it easier to build server-side rendered applications with React.

4. Styling:

   JSX also allows developers to apply styles to their user interface elements using inline styles or external style sheets. This makes it easy to create dynamic user interfaces that can be customized using CSS.

5. Conditional Rendering:

   JSX allows developers to conditionally render elements based on the state of their application. This makes it easy to create user interfaces that can change based on user interactions, data input, or other conditions.

6. Forms:

   JSX can also be used to create and manipulate HTML form elements, making it easy to create forms that collect user input and submit data to a server.

Follow for more

Linkedin: https://www.linkedin.com/in/prahladinala/
Github: https://github.com/prahladinala/
Instagram: https://instagram.com/prahlad.inala/
Twitter: https://twitter.com/prahladinala
Figma Community: https://www.figma.com/@prahladinala
Dribbble: https://dribbble.com/prahladinala
Behance: https://www.behance.net/prahladinala
Personal Portfolio: https://prahladinala.in
ToolMate: https://toolmate.co.in

Thank you!