Understanding JSX in React – The Language Behind the UI

Introduction:

in our last blog we learn what react is. what are the reasons behind using react etc. Now let's move on to the next topic JSX – the language we write inside React components.

What is JSX?

JSX stands for JavaScript XML is a syntax extension for JavaScript that allows you to write HTML- like code in within JavaScript, primarily used in React to make building web pages easier.

For Example:

    const message = <h1>Hello World !</h1>;

You must have seen code like this. This looks like HTML, but it's actually JavaScript code behind the scenes, it gets converted into:

    const message = React.createElement('h1', null, 'Hello World!');

Why do we use JSX in React?

JSX makes our code:

• Simple to understand 
• Easy to build components
• Readable and short 

JSX is Like Writing Recipes

Let’s assume you're a chef 

JSX is your easy-to-read recipe card:

“1 bowl rice, 2 spoons sugar, 1 cup milk.”

React is the cook that reads that recipe and creates the real dish.

So, JSX tells React what to make and React prepares it for the browser.

JSX Golden Rules - That Every Beginner Must Know

• Rule 1: JSX must return only one parent element

                <h1>Hello</h1>

       <p>World</p>

• This is Wrong. React won't accept it

                <div>

             <h1>Hello</h1>

             <p>World</p>

        </div>

• This is Correct code or you can also use <>...</> (called fragments) to wrap without adding extra div

• Rule 2: Use {} to add JavaScript inside JSX

• In JSX, whenever you need to insert a variable into your layout, use curly braces. This tells React to evaluate the JavaScript inside.

                    const name = "Ram";

        return <h1>Hello, {name}</h1>;

•  Rule 3: Loops, arrays, and functions can all be used in JSX

• Let's assume you have a list

                    const fruits = ["Apple", "Banana", "Mango"];

•  In JSX:

                    <ul>

               {fruits.map(fruit => <li>{fruit}</li>)}

            </ul>

• React will display: 
• Apple
• Banana
• Mango

In Short – JSX is React’s Best Friend

• JSX means writing UI with a mix of HTML and JavaScript
• It looks like HTML but acts like JavaScript
• React converts it into real code that browsers can understand
• JSX helps you write better, faster, cleaner code
• It’s beginner-friendly — once you get the hang of it!

(Video by Codevolution on YouTube — all rights belong to the creator)

 What’s Coming Next?

Now that you understand JSX, you’re ready to create your first real React component!

In the next blog, we’ll learn:

“How to build a basic React component using JSX”

It’ll be fun, clear, and super practical!
Let’s keep learning