What is JSX in React

The JSX stands for Javascript XML. In JSX you can code HTML code within a javascript file. This JSX allows you to mix HTML-like code syntax with JavaScript expression, making it easier to represent the structure of your UI in a more declarative and readable way.

When you write HTML code in a JSX file React will transform this code into javascript using a process called transpilation, and the resulting JavaScript will create React elements.

You can use https://babeljs.io/rep online tools to visualize your HTML to JSX code.

Here's a simple example of JSX code:

1. Single-line JSX code

   In single-line JSX code, you don't need to wrap the HTML tag in any parent HTML Div tag.

    import React from 'react';
    const App = () => {
      return (
          <h1>Hello World!</h1>
      );
    };
   
    export default App;
   

2. Multi-line JSX Code

   In Multi-line JSX Code, you need to wrap your all HTML Tags into one parent tag.

    import React from 'react';
    const App = () => {
      return (
        <div>
          <h1>Hello World!</h1>
          <p>This is a simple React component using JSX.</p>
        </div>
      );
    };
   
    export default App;
   

3. Fragment

   Fragment offense is used via <> ... </> syntax in React, Fragments are used for grouping all HTML elements in one parent tag.

    import React from 'react';
    const App = () => {
      return (
        <>
          <h1>Hello World!</h1>
          <p>This is a simple React component using JSX.</p>
        </>
      );
    };
   
    export default App;
   

Thank you for reading