How to work with JSX in React?

Last update: 01 - 11 - 2023

Explanation of what JSX is

JSX (JavaScript Syntax Extension) is the file extension that React uses where we can write HTML code inside JavaScript. This does not mean that HTML now has the qualities of a programming language, it is not JavaScript inside HTML but HTML inside JavaScript.

While we can work in a React application with components or pages with .jsx file formats, this is entirely optional. React can work with .js file extensions as well, it is at the discretion of the developer or team.

So if JSX works like HTML...🤔

What is the difference between JSX and HTML files?

First of all, the file extension. 😆

Second, HTML files display information statically through the use of tags such as a < p > or a < header >, which JSX can also do although it can display variables or expressions within the tags.

Third, JSX has certain rules when working with its code. Let's see how to do it. 👇🏻

JSX code rules

  1. The class attribute is replaced by className

    2. Since JavaScript has class as a reserved word, the attribute used in HTML to assign classes is replaced by is className.

    We must remember that React is more related to JavaScript than to HTML so its syntax will be linked to the programming language and that is why these changes are made.

    <!-- With HTML --> 

    <h1 class="main-title"></h1>

    {/* With JSX */}

    <h1 className="main-title"></h1>

  2. Variables can be assigned as Vanilla JavaScript

    3. const title="Learning about JSX";

    <h1 className="main-title">{title}</h1>

  3. Just as you can use variables you can also use more JavaScript code to perform certain logic within the JSX file, such as loops or conditionals.

    4. The conditional blocks must be of a single line, so if a check is to be made it must be done with a ternary operator.

    <h1className="main-title">
      {title ? "Learning about JSX" : "More JS must be studied"}
    </h1>

  4. HTML tags that don't have a closure must be closed. For example an input tag or an img 

    5. <!-- HTML --> 

    <img src="" alt="">

    {/* JSX */}

    <img src="" alt=""/>

    //We also can see things like:

    <img src="" alt=""><img/>

  5. All the elements that are going to be rendered must be nested in a container tag.

    6. For this we have two options, to use any HTML container tag such a div, a main or a section but React on its API offers us the React Fragment.

    A React Fragment is a React Component that allows us to enclose other components of our application, as a master container tag.

    And what is the difference between a React Fragment and an HTML tag🙋🏻‍♂️?

    At the time of compiling all the files of a React project these are transformed into the basic technologies of web development: HTML, CSS and JS. The container tag you have chosen to nest the rest of the components is going to affect semantically the components of the application, so you must be careful if you want to wrap with an HTML tag.

    React Fragment is a solution to this detail since when compiling the project this component becomes "invisible" and allows a better reading for search engine crawlers.

    <React.Fragment>
      <h1 className="main-title">{title}</h1>
    </React.Fragment>

    //Or the short version

    <>
      <h1 className="main-title">{title}</h1>
    </>

  6. Each component must have a return

    7. In this last point we are going to connect all the points above with an example of a complete JSX file with a functional component.

    import React from "react";

    const MainTitle = () =>{
      const title = "Learning about JSX"
      return (
        <>
          <h1 className="main-title">{title}</h1>
        </>
      )
    }

    export default MainTitle

    In the example above we have a component called MainTitle. It is called a functional component because it is created through a JS function and like any function, it must return something, in this case an h1; there are also class components that are created from JS classes and use the render method to display the information on the browser screen.

    The examples in this section will be created with functional components as they are the modern way of working with React JS. More topics such as props and how to create components will be coming soon. 😃

Back