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

admin管理员组

文章数量:1415467

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.

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.

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Jun 5, 2020 at 4:38 user8989user8989 68822 gold badges99 silver badges2222 bronze badges 3

• 2 It means jsx is a new programming language that is based on javascript – slebetman Commented Jun 5, 2020 at 4:52
• Is JSX only created for react development or it is seprate from react. – user8989 Commented Jun 5, 2020 at 5:53
• React wouldn't be react without jsx. Jsx was created by Facebook as a templating language for their React framework. Jsx is basically javascript with built-in XML-like syntax. You can use the react library without jsx but that wouldn't be react development. Just go through one react tutorial and it would be obvious what jsx is – slebetman Commented Jun 5, 2020 at 6:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 piled into a javascript object by the jsx piler. JSX is piled down to javascript which can be sent to the browser to be executed.

There are two ways to use the jsx language: you can pile it to javascript using the jsx piler 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-pile the jsx for production to speed up page loading and reduce the size of code the page needs to download.

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 pleted 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 bee fortable you will feel the power at your hands and fall in love with it.

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 piler, 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.

本文标签： reactjsWhat does it mean that (JSX) is a syntax extension to javascript in ReactStack Overflow