CODEWITHSUNDEEP
javascriptreactjsjsx
user8989
user8989

Reputation: 688

What does it mean that (JSX) is a syntax extension to javascript in React

I was learning React and I came to know about JSX, The defination says that it is a syntax extension to javascript. What does it mean by syntax extension to javascript. Does it mean that the React has added new features to existing javascript for react development, or does it altogether a new language developed by the React,or it is seprate from react.

Upvotes: 7

Views: 2093

Answers (3)

Juan Perez
Juan Perez

Reputation: 346

It is a language, a separate language that is not JavaScript (though it is similar).

Like any language, it is executed by an executor program (also called compiler, interpreter, runner, etc). This program can't be Nodejs since it doesn't understand JSX.

The executor program can be a program written in JavaScript and itself being executed by Nodejs.

Babel is such an executor program that is run in Nodejs and transforms JSX into JS.

Upvotes: 0

slebetman
slebetman

Reputation: 113906

The simplest way to explain what JSX is is to show an example of a JSX page. The following is a simple "Hello World" example in JSX:

function Title () {
    return <h1>Hello</h1>
}

function Content (text) {
    return <div>{text}</div>
}

ReactDOM.render(<div><Title/><Content/></div>,document.body);

Now, a lot of the code above look like javascript but it's obviously invalid javascript right? Souldn't strings be wrapped in quotes like "<h1>Hello</h1>"? And what's with the weird {text} syntax? And what is a <Content> tag? Well, this is jsx. The <h1> element isn't a string but will be compiled into a javascript object by the jsx compiler. JSX is compiled down to javascript which can be sent to the browser to be executed.

There are two ways to use the jsx language: you can compile it to javascript using the jsx compiler or use a jsx parser in the browser to interpret the jsx in the browser. The second method is usually used during development or when debugging your web page. Normally you would pre-compile the jsx for production to speed up page loading and reduce the size of code the page needs to download.

Upvotes: 5

subuubalaa
subuubalaa

Reputation: 1

As the definition says , JSX is an extension to Javascript. But what it implies is, at the end of the day when you look at a completed JSX file, you will realize that it is just plain Javascript plus HTML.

Now you may be wondering, HTML inside Javascript?!

Yes, You will be aware of the fact that the web browser can Understand only HTML, CSS and Javascript. But to develop amazing, feature rich, good looking web applications you will end up writing Huge HTML files with corresponding Javascript & CSS. In the long run, debugging and maintaining it will be a nightmare. That's where the developers who created React pitched in and tried to make matter simpler and decided to give you(the developer) more control & power.

In other words, JSX gives you more power and control while creating a React Web Application. I'm saying this from my experience, it will take sometime to get used to the weird syntax but when you become comfortable you will feel the power at your hands and fall in love with it.

Upvotes: 0

Related Questions