CODEWITHSUNDEEP
javascriptreactjsreact-native
Dilip Wijayabahu
Dilip Wijayabahu

Reputation: 60

What's the JSX and what is it really doing in React?

I really need to know what JSX is and what it's really doing in my below React code.

This is my react code which I coded in src/index.js file.

const greetDate = () => {
    const getDate = new Date();
    return getDate.toDateString();
}

const greeting = <h1> Hello World. Now current time is {greetDate()}.</h1>
ReactDOM.render(greeting, document.getElementById('root'));
registerServiceWorker();

Upvotes: 2

Views: 54

Answers (1)

Damian Peralta
Damian Peralta

Reputation: 1866

What is JSX? The answer is here

Summarizing from the official doc:

...JSX may remind you of a template language, but it comes with the full power of JavaScript. ...JSX produces React “elements”.

This piece of code is not jsx:

const greetDate = () => {
    const getDate = new Date();
    return getDate.toDateString();
}

The previous code is just javascript ES6 syntax.

This is jsx:

const greeting = <h1> Hello World. Now current time is {greetDate()}.</h1>
ReactDOM.render(greeting, document.getElementById('root'));

And will be transpiled to:

var greeting = React.createElement(
    'h1',
    null,
    ' Hello World. Now current time is ',
    greetDate(),
    '.'
);
ReactDOM.render(greeting, document.getElementById('root'));

Go to BabelJS, and paste your code in the left panel, you will see the result in the right: https://babeljs.io/en/repl

Upvotes: 2

Related Questions