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

user_13060463 0
Viewed 996

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.

jsx reactjs javascript
2 Answers

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.

user_1677350

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.

user_114322000
Related