JSX in React World

Markup with JSX

JSX Stands for Javascript XML
JSX is an extension of Javascript used to write HTML inside a Javascript file

There are different ways to write components. But most React developers prefer the conciseness of JSX.

Javascript into Markup :

In the Olden days, Web development engineers recured HTML, CSS, and Javascript for building web applications. HTML - Content, CSS - Design, JavaScript for Logic all in a separate file.

<div>
    <p></p>    
</div>

const increment = 1;
isLoggingIn(){
    increment++;
};

Now Web development become more interactive and logic increasingly determines content day by day. so, for this complexity, Javascript should handle the HTML.
That's Why React rendering logic and markup live together in the same place called Component.

const increment = 1;
function isLoggingIn(){
    return <div>
            <p> increment++</p>
          </div>;
};

By keeping the button rendering logic and markup language together. we ensure that they stay in sync with each other on every edit.

Every React Component contains Javascript function which will always have markup those are rendered in the browser using React Libery's

React components use a syntax extension called JSX to represent markup. JSX looks similar to HTML, but it is stricter and can display dynamic information. To better understand this, you can convert HTML markup to JSX markup.