ReactJS | Introduction to JSX

Hello React Developers,

Today I will explain the basics of JSX in React.

JSX is used to add HTML code inside JavaScript. Check out the Beginner’s Guide of ReactJS.

In this guide, we will cover an introduction to React JSX, and why we use JSX in React with an example.

Introducing JSX

Take the following variable declaration

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

This syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

JSX produces React “elements”.

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both, we will return to components in a different section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

Embedding Expressions in JSX

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:

Hello, {name} lang:default decode:true " >const name = 'John Deo';
const element = <h1>Hello, {name}</h1>;

In the example below, we embed the result of calling a JavaScript function,

showName(user), into an <h1> element.

function formatName(user)
{
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'John',
    lastName: 'Deo'
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);

JSX is an Expression Too

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

function getGreeting(user) 
{
    if (user)
    {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

Specifying Attributes with JSX

We use quotes to specify string literals as attributes

const element = <a href="https://www.reactjs.org"> link </a>;

We can also use curly braces to embed a JavaScript expression in an attribute

const element = <img src={user.avatarUrl}></img>;

Final Words:

This was all about JSX in ReactJS. If you have any queries or want to know more about React JSX, you can freely comment below. Share the React JSX tutorial with your ReactJs friends and help them broaden their skills.

Happy Reading!

Subscribe to Notifications